THREE.Scene
- THREE.Scene 对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。
- THREE.Scene 对象又是被称为场景图，它不仅仅是一个对象数组，还包含了整个场景图树形结构中的所有节点：
每个添加到 Three.js 场景的对象，甚至包括 THREE.Scene 本身都是继承自一个名为 THREE.Object3D 的对象。
每个 THREE.Object3D 对象也可以有自己的子对象，我们可以使用它的子对象来创建一个 Three.js 能解释和渲染的对象树。
| 组件 |
描述 |
| 相机 |
决定哪些东西在屏幕上渲染 |
| 光源 |
对材质如何显示，以及生成阴影时材质如何使用产生影响 |
| 物体 |
相机里主要的渲染对象，如方块、球体 |
THREE.Scene()就像是所有这些对象的容器。下面是对场景对象最重要的函数
| 函数/属性 |
描述 |
| add(Object) |
添加对象到场景中 |
| children |
返回场景中所有对象的列表，包括相机和光源 |
| getChildByName(name) |
利用name属性，返回场景中特定的对象 |
| remove(Object) |
把对象从场景中删除 |
| traverse(function) |
通过traverse这个函数，我们可以通过回调函数访问场景对象及其子对象 |
| fog |
通过这个属性，可以设置场景中的雾化效果，它可以渲染出一层雾气 |
| overrideMaterial |
通过这个属性，可以强制场景中的所有物体都使用相同的材质 |
| background |
通过这个属性，可以设置场景的背景，它总是第一个被渲染，可以是Color、纹理Texture覆盖、或者CubeTexture |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>场景</title>
<script type="text/javascript" src="../code/js91/three.js"></script>
<script type="text/javascript" src="../code/lib/Stats.js"></script>
<script type="text/javascript" src="../code/lib/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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。