08.03. 编写HelloThreejs
03 编写HelloThreejs
终于要真正第一次亲密接触 Three.js 了。
我们先梳理一下创建一个 Three.js 示例所需要的过程，认真阅读并理解整个过程，会更加容易让你读懂我后面的示例代码。
从引入Three到创建示例的过程
第1环节：引入Three.js
引入方式1：将 THREE 一次全部引入
import THREE from 'three'
//当需要使用某个具体的模块时，例如创建场景，则代码如下
const scene = new THREE.Scene()这种方式会将所有 Three.js 相关模块都引入进来，虽然引入代码简介，但是会造成项目打包输出时文件过大，因此并不建议这样引入。
请注意：默认 three 模块导出的名字就是全部大写的 “THREE”。我个人非常不习惯 模块名称 全部大写，我的代码习惯是使用 “Three”。
import * as Three from 'three'
const scene = new Three.Scene()本系列文章中使用的示例，代码绝大多数都采用这种引入形式，使用 Three 而 不使用 THREE。
所以网上一些教程中可能描述某个类时使用的是 THREE.Xxxx，而我在本系列文章中都会使用 Three.Xxxx 这种方式。
引入方式2：按需引入模块
例如我们需要使用 Scene 模块，则仅引入该模块即可
import { Scene } from 'three'
//当需要使用某个具体的模块时，例如创建场景，则代码如下
const scene = new Scene()本文示例代码，都将采用按需引入的方式。
第2环节：将DOM中的canvas与Threejs中的渲染器进行挂钩
采用 React 的 useEffect + useRef 来实现所谓 “挂钩” 。
具体参见示例代码
第3环节：创建Three.js基础3大元素、场景可见元素
基础3大元素：
- 渲染器 > 本文示例采用的渲染器是 WebGLRenderer
- 透视镜头 > 本文示例采用的是 PerspectiveCamera
- 场景 > Scen
场景可见元素：
- 几何体 > 本文示例采用的是 BoxGeometry(立方体)
- 几何体的材质(颜色、光亮程度) > 本文示例采用的是 MeshBasicMaterial 或 MeshPhongMaterial
- 网格 > Mesh
- 光源 > 本文示例采用的是 DirectionalLight(平行光源)
补充说明：
你应该发现，除了 场景(Scen)、网格(Mesh) 之外，其他的元素我都注明 “本文示例采用的是...”。
因为无论渲染器，还是几何体，以及其他元素，Three.js 都内置了非常多不同种类的元素构造函数，这个会在以后学习中逐渐详细说明举例。
第4环节：使用渲染器渲染出画面
渲染画面
就是根据第3环节中所创建出的 3D 场景，渲染出画面，并将画面内容填充到 canvas 中。
本文示例中，为了呈现 3D 动画，使用到了浏览器中 window.requestAnimationFrame() 这个函数。
关于 window.requestAnimationFrame() 的用法请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame
补充说明：3D动画是怎么动起来的？
默认情况下，渲染出的 3D 场景都是静止的，所谓 3D 动画，本质上是因为 “场景” 上发生了 “变化” 被渲染器不断重新渲染。
引起这些所谓 “变化”，简单可归纳为以下几种原因：
- 镜头不变，但可见场景元素发生了变化，例如几何体发生了变化、网格角度发生了变化等
- 可见场景元素不变，但是镜头发生了变化，例如镜头的推近、拉远等
- 镜头变化了，同时场景元素也变化了......
示例代码
第1步：创建并编写index.tsx代码内容
在 src/components/hello-threejs 目录下，创建 index.tsx 作为我们自定义的组件。
编写该组件对应的代码内容：
import React, { useRef, useEffect } from 'react'
import { WebGLRenderer, PerspectiveCamera, Scene, BoxGeometry, Mesh, DirectionalLight, MeshPhongMaterial } from 'three'
const HelloThreejs: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
if (canvasRef.current) {
//创建渲染器
const renderer = new WebGLRenderer({ canvas: canvasRef.current })
//创建镜头
//PerspectiveCamera() 中的 4 个参数分别为：
//1、fov(field of view 的缩写)，可选参数，默认值为 50，指垂直方向上的角度，注意该值是度数而不是弧度
//2、aspect，可选参数，默认值为 1，画布的宽高比(宽/高)，例如画布宽300像素，高150像素，那么意味着宽高比为 2
//3、near，可选参数，默认值为 0.1，近平面，限制摄像机可绘制最近的距离，若小于该距离则不会绘制(相当于被裁切掉)
//4、far，可选参数，默认值为 2000，远平面，限制摄像机可绘制最远的距离，若超出该距离则不会绘制(相当于被裁切掉)
//以上 4 个参数在一起，构成了一个 “视椎”，关于视椎的概念理解，暂时先不作详细描述。
const camera = new PerspectiveCamera(75, 2, 0.1, 5)
//创建场景
const scene = new Scene()
//创建几何体
const geometry = new BoxGeometry(1, 1, 1)
//创建材质
//我们需要让立方体能够反射光，所以不使用MeshBasicMaterial，而是改用MeshPhongMaterial
//const material = new MeshBasicMaterial({ color: 0x44aa88 })
const material = new MeshPhongMaterial({ color: 0x44aa88 })
//创建网格
const cube = new Mesh(geometry, material)
scene.add(cube)//将网格添加到场景中
//创建光源
const light = new DirectionalLight(0xFFFFFF, 1)
light.position.set(-1, 2, 4)
scene.add(light)//将光源添加到场景中，若场景中没有任何光源，则可反光材质的物体渲染出的结果是一片漆黑，什么也看不见
//设置透视镜头的Z轴距离，以便我们以某个距离来观察几何体
//之前初始化透视镜头时，设置的近平面为 0.1，远平面为 5
//因此 camera.position.z 的值一定要在 0.1 - 5 的范围内，超出这个范围则画面不会被渲染
camera.position.z = 2
//渲染器根据场景、透视镜头来渲染画面，并将该画面内容填充到 DOM 的 canvas 元素中
//renderer.render(scene, camera)//由于后面我们添加了自动渲染渲染动画，所以此处的渲染可以注释掉
//添加自动旋转渲染动画
const render = (time: number) => {
time = time * 0.001 //原本 time 为毫秒，我们这里对 time 进行转化，修改成 秒，以便于我们动画旋转角度的递增
cube.rotation.x = time
cube.rotation.y = time
renderer.render(scene, camera)
window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)
}
}, [canvasRef])
return (
<canvas ref={canvasRef} />
)
}
export default HelloThreejs第2步：添加对HelloThreejs组件的使用
修改 src/app.tsx 对应的代码：
import './App.scss'
import HelloThreejs from '@/components/hello-threejs';
const App = () => {
return (
<HelloThreejs />
)
}
export default App;第3步：查看运行效果
yarn start若无意外，你会在浏览器中看到一个 高150像素，宽300像素的 黑色场景，该场景上一直有一个 3D 立方体在旋转。
至此，我们的第一个 Three.js 示例完成。
如何让场景有多个立方体？
首先回忆一下 "01 Three.js简介.md" 中 “Three.js中的技术名词” 中关于 网格的介绍。
网格：一种特定的 几何体和材质 绘制出的一个特定的几何体系。
网格包含的内容为：几何体、几何体的材质、几何体的自身网格坐标体系
在 Three.js 中，要牢记以下几个概念：
- 一个几何体或材质，可以同时被多个网格使用(引用)
- 一个场景内，可以添加多个网格
那和让场景中有多个立方体？
答：使用相同或不同的几何体(立方体)，以及相同或不同的材质，去创建多个网格(特定的几何体)，然后将多个网格添加到同一个场景中。
注意：为了不同的立方体在场景中不叠加在一起，所以我们还要将网格(特定的几何体)的位置设置成不同的值。
具体代码的修改：
1、我们假定继续使用原有示例中的立方体，因此创建几何体的代码不变。
2、为了凸显立方体的区别，我们将创建 3 个不同颜色的材质。
- //创建纹理
- const material = new MeshBasicMaterial({ color: 0x44aa88 })
+ //创建 3 个纹理
+ const material1 = new MeshPhongMaterial({ color: 0x44aa88 })
+ const material2 = new MeshPhongMaterial({ color: 0xc50d0d })
+ const material3 = new MeshPhongMaterial({ color: 0x39b20a })3、创建 3 个网格，每个网格的水平位置不同
- //创建网格
- const cube = new Mesh(geometry, material)~~
- scene.add(cube)
+ //创建 3 个网格
+ const cube1 = new Mesh(geometry, material1)
+ cube1.position.x = -2
+ scene.add(cube1)//将网格添加到场景中
+ const cube2 = new Mesh(geometry, material2)
+ cube2.position.x = 0
+ scene.add(cube2)//将网格添加到场景中
+ const cube3 = new Mesh(geometry, material3)
+ cube3.position.x = 2
+ scene.add(cube3)//将网格添加到场景中4、为了便于后面对于不同网格的循环修改，我们将创建包含 3 个网格的一个数组
const cubes = [cube1, cube2, cube3]5、修改自动旋转渲染动画的相关代码
- cube.rotation.x = time
- cube.rotation.y = time
+ //通过 cube.map 循环遍历修改网格相关属性
+ cubes.map(cube => {
+ cube.rotation.x = time
+ cube.rotation.y = time
+ })6、保存并重新执行 yarn start，若一切正常此时就会看到 画面中有 3 个不同颜色的立方体同时在做旋转动画。
目前 3 个立方体仅仅是颜色和位置不同，你可以尝试将立方体设置为不同的尺寸，不同的旋转频率等等，自己发挥吧。
是不是感觉自己对 Three.js 场景有进一步有所掌握 ^_^。
下一节，我们将进一步改进这个示例代码。