快捷導(dǎo)航

Three.js源碼閱讀筆記(Object3D類)

更新時間：2012年12月27日 16:41:53 作者：

Object3D似乎是Three.js框架中最重要的類，相當(dāng)一部分其他的類都是繼承自O(shè)bject3D類，比如場景類、幾何形體類、相機類、光照類等等：他們都是3D空間中的對象，所以稱為Object3D類,需要了解的朋友可以參考下

這是Three.js源碼閱讀筆記的第二篇，直接開始。
Core::Object3D
Object3D似乎是Three.js框架中最重要的類，相當(dāng)一部分其他的類都是繼承自O(shè)bject3D類，比如場景類、幾何形體類、相機類、光照類等等：他們都是3D空間中的對象，所以稱為Object3D類。Object3D構(gòu)造函數(shù)如下：

復(fù)制代碼代碼如下:

 
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(); 
}; 

在介紹函數(shù)之前，需要先介紹一下這個類的幾個重要屬性。
屬性parent和children說明，通常需要使用樹來管理眾多Object3D對象。比如一輛行駛的汽車是一個Object3D對象，控制汽車行駛路線的邏輯在該對象內(nèi)部實現(xiàn)，汽車的每個頂點經(jīng)過模型矩陣的處理后，都位于正確的位置；但是汽車擺動的雨刮器，其不但隨著汽車行駛方向運動，而且自身相對汽車也在左右擺動，這個擺動的邏輯無法在汽車這個對象內(nèi)部的實現(xiàn)。解決的方法是，將雨刮器設(shè)定為汽車的chidren，雨刮器內(nèi)部的邏輯只負(fù)責(zé)其相對于汽車的擺動。在這種樹狀結(jié)構(gòu)下，一個場景Scene實際上就是最頂端的Object3D，它的模型矩陣就是視圖矩陣（取決于相機）的逆矩陣。

屬性matrix和matrixWorld就很好理解了，matrix表示本地的模型矩陣，僅僅表示該對象的運動，而matrixWorld則需要依次向父親節(jié)點迭代，每一次迭代都左乘父親對象的本地模型矩陣，直到Scene對象——當(dāng)然，實際上是左乘父親對象的全局模型矩陣。

屬性position、rotation、scale表示模型矩陣的三種變換部分，在Matrix4類中有相關(guān)說明。rotation和eulerOrder共同描述了一個旋轉(zhuǎn)狀態(tài)，quaternion也可以描述一個旋轉(zhuǎn)狀態(tài)，具體使用哪種方法要看useQuation的布爾值。

可以看到，關(guān)于該Object3D對象最重要的“變換狀態(tài)”信息實際上是存儲在兩個“備份”中的，一個是matrix對象，還有一個是position等屬性，兩部分應(yīng)當(dāng)保持一致，如果通過某種方法改變了一個備份，則另一個備份也應(yīng)該在適當(dāng)?shù)臅r候更新。還有一些其他屬性從字面和類型上就能看出其含義，不再單獨列出了。下面說函數(shù)：
函數(shù)applyMatrix(matrix)將參數(shù)matrix左乘到this.matrix上，實際上就是對該Object3D對象實行某個變換（該變換可能要經(jīng)過好幾步基本變換，但是已經(jīng)存儲在參數(shù)matrix里面了）。注意，在對this.matrix執(zhí)行完左乘之后，；立刻更新了position等參數(shù)的值。比起下面幾個變換函數(shù)，該函數(shù)更“高級”，允許開發(fā)者自由指定變換矩陣，而不是說“朝著x軸前進(jìn)5單位距離”。

復(fù)制代碼代碼如下:

 
applyMatrix: function ( matrix ) { 
this.matrix.multiply( matrix, this.matrix ); 
this.scale.getScaleFromMatrix( this.matrix ); 
var mat = new THREE.Matrix4().extractRotation( this.matrix ); 
this.rotation.setEulerFromRotationMatrix( mat, this.eulerOrder ); 
this.position.getPositionFromMatrix( this.matrix ); 
}, 

