360度全面了解场景的知识点【玩转Three.js】

举报
叶一一 发表于 2023/05/22 10:49:07 2023/05/22
【摘要】 本文主要分享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畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。