Three.js | 360度全面了解场景的知识点-CFANZ编程社区

前情提要

你要学Three.js，就不要只学几何体。

你要学旋转动画，学旋转缩放。

你要学材质对象，学共有、私有属性。

你要学点线面模型，学平移变换。

你要学光照原理，学阴影投影。

你要学层级模型，学树结构。

你要学弧线绘制，学贝塞尔曲线。

场景的作用就是，让你在什么地方、摆放什么东西，最终交给three.js来渲染。

场景是放置物体、灯光和摄像机的地方。

我看完文档，脑袋上缓缓打出了三个问号。然后我就想着挨个实验总能知道每个的效果。

但是第一个属性就把我给拦住了，试不出效果。我灵机一动，把源码找出来翻了翻，慢慢把知识点捋清楚了。（机智如我👍🏻）

属性名	描述	示例
background	默认值为null。用于在渲染场景的时候设置背景，且背景总是首先被渲染的。可以设置一个用于的“clear”的Color实例、一个覆盖canvas的纹理实例，或是立方体贴图作为立方体纹理或等矩形贴图作为纹理。	scene.background = new THREE.Color(0x000000);
environment	默认值为null。作用于纹理贴图，将该纹理贴图设为场景中所有物理材质的环境贴图。注：该属性不能够覆盖已存在的、已分配给 MeshStandardMaterial.envMap 的贴图。	贴图我需要再研究一下，后面再补充这块知识点。
fog	默认值为null。定义了影响场景中的每个物体的雾的类型，实现雾化效果。
isScene	只读属性，用于检查给定对象的类型是否为场景。	console.log(scene.isScene === true); // trueconsole.log(renderer.isScene === true); // false
overrideMaterial	默认值为null。作用是将强制场景中的每个物体使用这里的材质来渲染。	scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xfedc5e, emissiveIntensity: 10 });
children	该属性可以返回该场景中所有的摄像机和光源等对象列表。	console.log(scene.children);

<https://code.juejin.cn/pen/7149412585426255883>

方法名	描述	使用	备注
toJSON	该方法可以将scene对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。	console.log(scene.toJSON());	目前还不晓得它有啥用途。
add	该方法可以向场景中添加模型、灯光、线段等。	// 场景中添加网格模型scene.add(mesh);
remove	该方法接受一个对象作为参数,可以将该场景中添加的对象从children列表中移除。	let children = scene.children;scene.remove(children[0]);console.log(scene.children, 222);	应该是可以实现一些需要动态删除的场景。
getObjectByName	该方法可以获得特地名字的对象。接受name和rescursive两个参数。当rescursive为true时,在调用者所有后代子元素上查找。	console.log(scene.getObjectByName('torus'), 222);
traverse	该方法接受一个函数作为参数，遍历调用者和它的所有后代，都执行该函数。	scene.traverse(item => {console.log(item);});	应该可以用于循环处理场景中包含对象。