函數(shù)translate(distance, axis)令該對象向axis軸指定的方向前進(jìn)distance距離。函數(shù)translateX(distance)，translateY(distance)，translateZ(distance)令其向X，Y，Z軸前進(jìn)distance距離。注意這些函數(shù)僅僅改變了position對象的值，而不曾改變matrix的值。

復(fù)制代碼代碼如下:

 
translate: function ( distance, axis ) { 
this.matrix.rotateAxis( axis ); 
this.position.addSelf( axis.multiplyScalar( distance ) ); 
}, 
translateX: function ( distance ) { 
this.translate( distance, this._vector.set( 1, 0, 0 ) ); 
}, 

函數(shù)localToWorld(vector)將本地坐標(biāo)轉(zhuǎn)化為世界坐標(biāo)中，函數(shù)worldToLocal則正好相反。注意這里的vector本地坐標(biāo)指的是未變換之前的坐標(biāo)，也就是說雨刮器的默認(rèn)位置的頂點坐標(biāo)。

函數(shù)lookAt(eye,center,up)執(zhí)行其matrix屬性對象的lookAt函數(shù)（之前介紹過，matrix4對象也有一個lookAt函數(shù)），一般用于相機對象。該函數(shù)僅僅改變了旋轉(zhuǎn)狀態(tài)，所以當(dāng)matrix屬性對象執(zhí)行完之后，如果屬性rotationAutoUpdate為真，則會更新rotation或quaternion的值，更新哪一個取決于屬性useQuation。
函數(shù)add(object)和函數(shù)remove(object)從當(dāng)前Object3D對象中添加一個子對象，或刪除一個子對象，了解到場景中的眾多Object3D對象是用樹來管理的，這就很容易理解了。

函數(shù)traverse(callback)遍歷調(diào)用者和調(diào)用者的所有后代，callback參數(shù)是一個函數(shù)，被調(diào)用者和每一個后代對象調(diào)用callback(this)。

復(fù)制代碼代碼如下:

 
traverse: function ( callback ) { 
callback( this ); 
for ( var i = 0, l = this.children.length; i < l; i ++ ) { 
this.children[ i ].traverse( callback ); 
} 
}, 

函數(shù)getChildByName(name,recursive)通過字符串在調(diào)用者的子元素（recursive為false）或后代元素（recursive為true）中查詢屬性name符合的對象返回。

函數(shù)getDescendants(array)將調(diào)用者的所有后代對象全部push到數(shù)組array中。
函數(shù)updateMatrix()和updateMatrixWorld(force)將根據(jù)position，rotation或quaternion，scale參數(shù)更新matrix和matrixWorld。updateMatrixWorld還會更新所有后代元素的matrixWorld，如果force值為真或者調(diào)用者本身的matrixWorldNeedsUpdate值為真。在函數(shù)applyMatrix(matrix)中，改變了matrix值后立刻就更新了position，rotation等屬性，但在函數(shù)translate(distance,axis)中改變了position等變量（或者直接改變position等屬性）后并沒有立刻更新matrix值，這時應(yīng)該手動調(diào)用updateMatrix()。這些細(xì)節(jié)值得注意，你也許會認(rèn)為應(yīng)該加入事件監(jiān)聽，一旦一個值發(fā)生變化，其他所有的都會立刻更新，但我想在，可能是出于這方面的考慮：適當(dāng)?shù)臅r候更新會帶來更高的效率——比如可能會頻繁地改變rotation值，但是僅僅在使用matrix屬性之前，才對其進(jìn)行更新。

