Three.js教程（3）：场景
场景（Scene）相当于是一个容器，可以在它上面添加光线，物体等，最后Three.js把它和相机一起渲染到DOM中。
Three.js中的坐标系
在开始本章的时候我们需要先了解一下Three.js中的坐标系。Three.js的坐标系如下：
由上，我们可知Three.js中的坐标系X轴是水平朝右的，Y轴是垂直朝上的，Z轴垂直与屏幕朝向我们，这与CSS中的坐标系的不同点在于，CSS的Y轴是垂直朝下的。下面给一个例子，可以供你更好的了解Three.js中的坐标系，请务必自己运行一下这个例子。
var camera, scene, renderer;
var geometry, material, mesh;
var stats = new Stats();
var gui = new dat.GUI();
var obj = {
x : 0,
y : 0,
z : 0,
rotateX : 0,
rotateY : 0,
rotateZ : 0
};
function init() {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 5;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshLambertMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.receiveShadow = true;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );
gui.add(obj, 'x', -3, 3);
gui.add(obj, 'y', -3, 3);
gui.add(obj, 'z', -3, 3);
gui.add(obj, 'rotateX', 0, 360);
gui.add(obj, 'rotateY', 0, 360);
gui.add(obj, 'rotateZ', 0, 360);
}
function animate() {
stats.update();
requestAnimationFrame( animate );
mesh.position.x = obj.x;
mesh.position.y = obj.y;
mesh.position.z = obj.z;
// 需要把角度修改为弧度
mesh.rotation.x = obj.rotateX / 180 * Math.PI;
mesh.rotation.y = obj.rotateY / 180 * Math.PI;
mesh.rotation.z = obj.rotateZ / 180 * Math.PI;
renderer.render( scene, camera );
}
init();
animate();效果图如下，你可以自己调一下参数：
场景的属性和方法
创建场景很简单：
var scene = new THREE.Scene();对于他的属性和方法也不是很多：
类型 | 名称 | 描述 | 默认值 |
|---|---|---|---|
属性 | fog | 场景中雾的效果 | null |
属性 | overrideMaterial | 覆盖材质，如果有这个那么场景中物体的材质会被覆盖 | null |
属性 | autoUpdate | 自动更新 | true |
属性 | background | 背景 | null |
方法 | toJSON() | 把场景转换为JSON对象，可以供Three.js导入场景使用 | - |
方法 | dispose() | 清楚缓存数据 | - |
THREE.Scene的属性并不多，你可能会问，之前把Mesh添加到Scene中使用到了一个add方法怎么没写？确实场景是有这个方法的，更准确的说这个方法是来自它的父类THREE.Object3D的，它是好多Three.js对象的直接或间接父类，所以了解它的属性和方法非常有必要，由于篇幅有限，这里就不再叙述了，你可以在这里看一看。
背景设置
根据上面的API设置背景的话就非常简单了：
scene.background = new THREE.Color('orange');效果如下：
注意这里必须是Color对象（而不是字符串的值，或者16进制的数字）。这里我们遇到了一个新的对象叫Color，该对象的参数表示什么颜色，主要有这么几种格式：
// 颜色的关键字
var color = new THREE.Color('orange');
// 默认背景，白色的 注意Three.js渲染的默认背景是黑色的
var color = new THREE.Color();
// 十六进制数字
var color = new THREE.Color( 0xff0000 );
// RGB字符串
var color = new THREE.Color("rgb(255, 0, 0)");
var color = new THREE.Color("rgb(100%, 0%, 0%)");
// HSL字符串
var color = new THREE.Color("hsl(0, 100%, 50%)");
// RGB的值 取值范围0~1 如红色：
var color = new THREE.Color( 1, 0, 0 );除了直接使用scene.background外还有另外一种设置背景颜色的方法是，就是设置清屏的颜色：
renderer.setClearColor(new THREE.Color(0xff0000));两者之前scene.background的优先级会更高一些，因为scane相当于是在清屏的背景之上再绘制了一层。
雾化效果
我们现在使用的是MeshNormalMaterial这个材质，要使用雾化效果和光线效果，那么需要MeshLambertMaterial或者MeshPhongMaterial这两种材质，具体的细节我们后面讨论。现在我们先把材质换成MeshLambertMaterial，然后做下面修改看看雾化效果：
scene.fog = new THREE.Fog(0xffffff, 0.1, 10);具体的效果需要手动修改z轴看来不同浓雾下物块的样子，效果如下：
这里需要注意一下我们的物块是黑色的即使修改材质MeshLambertMaterial的颜色也是黑色的，因为目前还没有添加光线。
上面我们使用了Fog对象，他的构造函数有3个参数，分别是颜色、雾的起始距离，雾的结束距离。Fog对象出来的雾是线性增长的，Three.js还提供了一种指数增长的雾是FogExp2，它有两个参数分别是颜色和浓度，可以如下设置：
scene.fog = new THREE.FogExp2(0xffffff, 0.01);设置统一的材质
设置场景中所有物体的材质，其实是很简单的，如：
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});由于我们目前还没有加入光线，所以现在看不了效果，这个例子先不做演示，只要记得有个方法可以设置就行了，到时候自己查一下基本上OK。
腾讯云开发者
