Threes.js入門篇之3 - 場景與相機

allenjiao發表於2018-03-14
JS

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 矩陣一起構成了三維成像體系，這個會在後面講到。

相關文章