復(fù)制代碼代碼如下:

 
updateMatrix: function () { 
this.matrix.setPosition( this.position ); 
if ( this.useQuaternion === false ) { 
this.matrix.setRotationFromEuler( this.rotation, this.eulerOrder ); 
} else { 
this.matrix.setRotationFromQuaternion( this.quaternion ); 
} 
if ( this.scale.x !== 1 || this.scale.y !== 1 || this.scale.z !== 1 ) { 
this.matrix.scale( this.scale ); 
this.boundRadiusScale = Math.max( this.scale.x, Math.max( this.scale.y, this.scale.z ) ); 
} 
this.matrixWorldNeedsUpdate = true; 
}, 
updateMatrixWorld: function ( force ) { 
if ( this.matrixAutoUpdate === true ) this.updateMatrix(); 
if ( this.matrixWorldNeedsUpdate === true || force === true ) { 
if ( this.parent === undefined ) { 
this.matrixWorld.copy( this.matrix ); 
} else { 
this.matrixWorld.multiply( this.parent.matrixWorld, this.matrix ); 
} 
this.matrixWorldNeedsUpdate = false; 
force = true; 
} 
for ( var i = 0, l = this.children.length; i < l; i ++ ) { 
this.children[ i ].updateMatrixWorld( force ); 
} 
}, 

函數(shù)deallocate手動將調(diào)用者占用的空間釋放掉，當(dāng)不再需要該對象時這樣做。
Core::Projectors
管理投影矩陣的類，代碼太復(fù)雜了，我猜會涉及到render類里的操作，等到適當(dāng)?shù)臅r候再看吧。
Core::UV
該構(gòu)造函數(shù)產(chǎn)生一個材質(zhì)坐標(biāo)類——就是材質(zhì)上的坐標(biāo)，往往與頂點對應(yīng)起來，光柵化后每個像素都有一個材質(zhì)坐標(biāo)，再從材質(zhì)上“取色”以實現(xiàn)紋理。

復(fù)制代碼代碼如下:

 
THREE.UV = function ( u, v ) { 
this.u = u || 0; 
this.v = v || 0; 
}; 

材質(zhì)坐標(biāo)類就是一個簡化的vector2類，除了屬性名稱不同而已。
Core::Ray Core::Rectangle Core:Spline
射線類，有原點、方向、遠(yuǎn)近截斷點。在點光源中應(yīng)該有應(yīng)用。矩形類、曲線類，相對都比較簡單，也不那么“核心”，以后再看吧。
Core::Geometry
Geometry類也是非常重要的一類，表示一個由頂點和表面構(gòu)成的幾何形體。

復(fù)制代碼代碼如下:

 
THREE.Geometry = function () { 
THREE.GeometryLibrary.push( this ); 
this.id = THREE.GeometryIdCount ++; 
this.name = ''; 
this.vertices = []; 
this.colors = []; 
this.normals = []; 
this.faces = []; 
this.faceUvs = [[]]; 
this.faceVertexUvs = [[]]; 
this.morphTargets = []; 
this.morphColors = []; 
this.morphNormals = []; 
this.skinWeights = []; 
this.skinIndices = []; 
this.lineDistances = []; 
this.boundingBox = null; 
this.boundingSphere = null; 
this.hasTangents = false; 
this.dynamic = true; 
this.verticesNeedUpdate = false; 
this.elementsNeedUpdate = false; 
this.uvsNeedUpdate = false; 
this.normalsNeedUpdate = false; 
this.tangentsNeedUpdate = false; 
this.colorsNeedUpdate = false; 
this.lineDistancesNeedUpdate = false; 
this.buffersNeedUpdate = false; 
}; 

以下兩組屬性最重要：
屬性vertics是一個數(shù)組，每個元素是vector3類型的對象，表示一個頂點坐標(biāo)。屬性colors和normals表示和頂點對應(yīng)的顏色值和發(fā)現(xiàn)向量，只有在很少的情況下才使用，大部分情況下，頂點的顏色和發(fā)現(xiàn)時在“表面”中定義的——如果立方體的6面顏色各不相同，則每個頂點實在不同的面上是不同的顏色。

屬性faces是一個數(shù)組，每個元素是face4或face3類型的對象，之前介紹face3的時候說到，face中存儲的僅僅是頂點的索引值，通過索引值就可以在數(shù)組vertices中取到頂點的坐標(biāo)值。

