mesh threejs 属性_Three.js - 场景对象 THREE.Scene 使用详解（属性、方法、及样例）...

一、基本介绍

1，THREE.Scene 的作用

(1)THREE.Scene对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。

(2)THREE.Scene 对象又是被称为场景图，它不仅仅是一个对象数组，还包含了整个场景图树形结构中的所有节点：

每个添加到 Three.js 场景的对象，甚至包括 THREE.Scene 本身都是继承自一个名为THREE.Object3D 的对象。

每个 THREE.Object3D 对象也可以有自己的子对象，我们可以使用它的子对象来创建一个 Three.js 能解释和渲染的对象树。

2，THREE.Scene 常用的方法和属性

方法(属性)

描述

add(object)

用于向场景中添加对象。使用该方法还可以创建对象组。

children

用于返回一个场景中所有对象的列表，包括摄像机和光源。

getObjectByName(name,recursive)

在创建对象时可以指定唯一的标识 name，使用该方法可以查找特定名字的对象。

当参数 recursive设置为 false时，在调用者子元素上查找

当参数 recursive设置为 true时，在调用者的所有后代对象上查找

remove(object)

object为场景中对象的引用，使用该方法可以将对象从场景中移除。

traverse(function)

该方法也可以遍历调用者和调用者的所有后代，function参数是一个函数，被调用者和每一个后代对象调用 function方法。

fog

使用该属性可以为场景添加雾化效果，可以产生隐藏远处物体的浓雾效果。

overrideMaterial

使用该属性可以强制场景中的所有物体使用相同的材质。

二、使用样例

1，效果图

(1)页面打开后默认显示效果如下。右上角的控制面版中的第一项显示当前场景中对象的个数(初始时为 1 个平面，2 个光源)

(2)每点击一次“addCube”按钮，会往场景中添加一个立方体(立方体颜色、位置、大小随机，且不断旋转)

(3)点击“removeCube”按钮可移除最后一个添加的立方体，同时通过“rotationSpeed”控制项可以调整立方体旋转的速度。

(4)点击“使用相同材质”按钮可以将场景中所有的物体使用相同的材质和颜色进行渲染。

(5)点击“雾化”按钮可以给场景添加雾化效果。

(6)点击“输出所有对象”按钮会将场景中所有对象信息输出到控制台中。

2，样例代码

hangge.com

body {

margin: 0;

overflow: hidden;

}

//网