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 特点在于满足近大远小，模拟人眼成像特点，真实感比较强。

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

调用函数：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，正交投影是指平行投影成像，主要用在二维地图上或者镜面反射等应用上。

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

调用函数：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 矩阵一起构成了三维成像体系，这个会在后面讲到。

秒客网

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

相关文章