three.js 源碼注釋（六十）objects/Line.js

標籤：three.js   三維   圖形   webgl   web3d   

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

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

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

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

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

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

/** * @author mrdoob / http://mrdoob.com/ *//*///Line對象,建立一條線,或者一組線./// 用法:var geometry = new THREE.Geometry();//建立geometry對象/// var material = new THREE.LineBasicMaterial({color: 0xffff00});//建立材質對象,這裡有專門適用於line對象的材質對象LineBasicMaterial./// geometry.verteces.push(new THREE.Vector3(-10,0,0),//為geometry對象添加verteces頂點資料///new THREE.Vector3(0,10,0),///new THREE.Vector3(10,0,0)/// );/// var line = new THREE.Mesh(geometry, material,THREE.LineStrip);//通過geometry的頂點資料建立材質為material,類型為THREE.LineStrip(不閉合的折線)的線./// scene.add(line); //將線添加到情境中.*////<summary>Line</summary>///<param name ="geometry" type="THREE.Geometry">Geometry對象(燈籠的架構)</param>///<param name ="material" type="THREE.Material">Material對象(材質對象)</param>///<param name ="type" type="線類型常量">線類型常量,有不閉合折線(THREE.LineStrip),多組雙頂點線段(THREE.LinePieces)</param>///<returns type="Mesh">返回Line對象</returns>THREE.Line = function ( geometry, material, type ) {THREE.Object3D.call( this );//調用Object3D對象的call方法,將原本屬於Object3D的方法交給當前對象Line來使用.this.geometry = geometry !== undefined ? geometry : new THREE.Geometry();//將參數geometry賦值給line對象的geometry屬性this.material = material !== undefined ? material : new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } );//將參數material賦值給line對象的material屬性,如果沒有傳遞material參數,將建立隨機顏色材質,賦值給當前mesh對象this.type = ( type !== undefined ) ? type : THREE.LineStrip;//將參數type賦值給line對像的type屬性,如果沒有傳遞type參數,預設初始化為THREE.LineStrip類型.};THREE.LineStrip = 0;//不閉合折線THREE.LinePieces = 1;//多組雙頂點線段//TODO: 缺少THREE.LineLoop//閉合折線./*****************************************************下面是Line對象的方法屬性定義,繼承自Object3D**************************************************/THREE.Line.prototype = Object.create( THREE.Object3D.prototype );/*///raycast方法用來獲得當前對象與射線（參數raycaster）的交點.raycaster.intersectObject會調用這個方法。主要是用來進行碰撞檢測,/// 在選擇情境中的對象時經常會用到,判斷當前滑鼠是否與對象重合用來選擇對象./// NOTE：raycast方法中參數intersects參數用來儲存交點的集合，格式如下///intersects.push( {//////distance: distance,///point: intersectionPoint,///face: null,///faceIndex: null,///object: this//////} );///*////<summary>raycast</summary>///<param name ="raycaster" type="THREE.Raycaster">射線對象</param>///<param name ="intersects" type="ObjectArray">交點的屬性集合</param>///<returns type="ObjectArray">交點的屬性集合</returns>THREE.Line.prototype.raycast = ( function () {var inverseMatrix = new THREE.Matrix4();var ray = new THREE.Ray();var sphere = new THREE.Sphere();return function ( raycaster, intersects ) {var precision = raycaster.linePrecision;//射線和Line對象相交的精度因子。var precisionSq = precision * precision;//精度因子的平方var geometry = this.geometry;if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();//確保boundingSphere屬性不為null// Checking boundingSphere distance to ray//檢查線段的球體界限到射線的距離sphere.copy( geometry.boundingSphere );sphere.applyMatrix4( this.matrixWorld );if ( raycaster.ray.isIntersectionSphere( sphere ) === false ) {//如果幾何體的球體界限與射線不想交return;    //返回}inverseMatrix.getInverse( this.matrixWorld );//獲得當前對象的this.matrixWorld屬性的逆矩陣ray.copy( raycaster.ray ).applyMatrix4( inverseMatrix );//給射線對象的原點,方向,乘以逆矩陣,/* if ( geometry instanceof THREE.BufferGeometry ) {} else */ if ( geometry instanceof THREE.Geometry ) {var vertices = geometry.vertices;var nbVertices = vertices.length;var interSegment = new THREE.Vector3();var interRay = new THREE.Vector3();var step = this.type === THREE.LineStrip ? 1 : 2;for ( var i = 0; i < nbVertices - 1; i = i + step ) {//如果是不閉合折線,每次自變數+1,如果是多組雙頂點線段,自變數每次+2var distSq = ray.distanceSqToSegment( vertices[ i ], vertices[ i + 1 ], interRay, interSegment );//distanceSqToSegment方法將返回有參數vertices[ i ], vertices[ i + 1 ]組成的線段到當前射線的最小距離.interRay, interSegment,分別用來儲存在射線上和線上段上的垂足if ( distSq > precisionSq ) continue;//如果最小距離大於精度因子,退出迴圈.var distance = ray.origin.distanceTo( interRay );//射線原點到射線到線段的垂足的距離.if ( distance < raycaster.near || distance > raycaster.far ) continue;//如果距離小於射線的近端,或大於射線的遠端,跳出迴圈intersects.push( {//將相交的對象,頂點索引,距離,交點儲存到intersects屬性數組中distance: distance,//距離// What do we want? intersection point on the ray or on the segment??// 我們要什麼,交點在射線上或者線上段上// point: raycaster.ray.at( distance ), 如果要在射線上,那就將raycaster.ray.at( distance )的賦值給pointpoint: interSegment.clone().applyMatrix4( this.matrixWorld ),//如果想要獲得交點線上段的位置,將interSegment.clone().applyMatrix4( this.matrixWorld )賦值給pointface: null,//面faceIndex: null,//面所在屬性數組中的索引object: this//對象} );}}};}() );/*clone方法///clone方法複製一個Line網格對象.*////<summary>clone</summary>///<param name ="object" type="Object3D">接收複製的Object3D對象</param>///<returns type="Ray">返回Line網格對象.</returns>THREE.Line.prototype.clone = function ( object ) {if ( object === undefined ) object = new THREE.Line( this.geometry, this.material, this.type );THREE.Object3D.prototype.clone.call( this, object );//繼承Object3D的clone方法return object;//返回Mesh網格對象.};

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

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

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

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

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

three.js 源碼注釋（六十）objects/Line.js