Three.js - 场景对象 THREE.Scene 使用详解（属性、方法、及样例）
作者：hangge | 2017-10-05 08:10
一、基本介绍
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，使用该方法可以查找特定名字的对象。
|
| remove(object) | object 为场景中对象的引用，使用该方法可以将对象从场景中移除。 |
| traverse(function) | 该方法也可以遍历调用者和调用者的所有后代，function 参数是一个函数，被调用者和每一个后代对象调用 function 方法。 |
| fog | 使用该属性可以为场景添加雾化效果，可以产生隐藏远处物体的浓雾效果。 |
| overrideMaterial | 使用该属性可以强制场景中的所有物体使用相同的材质。 |
二、使用样例
1，效果图
（1）页面打开后默认显示效果如下。右上角的控制面版中的第一项显示当前场景中对象的个数（初始时为 1 个平面，2 个光源）
（2）每点击一次“addCube”按钮，会往场景中添加一个立方体（立方体颜色、位置、大小随机，且不断旋转）
（3）点击“removeCube”按钮可移除最后一个添加的立方体，同时通过“rotationSpeed”控制项可以调整立方体旋转的速度。
（4）点击“使用相同材质”按钮可以将场景中所有的物体使用相同的材质和颜色进行渲染。
（5）点击“雾化”按钮可以给场景添加雾化效果。
（6）点击“输出所有对象”按钮会将场景中所有对象信息输出到控制台中。
2，样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 用于显示统计图形 -->
<div id="Stats-output">
</div>
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>
<script type="text/javascript">
//网页加载完毕后会被调用
function init() {
////初始化统计对象
var stats = initStats();
//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
var scene = new THREE.Scene();
//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
//设置摄像机的位置，并让其指向场景的中心（0,0,0）
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//创建一个WebGL渲染器并设置其大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
//创建一个平面
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
//设置平面的旋转角度和位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//将平面添加场景中
scene.add(plane);
//添加环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
//添加聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
//将渲染的结果输出到指定页面元素中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
//dat.GUI对象使用的配置（存放有所有需要改变的属性的对象）
var controls = new function () {
//旋转速度
this.rotationSpeed = 0.02;
//场景对象个数
this.numberOfObjects = scene.children.length;
//增加一个立方体
this.addCube = function () {
var cubeSize = Math.ceil((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
//设置立方体的名字
cube.name = "cube-" + scene.children.length;
//立方体位置随机
cube.position.x = -30 + Math.round(
(Math.random() * planeGeometry.parameters.width));
cube.position.y = Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round(
(Math.random() * planeGeometry.parameters.height));
//将立方体添加到场景中
scene.add(cube);
this.numberOfObjects = scene.children.length;
};
//移除最后一个立方体
this.removeCube = function () {
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length - 1];
if (lastObject instanceof THREE.Mesh) {
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
};
//所有物体强制使用某个材质
this.overrideMaterial = function() {
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
}
//雾化
this.foggy = function() {
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
}
//输出所有对象
this.outputObjects = function () {
console.log(scene.children);
}
};
//创建dat.GUI，传递并设置属性
var gui = new dat.GUI();
gui.add(controls, 'numberOfObjects').name("当前对象个数").listen();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'overrideMaterial').name("使用相同材质");
gui.add(controls, 'foggy').name("雾化");
gui.add(controls, 'outputObjects').name("输出所有对象");
//渲染场景
render();
//渲染场景
function render() {
stats.update();
//旋转所有的立方体
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e != plane) {
e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
});
//通过requestAnimationFrame方法在特定时间间隔重新渲染场景
requestAnimationFrame(render);
//渲染场景
renderer.render(scene, camera);
}
//初始化统计对象
function initStats() {
var stats = new Stats();
//设置统计模式
stats.setMode(0); // 0: fps, 1: ms
//统计信息显示在左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
//将统计对象添加到对应的<div>元素中
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
//确保init方法在网页加载完毕后被调用
window.onload = init
</script>
</body>
</html>
三、样例说明
1，设置对象的名字（name）
（1）默认情况下新建对象的 name 属性是空的，上面代码我们使用 name 属性为方块指定了一个名字：cube-当前场景中对象的数量
（2）给对象命名在调试的时候很有用，同时命名后还可以直接通过名字来获取场景中的对象。
THREE.Scene.getObjectByName(name);
2，判断对象类型
每次调用 removeCube 方法时，程序自动移除场景中最后一个对象。移除前我们还要检查下该对象是不是 THREE.Mesh 对象，这样做是为了避免移除摄像机和光源。
if (lastObject instanceof THREE.Mesh) {
scene.remove(lastObject);
}
3，THREE.Scene.traverse() 方法
（1）我们可以将一个方法作为参数传递给 traverse() 方法，这个传递过来的方法会在每一个子对象上执行。由于 THREE.Scene 对象存储的是对象树，所以如果子对象本身还有子对象，traverse() 方法会在所有的子对象上执行，直到遍历完场景树中的所有对象为止。
（2）上面样例中我们就通过 traverse() 方法来更新所有方块的旋转状态。
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e != plane) {
e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
});
4，overrideMaterial 属性
（1）场景设置了 overrideMaterial 属性后，场景中所有的物体都会使用该属性指向的材质，即使物体本身也设置了材质。
（2）上面的样例中我们使用的材质是 THREE.MeshLambertMaterial，该材质可以创建出不发光但是可以对场景中的光源产生反应的物体。
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
5，给场景添加雾化效果
使用 fog 属性可以为整个场景添加雾化效果，即场景中的物体离得越远就会变得越模糊。具体样式有如下两种：
（1）使用 THREE.Fog：该方法雾的浓度是线性增长的，它有三个参数：
- 第 1 个参数：雾的颜色
- 第 2 个参数：near（近处）属性的值，决定雾化开始的地方。
- 第 3 参数：far（远处）属性的值，决定雾化结束的地方。
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
（2）使用 THREE.FogExp2：该方法雾的浓度不再是线性增长的，而是随着距离呈指数增长，它有两个参数：
- 第 1 个参数：雾的颜色
- 第 2 个参数：雾的浓度
scene.fog = new THREE.FogExp2( 0xffffff, 0.015 );
全部评论（0）