theme: smartblue
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情
本文简介
点赞 + 关注 + 收藏 = 学会了
在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！
在使用 Three.js 的前，必须先了解 3大组件：摄像机、场景、渲染器。这是 Three.js 的必需品。
本文讲解的是 场景 的用法。
什么是场景？
Three.js 的场景只有1种，用 THREE.Scene 来表示。场景对象自身的属性和方法并不多，学起来非常简单。
场景是用来保存画布上所有元素信息的容器，比如它可以保存 对象、光源、物体 等信息。
创建场景的代码通常如下所示
js const scene = new THREE.Scene()
在介绍阶段，我先把常用的属性和方法列出来，先过一遍大概知道有什么东东，之后再逐一讲解。
属性
| 属性名 | 说明 | | ---------------- | ------------------------------------------------------------ | | children | 返回一个场景中所有对象的列表，包括摄像机和光源 | | fog | 给场景添加雾化效果，雾化效果的特点是场景中的物体离得越远就会变得越模糊 | | overrideMaterial | 使用该属性可以强制场景中的所有物体使用相同的材质 |
方法
| 方法名 | 说明 | | --------------- | -------------------- | | add | 向场景中添加对象 | | remove | 将对象从场景中移除 | | traverse | 返回场景中的所有物体 | | getObjectByName | 查找特定名字的对象 |
只看上面的简介应该还是一头雾水的，学 Three.js 最好的方式就是自己敲一遍，然后看效果~
创建场景
只有场景是无法运行的，必须加上摄像机和渲染器才行。
但本文的重点是讲解场景的用法，所以有关摄像机和渲染器的部分可以先不深入理解，这些之后的文章会讲到的，现在只需跟着敲代码就行。
```html
```
此时画面应该是一片黑色。因为画布上只有一个 “空的世界”，还没放物体、光源进去。
方法：添加对象 add
对象包括很多种类，比如物体、光源等等。
因为是刚起步，所以我会放一个最简单的立方体到场景中。
添加对象的方法是 scene.add(object) 。
```js import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, // 几何体 MeshBasicMaterial, // 网格材质 Mesh // 网格 } from '../js/Three/Three.js'
// 省略部分代码
// 立方体 let geometry = new BoxGeometry(1, 1, 1)
// 网格基础材质，设置颜色 let material = new MeshBasicMaterial({color: 0x00ff00})
// 把立方几何体与基础材质进行组合后创建一个新的网格对象 let cube = new Mesh(geometry, material)
// 把立方体网格添加到场景中 scene.add(cube)
// 设置摄像机z轴位置 camera.position.z = 5
// 将场景和摄像机添加到渲染器中并执行渲染 renderer.render(scene, camera) ```
我省略了 “创建场景” 的代码。
上面的代码创建了一个立方体，然后通过 scene.add 方法，把立方体添加到场景中。
方法：删除对象 remove
删除对象用的是 scene.remove 方法。
在 “添加对象” 代码的基础上，我用定时器设置 1 秒后删除立方体
js setTimeout(() => { scene.remove(cube) renderer.render(scene, camera) }, 1000)
使用 scene.remove ，里面传入要删除的对象。删除完需要重新渲染一下画布。
执行上面的代码，页面会渲染一个立方体，1秒后会把该立方体删掉。
方法：获取场景中 指定名称的对象 getObjectByName
如果你在创建元素时给元素添加一个 name ，之后就可以使用在场景对象中使用 scene.getObjectByName 方法根据 name 查找元素。
scene.getObjectByName 接收2个参数，第一个参数指定唯一的标识 name ；第二个参数为 true 时，在调用者的所有后代对象上查找。
```js // 几何体 let geometry = new BoxGeometry(1, 1, 1)
// 网格基础材质，设置颜色 let material = new MeshBasicMaterial({color: 0x00ff00})
// 把立方几何体与基础材质进行组合后创建一个新的网格对象 let cube = new Mesh(geometry, material)
// 给 cube 添加一个 name cube.name = 'hello'
// 通过 name 来查找指定对象 let hello = scene.getObjectByName('hello') console.log(hello) ```
方法：遍历场景中所有元素 traverse
```js // 省略部分代码
scene.traverse(item => { console.log(item) }) ```
traverse() 方法可以遍历当前画布上所有物体。
上面的代码中生成的画面，有2个物体，一个是立方体，一个是场景。
traverse() 方法接收一个参数，这个参数也是一个函数。该函数用于遍历每一个子对象。如果子对象本身还有子对象，该方法将会在所有的子对象上执行，知道遍历完场景树中的所有对象为止。
属性：返回一个场景中所有对象的列表 children
```js // 省略部分代码
console.log(scene.children) ```
scene.children 是一个属性，返回一个场景中所有对象的列表，包括摄像机和光源。
从语义可以看出，children 是返回一个子级的集合，所以是不包含 scene 自身的。
属性：雾化效果 fog
fog 可以给场景添加雾化效果，远处的物体会被淡淡隐藏。
雾化效果的特点是场景中的物体离得越远就会变得越模糊。
雾化效果是 Three.js 的一个方法，调用该方法后，将返回值赋给 scene.fog 即可。
THREE.Fog 接收3个参数，分别是：雾的颜色，最近距离，最远距离。
为了演示雾化效果，我需要添加更多的元素。同时添加场景光和聚光灯，这两个东西暂时无需理解，灯光的讲解会放在之后的文章。
```html
```
上面的代码比较多，需要耐性阅读一下注释。
上面的代码主要做了这几件事：
- 创建场景
- 添加地面
- 添加环境光和聚光灯，这样可以展示出更好的立体效果
- 将镜头对准地面
- 随机生成20个不同大小的立方体，并随机放在地面上
可以看到不管远近的立方体，看上去颜色都是一样的。
而 Three.js 的场景是提供了雾化效果，只需设置 scene.fog 即可。
```js // 省略部分代码
import { // 省略部分导入 Fog // 雾化 }
// 场景 const scene = new Scene()
scene.fog = new Fog(0xffffff, 10, 100) // 添加雾化效果 ```
只需设置 scene.fog 就能产生雾化效果。
公式：scene.fog(雾化颜色, 近值, 远值)
属性：材质覆盖 overrideMaterial
overrideMaterial 属性可以让场景里的所有物体都统一使用同一个材质，即使物体本身设置了自己的材质，也会被覆盖掉。
随机生成20个立方体，并随机设置颜色。
```html
```
而此时如果我们设置一下 scene.overrideMaterial
js // 省略部分代码 scene.overrideMaterial = new MeshLambertMaterial({ color: 0xffffff })
我把所有正方体都覆盖一层白色材质。最后出来的效果如上图所示。
场景自适应浏览器窗口尺寸
需要使用 window.addEventListener('resize') 监听浏览器窗口变化
```js // 省略部分three代码(从上面的例子可以随便挑一个在页面上生成点东西)
// 重置窗口尺寸 function onResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) }
// 监听浏览器窗口尺寸变化 window.addEventListener('resize',onResize, false) ```
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
