Three.js和React Three Fiber开发

一、three.js是什么？

three.js 概念 – three.js是基于原生WebGL封装运行的三维引擎。其实就是JavaScript编写的WebGL第三方库，提供了很多的3D显示功能。

你可以将它理解为three js，three表示3D，js表示javascript，那么合起来，three.js就是使用javascript来写3D程序的意思。

three.js官网：点击访问
github各个版本：点击访问
three.js中文教程: 点击访问

three.js目录

二、three.js程序结构

three.js程序主要是由三个部分组成：场景（Scence）、相机（Camera）和渲染器（Renderer）。除了这三部分以外，还有一些比较常用的，比如：几何体（Geometries）、材质（Materials）、光线（Lights）、动画（Animation）、控制器（Controls）等等。

1、创建一个场景

创建基础场景

// 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的宽高
renderer.setSize( window.innerWidth, window.innerHeight );
// 添加至body中渲染
document.body.appendChild( renderer.domElement );

代码示例中，PerspectiveCamera（透视摄像机）一共有4个参数。

PerspectiveCamera(fov, aspect ratio, near, far);

fov(视野角度)： 官方描述是这样的，视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。可以理解为人眼睛的视角，当眼睛正常睁开的时候，可以看见整个显示屏区域，而当你慢慢闭眼时，你能看到的显示屏区域也会慢慢变少。所以fov值越大，视角也越大，反之亦反。
aspect ratio(长宽比)： 用一个物体的宽除高的值。
near(近截面)、far(远截面)： 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。可以简单点理解，你只能看清0.1m~100m以内的物体，当物体超出这个范围时就看不见它了。0.1代表近截面，100则代表远截面。

以上则是完成了一个基础场景的创建。

2、在场景中加入元素

只做一个基础的场景是没有任何意义的，这时我们就需要往场景中添加一些其它的元素。比如几何体、物体、灯光、动画、控制器等等这些元素来丰富我们的3D场景。

往场景中添加物体

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质，并给材质设置颜色
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网格
const cube = new THREE.Mesh( geometry, material );
// 在上面的场景中，加入刚创建的网格
scene.add( cube );

// 调整相机位置
camera.position.z = 5;

第一步：创建一个立方体（BoxGeometry）对象，这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。

第二步：给立方体添加材质（MeshBasicMaterial）并设置颜色（color: 0x00ff00）。

第三步：创建一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质。

第四步：将创建好的立方体网格添加到scene场景中。

注意： 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

3、渲染场景

当我们做完上面的操作之后你会发现，你创建的场景以及立方体并没有渲染出来，这是因为场景还没有更新渲染，所以我们需要对场景进行更新。

function animate() {
    // 动画循环
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

这样一个带有立方体的3D场景就创建好了。

三、React Three Fiber是什么？

React Three Fiber其实就是把three.js进行了再封装，使用起来更方便，语法则就是react的jsx语法糖。

React Three Fiber官方文档：点击访问

React Three Fiber优缺点

优点： three.js语法更接近原生js，在react项目中使用会使代码看起来很乱，不利于后期维护。而React Three Fiber则使用了jsx语法糖，使用起来更简单，也方便维护。
缺点： 正因为它是three.js的再封装，使用起来变得不像three.js那么灵活，而且使用fiber必须得对three.js有一定的理解，对于没接触过three.js的人来说，学习成本较高。

四、使用React Three Fiber创建一个场景

1、创建一个场景

import ReactDOM from 'react-dom'
import { Canvas } from '@react-three/fiber'
function App() {
  return (
    <div id="canvas-container">
      <Canvas />
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

Canvas 组件在幕后做一些重要的设置工作：

• 它设置了一个Scene和一个Camera，渲染所需的基本构建块。
• 它每一帧渲染我们的场景，你不需要传统的渲染循环。

以上这一步操作替代掉的是three.js中的以下内容

// 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的宽高
renderer.setSize( window.innerWidth, window.innerHeight );
// 添加至body中渲染
document.body.appendChild( renderer.domElement );

2、在场景中加入元素

<Canvas>
  // 网格
  <mesh>
    // 几何体
    <boxGeometry />
    // 材质
    <meshStandardMaterial />
  </mesh>
</Canvas>

代码块中的 <mesh /> 组件实际上等同于 new THREE.Mesh()；
而 <boxGeometry /> 和 <meshStandardMaterial /> 会自动附加到其父级 <mesh /> 上创建一个新网格。

如果有多个物体，可以用group来包住mesh。

替换掉了以下代码

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质，并给材质设置颜色
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网格
const cube = new THREE.Mesh( geometry, material );
// 在上面的场景中，加入刚创建的网格
scene.add( cube );

function animate() {
  // 动画循环
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

以上则完成了一个完整的3D场景创建。相比于原生three.js，代码确实简化了不少。

3、注意项

• <Canvas /> 组件内部只能包含three.js中存在的对象，不能包含H5标签以及一些自定义组件；
• 灯光、控制器等等对象，必须写在 <Canvas /> 下一级，不能写在 <mesh /> 内。

4、附加项

React Three Fiber内部提供了很多自定义hooks，如useThree、useFrame、useLoader、useGraph等等。对场景内部物体的操作也提供了一些events，如onClick、onUpdate等等。都可以参考官方文档。

参考文档

three.js官网：点击访问
github各个版本：点击访问
three.js中文教程: 点击访问
React Three Fiber官方文档：点击访问
React Three Fiber Hooks： 点击访问
React Three Fiber Events：点击访问

这篇好文章是转载于：学新通技术网