一、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：点击访问

Three.js及React Three Fiber开发相关推荐

React Three Fiber动画入门
使用静态对象和形状构建 3D 场景非常酷,但是当你可以使用动画使场景栩栩如生时,它会更酷. 在 3D 世界中,有一个称为角色装配的过程,它允许你创建称为骨架的特殊对象,其作用类似于骨骼和关节系统. 这 ...
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
arcgis开发多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
react 日期怎么格式化_手写React的Fiber架构，深入理解其原理
熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重 ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
webpack+react+redux+es6开发模式---续
一.前言之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

Three.js及React Three Fiber开发

一、three.js是什么？

二、three.js程序结构

1、创建一个场景

2、在场景中加入元素

3、渲染场景

三、React Three Fiber是什么？

React Three Fiber优缺点

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

1、创建一个场景

2、在场景中加入元素

3、注意项

4、附加项

参考文档

Three.js及React Three Fiber开发相关推荐

最新文章

热门文章