Three.js源碼閱讀筆記(Object3D類)
2024-05-06 14:20:15
供稿：網友
這是Three.js源碼閱讀筆記的第二篇，直接開始。
Core::Object3D
Object3D似乎是Three.js框架中最重要的類，相當一部分其他的類都是繼承自Object3D類，比如場景類、幾何形體類、相機類、光照類等等：他們都是3D空間中的對象，所以稱為Object3D類。Object3D構造函數如下：
代碼如下:
THREE.Object3D = function () {
THREE.Object3DLibrary.push( this );
this.id = THREE.Object3DIdCount ++;
this.name = '';
this.properties = {};
this.parent = undefined;
this.children = [];
this.up = new THREE.Vector3( 0, 1, 0 );
this.position = new THREE.Vector3();
this.rotation = new THREE.Vector3();
this.eulerOrder = THREE.Object3D.defaultEulerOrder;
this.scale = new THREE.Vector3( 1, 1, 1 );
this.renderDepth = null;
this.rotationAutoUpdate = true;
this.matrix = new THREE.Matrix4();
this.matrixWorld = new THREE.Matrix4();
this.matrixRotationWorld = new THREE.Matrix4();
this.matrixAutoUpdate = true;
this.matrixWorldNeedsUpdate = true;
this.quaternion = new THREE.Quaternion();
this.useQuaternion = false;
this.boundRadius = 0.0;
this.boundRadiusScale = 1.0;
this.visible = true;
this.castShadow = false;
this.receiveShadow = false;
this.frustumCulled = true;
this._vector = new THREE.Vector3();
};
在介紹函數之前，需要先介紹一下這個類的幾個重要屬性。
屬性parent和children說明，通常需要使用樹來管理眾多Object3D對象。比如一輛行駛的汽車是一個Object3D對象，控制汽車行駛路線的邏輯在該對象內部實現，汽車的每個頂點經過模型矩陣的處理后，都位于正確的位置；但是汽車擺動的雨刮器，其不但隨著汽車行駛方向運動，而且自身相對汽車也在左右擺動，這個擺動的邏輯無法在汽車這個對象內部的實現。解決的方法是，將雨刮器設定為汽車的chidren，雨刮器內部的邏輯只負責其相對于汽車的擺動。在這種樹狀結構下，一個場景Scene實際上就是最頂端的Object3D，它的模型矩陣就是視圖矩陣（取決于相機）的逆矩陣。
屬性matrix和matrixWorld就很好理解了，matrix表示本地的模型矩陣，僅僅表示該對象的運動，而matrixWorld則需要依次向父親節點迭代，每一次迭代都左乘父親對象的本地模型矩陣，直到Scene對象——當然，實際上是左乘父親對象的全局模型矩陣。
屬性position、rotation、scale表示模型矩陣的三種變換部分，在Matrix4類中有相關說明。rotation和eulerOrder共同描述了一個旋轉狀態，quaternion也可以描述一個旋轉狀態，具體使用哪種方法要看useQuation的布爾值。
可以看到，關于該Object3D對象最重要的“變換狀態”信息實際上是存儲在兩個“備份”中的，一個是matrix對象，還有一個是position等屬性，兩部分應當保持一致，如果通過某種方法改變了一個備份，則另一個備份也應該在適當的時候更新。還有一些其他屬性從字面和類型上就能看出其含義，不再單獨列出了。下面說函數：
