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

• Three.js 的场景

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

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

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

7.背景图、属性原型

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

8.自动更新、材质覆盖

if ( scene.autoupdate === true ) scene.updateMatrixWorld(); // 自动更新场景图 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                     远裁剪面

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                     远裁剪面 － 与上面一致

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

   >  相机设置：

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

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

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

      Camera包含以下几个属性：

          matrixWorldInverse － 世界坐标矩阵的逆

          projectionMatrix － 投影矩阵（成像）

          projectionMatrixInverse － 投影矩阵的逆矩阵

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