下面說函數(shù)：
applyMatrix(matrix)函數(shù)更新geometry中的所有頂點坐標(biāo)和表面的法線向量，所做的實際上是用變換矩陣matrix對geometry形體進(jìn)行空間變換。normalMatrix是參數(shù)matrix左上角3×3矩陣的逆轉(zhuǎn)置矩陣，該矩陣用來旋轉(zhuǎn)矢量（法線，而不是頂點坐標(biāo)）。

復(fù)制代碼代碼如下:

 
applyMatrix: function ( matrix ) { 
var normalMatrix = new THREE.Matrix3(); 
normalMatrix.getInverse( matrix ).transpose(); 
for ( var i = 0, il = this.vertices.length; i < il; i ++ ) { 
var vertex = this.vertices[ i ]; 
matrix.multiplyVector3( vertex ); 
} 
for ( var i = 0, il = this.faces.length; i < il; i ++ ) { 
var face = this.faces[ i ]; 
normalMatrix.multiplyVector3( face.normal ).normalize(); 
for ( var j = 0, jl = face.vertexNormals.length; j < jl; j ++ ) { 
normalMatrix.multiplyVector3( face.vertexNormals[ j ] ).normalize(); 
} 
matrix.multiplyVector3( face.centroid ); 
} 
}, 

函數(shù)ComputeCentroid()計算幾何形體中每個表面的重心（不是幾何形體自己的重心）。這個函數(shù)似乎應(yīng)當(dāng)放到face類的原型上會更好，但是由于face類內(nèi)部無法獲取點的坐標(biāo)（除非再將點坐標(biāo)數(shù)組的引用作為參數(shù)傳入構(gòu)造函數(shù)，這樣代價就大了）而僅僅是索引值，所以只好在geometry類的原型上定義了。下面幾個函數(shù)都是類似的情況（事實上，face類幾乎沒有什么成員函數(shù)）。

函數(shù)computeFaceNormals()和computeVertexNormals(areaWeight)計算法線向量，前者影響的是face數(shù)組中每個元素的normal屬性，一個face只有1個；后者face數(shù)組中每個元素的vertexNormal屬性，一個face3型對象有3個，一個face4型對象有4個，但是需要注意的是，被多個表面共享的頂點，其法線向量只有一個，同時受到多個表面的影響。比如中心在原點，三組表面都垂直于軸的立方體，其第一象限中的頂點，法線向量是(1,1,1)的歸一化。雖然看上去不可思議，平面的頂點的法線居然不是垂直于平面的，但這種指定法線的方法在利用平面模擬曲面的時候有很好的效果。

函數(shù)createMorphNormal為每一個morph創(chuàng)建法線。morph應(yīng)該是用作顯示固定連續(xù)動畫的變形效果。
函數(shù)mergeVertics將坐標(biāo)值相同的點剔除，同時更新face對象中的點索引值。
Core::Quaternian
四維數(shù)旋轉(zhuǎn)類用另一種方式表達(dá)一個旋轉(zhuǎn)變換，相比用rotation，可以避免萬向節(jié)死鎖問題。

復(fù)制代碼代碼如下:

 
THREE.Quaternion = function( x, y, z, w ) { 
this.x = x || 0; 
this.y = y || 0; 
this.z = z || 0; 
this.w = ( w !== undefined ) ? w : 1; 
}; 

如果不談函數(shù)，Quaternian就是一個簡單的vector4類型對象。
函數(shù)setFromEuler(v,order)通過一次歐拉旋轉(zhuǎn)設(shè)置四維數(shù)旋轉(zhuǎn)。
函數(shù)setFromAxis(axis,angle)通過繞任意軸旋轉(zhuǎn)設(shè)定四維數(shù)旋轉(zhuǎn)。
函數(shù)setFromRotationMatrix(matrix)通過旋轉(zhuǎn)矩陣設(shè)置四維數(shù)旋轉(zhuǎn)。
還有一些和vector4類相同的函數(shù)這里就不列了。

您可能感興趣的文章: