Threes.js入门篇之3 - 场景与相机

Three.js 的场景

       THREE.Scene 执行场景树管理，场景的创建只需要一句话：

[html]  view plain  copy

1. var scene = new THREE.Scene();  

       场景常用操作包含：

1.scene.add(obj);                    // 在场景中添加物体

2.scene.remove(obj);              // 在场景中移除物体

3.scene.children();                  // 获取场景中所有子对象的列表

4.scene.getChildByName();    // 通过Name获取场景中某个对象

5.Scene.traverse(function);    // 遍历场景对象执行回调函数

       扩展操作包括：

6.scene.fog   // 对应两种类型fog

[html]  view plain  copy

1. a）scene.fog = new THREE.Fog(0xFFFFFF,0.01,100)    // Params: 雾的颜色，近端系数，远端系统  
2. b）scene.fog = new THREE.FogExp2(0xFFFFFF,0.015)   // Params: 雾的颜色，浓度  

7.背景图、属性原型

[html]  view plain  copy

1. if ( scene.background.isColor )                         // 判断是否为颜色  
2.    …// clear color  
3. scene.prototype = Object.create( Object3D.prototype );  // 属性原型  

8.自动更新、材质覆盖

[html]  view plain  copy

1. if ( scene.autoupdate === true )  
2.      scene.updateMatrixWorld(); // 自动更新场景图  
3. scene.overrideMaterial= new THREE.MeshLambertMaterial( {color:0xFFFFFF} );  

• Three.js 的相机

       Three.js 提供了两种相机模式，透视投影 和 正交投影，这和其他的三维引擎并没有区别。

    > 透视投影：

         Perspective Camera 特点在于满足近大远小，模拟人眼成像特点，真实感比较强。

        

        调用函数：PerspectiveCamera( fov, aspect, near, far )

@fov        > Camera frustum vertical field of view   垂直方向张角

@aspect  > Camera frustum aspect ratio                宽高比

@near     > Camera frustum near plane                  近裁剪面

@far        > Camera frustum far plane                     远裁剪面

[html]  view plain  copy

1. var camera = new THREE.PerspectiveCamera(50, 16/9, 0.1, 1000);  

    > 正交投影：

        Orthographic Camera，正交投影 是指平行投影成像，主要用在二维地图上或者镜面反射等应用上。

        

        调用函数：OrthographicCamera( left, right, top, bottom, near, far )

@left       >  Camera frustum left plane                    左平面

@right     >  Camera frustum right plane                  右平面

@top       >  Camera frustum top plane                    上平面

@bottom >  Camera frustum bottom plane              下平面

@near     >  Camera frustum near plane                  近裁剪面 － 与上面一致

@far        >  Camera frustum far plane                     远裁剪面 － 与上面一致

[html]  view plain  copy

1. var camera = new THREE.OrthographicCamera(-8, 8, 4.5, -4.5, 0.1, 1000)  

   >  相机设置：

       相机初始化完成后，需要对相机进行设置，上面构造函数 已经定义了摄像机的内参数，接下来需要明确的是摄像机的姿态和方向。

       默认的相机是在原点位置，朝向为Z轴负方向（屏幕内侧），上方向为Y轴。       

[html]  view plain  copy

1. camera.position.set(5, 0, 10);             // Position  
2. camera.up.set(0, 1, 0); // up方向 - Y轴  
3. camera.lookAt(new THREE.Vector3(0, 0, 0)); // Target  
4. scene.add(camera)  

      Camera包含以下几个属性：

          matrixWorldInverse － 世界坐标矩阵的逆

          projectionMatrix － 投影矩阵（成像）

          projectionMatrixInverse － 投影矩阵的逆矩阵

    实际上，World - View - Projection 矩阵一起构成了三维成像体系，这个会在后面讲到。