「寻宝Three.js」360度全面了解场景的知识点

827 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

前情提要

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

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

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

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

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

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

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

场景

定义

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

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

属性

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

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

属性名描述示例
background默认值为null。用于在渲染场景的时候设置背景,且背景总是首先被渲染的。可以设置一个用于的“clear”的Color实例、一个覆盖canvas的纹理实例, 或是立方体贴图作为立方体纹理或等矩形贴图作为纹理。scene.background = new THREE.Color(0x000000);
environment默认值为null。作用于纹理贴图,将该纹理贴图设为场景中所有物理材质的环境贴图。注:该属性不能够覆盖已存在的、已分配给 MeshStandardMaterial.envMap 的贴图。贴图我需要再研究一下,后面再补充这块知识点。
fog默认值为null。定义了影响场景中的每个物体的雾的类型,实现雾化效果。见下面2-1雾化效果
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);

2-1雾化效果

code.juejin.cn/pen/7149412…

方法

方法名描述使用备注
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);});应该可以用于循环处理场景中包含对象。

未完待续

360度全面了解了场景的知识点后,开始准备下一个知识点——相机。

我喜欢创作,每一幅作品都是我将想象用一只叫做“代码”的画笔,绘制而成。

当我寻找新的技术的时候,不是创意枯竭,而是我需要新的色彩。

参考文章

threejs-场景