360度全面了解场景的知识点【玩转Three.js】
前情提要
你要学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); // true console.log(renderer.isScene === true); // false |
overrideMaterial |
默认值为null。 作用是将强制场景中的每个物体使用这里的材质来渲染。 |
scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xfedc5e, emissiveIntensity: 10 }); |
children |
该属性可以返回该场景中所有的摄像机和光源等对象列表。 |
console.log(scene.children); |
方法
方法名 |
描述 |
使用 |
备注 |
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度全面了解了场景的知识点后,开始准备下一个知识点——相机。
我喜欢创作,每一幅作品都是我将想象用一只叫做“代码”的画笔,绘制而成。
当我寻找新的技术的时候,不是创意枯竭,而是我需要新的色彩。
作者:非职业「传道授业解惑」的开发者叶一一简介:「趣学前端」、「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论(0)