three.js 源碼注釋（十八）Math/Triangle.js

標籤：javascript   three.js   web3d   webgl   源碼   

商域無疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：商域無疆 -  本部落格專註於 敏捷開發及移動和物聯裝置研究：資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

俺也是剛開始學,好多地兒肯定不對還請見諒.

以下代碼是THREE.JS 源碼檔案中Math/Triangle.js檔案的注釋.

更多更新在 : https://github.com/omni360/three.js.sourcecode

/** * @author bhouston / http://exocortex.com * @author mrdoob / http://mrdoob.com/ *//*///Triangle對象的建構函式.用來在三維空間內通過參數a,b,c建立一個二維三角形對象.Triangle對象的功能函數採用///定義構造的函數原型對象來實現.//////用法: var a = new Vector3(0,0,0),b = new Vector3(1,1,1),c = new Vector3(2,2,2); var triangle = new Triangle(a,b,c);///建立一個a,b,c三點組成的三角形對象.*////<summary>Triangle</summary>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>THREE.Triangle = function ( a, b, c ) {this.a = ( a !== undefined ) ? a : new THREE.Vector3();this.b = ( b !== undefined ) ? b : new THREE.Vector3();this.c = ( c !== undefined ) ? c : new THREE.Vector3();};/*///normal方法通過計算返回三角形的法線向量.*////<summary>normal</summary>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<param name ="optionalTarget" type="Vector3">選擇性參數,接收返回結果</param>///<returns type="Vector3">返回三角形的法線向量</returns>THREE.Triangle.normal = function () {var v0 = new THREE.Vector3();return function ( a, b, c, optionalTarget ) {var result = optionalTarget || new THREE.Vector3();result.subVectors( c, b );v0.subVectors( a, b );result.cross( v0 );//返回為同時垂直於兩個參數向量的向量，方向可朝上也可朝下，由兩向量夾角的方向決定。var resultLengthSq = result.lengthSq();//Vecotr3.lengthSq()返回這個三維向量的長度的平方if ( resultLengthSq > 0 ) {//如果大於0,三角形有效.return result.multiplyScalar( 1 / Math.sqrt( resultLengthSq ) );//返回三角形的法線向量}return result.set( 0, 0, 0 );//返回原點};}();/*///barycoordFromPoint方法通過計算返回參數a,b,c所組成的三角形所在的平面上任意點(參數point)所表示三角形頂點的加權平均值,這個權值就是重心座標.///NOTE:重心座標的定義/// 三角形所在平面的任意點都能表示為頂點的加權平均值，這個權就叫做重心座標。從重心座標到標準座標的轉換為（無論2D或3D，連4D、5D也是這樣）：/// (b1,b2,b3) b1v1+b2v2+b3v3/// 式中：b1,b2,b3——重心座標的分量/// v1,v2,v3——三角形的頂點座標/// 注意b1+b2+b3=1，所以實際上只有兩個自由度，空間仍是2D的。/// 實際上，重心座標能表示三角形所在平面所有的點，但三角形外的點座標至少有一個為負。/// 對三角形內的點，計算重心座標的方法：（圖上不太清楚，紅綠藍分別為T1,T2,T3,大三角面積為T）/// b1=T1/T，b2=T2/T，b3=T3/T。/// 對三角形[1] 外的點這仍適用，不過點落在一條邊外時，此邊上三角形面積取負數。/// NOTE:重心座標uv相加必須為1,重心座標能表示三角形所在平面所有的點，但三角形外的點座標至少有一個為負。/// NOTE:更多理論參考:http://zh.wikipedia.org/wiki/%E9%87%8D%E5%BF%83%E5%9D%90%E6%A0%87//////*////<summary>barycoordFromPoint</summary>///<param name ="point" type="Vector3">Vector3對象,任意點</param>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<param name ="optionalTarget" type="Vector3">選擇性參數,接收返回結果</param>///<returns type="Vector3">返回三角形所在的平面上任意點(參數point)所表示三角形頂點的加權平均值</returns>// static/instance method to calculate barycoordinates// 靜態方法用來計算三角形重心座標// 下面有個非常形象的例子: http://www.blackpawn.com/texts/pointinpoly/default.html// based on: http://www.blackpawn.com/texts/pointinpoly/default.htmlTHREE.Triangle.barycoordFromPoint = function () {var v0 = new THREE.Vector3();var v1 = new THREE.Vector3();var v2 = new THREE.Vector3();return function ( point, a, b, c, optionalTarget ) {v0.subVectors( c, a );v1.subVectors( b, a );v2.subVectors( point, a );var dot00 = v0.dot( v0 );var dot01 = v0.dot( v1 );var dot02 = v0.dot( v2 );var dot11 = v1.dot( v1 );var dot12 = v1.dot( v2 );var denom = ( dot00 * dot11 - dot01 * dot01 );var result = optionalTarget || new THREE.Vector3();// colinear or singular triangle// 共線三角形或者無效三角形if ( denom == 0 ) {// arbitrary location outside of triangle?// 三角形外的任意一點// not sure if this is the best idea, maybe should be returning undefined// 不確定這是最好的做法,也許應該返回undefinedreturn result.set( - 2, - 1, - 1 );//三角形所在的平面上任意點(參數point)所表示三角形頂點的加權平均值}var invDenom = 1 / denom;var u = ( dot11 * dot02 - dot01 * dot12 ) * invDenom;var v = ( dot00 * dot12 - dot01 * dot02 ) * invDenom;// barycoordinates must always sum to 1// 重心座標uv相加必須為1.return result.set( 1 - u - v, v, u );//三角形所在的平面上任意點(參數point)所表示三角形頂點的加權平均值};}();/*///containsPoint方法判斷任意點(參數point)是否在a,b,c所組成的三角形內.*////<summary>containsPoint</summary>///<param name ="point" type="Vector3">Vector3對象,任意點</param>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<returns type="Vector3">返回true或者false</returns>THREE.Triangle.containsPoint = function () {var v1 = new THREE.Vector3();return function ( point, a, b, c ) {var result = THREE.Triangle.barycoordFromPoint( point, a, b, c, v1 );//barycoordFromPoint()方法返回三角形所在的平面上任意點(參數point)所表示三角形頂點的加權平均值,這個權值就是重心座標.return ( result.x >= 0 ) && ( result.y >= 0 ) && ( ( result.x + result.y ) <= 1 );//返回true或者false};}();/********************************************下面是Triangle對象提供的功能函數.****************************************/THREE.Triangle.prototype = {constructor: THREE.Triangle,//構造器,返回對建立此對象的Triangle函數的引用/*///set方法用來重新設定三角形的頂點座標(a,b,c),返回新的三角形.*////<summary>set</summary>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<returns type="Triangle">返回新的三角形</returns>set: function ( a, b, c ) {this.a.copy( a );this.b.copy( b );this.c.copy( c );return this;//返回新的三角形},/*///set方法用來座標點數組,以及索引值,重新設定三角形的頂點座標(a,b,c),返回新的三角形.*////<summary>set</summary>///<param name ="points" type="Vector3Array">座標點數組</param>///<param name ="i0" type="int">三角形角點a在數組中的索引</param>///<param name ="i1" type="int">三角形角點b在數組中的索引</param>///<param name ="i2" type="int">三角形角點c在數組中的索引</param>///<returns type="Triangle">返回新的三角形</returns>setFromPointsAndIndices: function ( points, i0, i1, i2 ) {this.a.copy( points[ i0 ] );this.b.copy( points[ i1 ] );this.c.copy( points[ i2 ] );return this;//返回新的三角形},/*///copy方法用來複製三角形的頂點a,b,c座標值.返回新的二維平面///TODO: copy方法和clone方法有什麼不同?*////<summary>copy</summary>///<param name ="triangle" type="Triangle">三角形</param>///<returns type="Triangle">返回新的三角形</returns>copy: function ( triangle ) {this.a.copy( triangle.a );this.b.copy( triangle.b );this.c.copy( triangle.c );return this;//返回新的三角形},/*///area方法用來返回當前三角形的面積*////<summary>area</summary>///<returns type="Triangle">返回當前三角形的面積</returns>area: function () {var v0 = new THREE.Vector3();var v1 = new THREE.Vector3();return function () {v0.subVectors( this.c, this.b );v1.subVectors( this.a, this.b );return v0.cross( v1 ).length() * 0.5;//返回當前三角形的面積};}(),/*///midpoint方法用來返回當前三角形的中點*////<summary>midpoint</summary>///<param name ="optionalTarget" type="Vector3">選擇性參數,接收返回結果</param>///<returns type="Triangle">返回當前三角形的中點</returns>midpoint: function ( optionalTarget ) {var result = optionalTarget || new THREE.Vector3();return result.addVectors( this.a, this.b ).add( this.c ).multiplyScalar( 1 / 3 );//返回當前三角形的中點},/*///normal方法通過計算返回當前三角形的法線向量*////<summary>midpoint</summary>///<param name ="optionalTarget" type="Vector3">選擇性參數,接收返回結果</param>///<returns type="Triangle">返回當前三角形的法線向量</returns>normal: function ( optionalTarget ) {return THREE.Triangle.normal( this.a, this.b, this.c, optionalTarget );//調用THREE.Triangle.normal()方法,返回當前三角形的法線向量},/*///plane方法建立與當前三角形共面的平面Plane對象.*////<summary>plane</summary>///<param name ="optionalTarget" type="Plane">選擇性參數,接收返回結果</param>///<returns type="Triangle">返回與當前三角形共面的平面Plane對象.</returns>plane: function ( optionalTarget ) {var result = optionalTarget || new THREE.Plane();return result.setFromCoplanarPoints( this.a, this.b, this.c );//返回與當前三角形共面的平面Plane對象},/*///barycoordFromPoint方法通過計算返回當前三角形所在的平面上任意點(參數point)所表示當前三角形頂點的加權平均值,這個權值就是重心座標.///NOTE:重心座標的定義/// 三角形所在平面的任意點都能表示為頂點的加權平均值，這個權就叫做重心座標。從重心座標到標準座標的轉換為（無論2D或3D，連4D、5D也是這樣）：/// (b1,b2,b3) b1v1+b2v2+b3v3/// 式中：b1,b2,b3——重心座標的分量/// v1,v2,v3——三角形的頂點座標/// 注意b1+b2+b3=1，所以實際上只有兩個自由度，空間仍是2D的。/// 實際上，重心座標能表示三角形所在平面所有的點，但三角形外的點座標至少有一個為負。/// 對三角形內的點，計算重心座標的方法：（圖上不太清楚，紅綠藍分別為T1,T2,T3,大三角面積為T）/// b1=T1/T，b2=T2/T，b3=T3/T。/// 對三角形[1] 外的點這仍適用，不過點落在一條邊外時，此邊上三角形面積取負數。/// NOTE:重心座標uv相加必須為1,重心座標能表示三角形所在平面所有的點，但三角形外的點座標至少有一個為負。/// NOTE:更多理論參考:http://zh.wikipedia.org/wiki/%E9%87%8D%E5%BF%83%E5%9D%90%E6%A0%87//////*////<summary>barycoordFromPoint</summary>///<param name ="point" type="Vector3">Vector3對象,任意點</param>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<param name ="optionalTarget" type="Vector3">選擇性參數,接收返回結果</param>///<returns type="Vector3">返回當前三角形所在的平面上任意點(參數point)所表示當前三角形頂點的加權平均值</returns>// static/instance method to calculate barycoordinates// 靜態方法用來計算三角形重心座標// 下面有個非常形象的例子: http://www.blackpawn.com/texts/pointinpoly/default.html// based on: http://www.blackpawn.com/texts/pointinpoly/default.htmlbarycoordFromPoint: function ( point, optionalTarget ) {//調用THREE.Triangle.barycoordFromPoint()方法return THREE.Triangle.barycoordFromPoint( point, this.a, this.b, this.c, optionalTarget );//返回當前三角形所在的平面上任意點(參數point)所表示當前三角形頂點的加權平均值},/*///containsPoint方法判斷任意點(參數point)是否在當前三角形內.*////<summary>containsPoint</summary>///<param name ="point" type="Vector3">Vector3對象,任意點</param>///<param name ="a" type="Vector3">三角形角點a</param>///<param name ="b" type="Vector3">三角形角點b</param>///<param name ="c" type="Vector3">三角形角點c</param>///<returns type="Vector3">返回true或者false</returns>containsPoint: function ( point ) {//調用THREE.Triangle.containsPoint()方法.return THREE.Triangle.containsPoint( point, this.a, this.b, this.c );//返回true或者false},/*///equals方法用來獲得參數triangle(三角形對象)是否與當前三角形完全相等,即三角形的頂點a,b,c相等.*////<summary>equals</summary>///<param name ="triangle" type="Triangle">一個Triangle的三角形對象</param>///<returns type="Boolean">返回true 或者 false</returns>equals: function ( triangle ) {return triangle.a.equals( this.a ) && triangle.b.equals( this.b ) && triangle.c.equals( this.c );//返回true 或者 false},/*clone方法///clone方法複製一個三角形對象.*////<summary>clone</summary>///<returns type="Plane">返回三角形對象</returns>clone: function () {return new THREE.Triangle().copy( this );//返回三角形對象}};

商域無疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：商域無疆 -  本部落格專註於 敏捷開發及移動和物聯裝置研究：資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

以下代碼是THREE.JS 源碼檔案中Math/Triangle.js檔案的注釋.

更多更新在 : https://github.com/omni360/three.js.sourcecode

three.js 源碼注釋（十八）Math/Triangle.js