標籤:webgl 三維 資料視覺效果 three.js web3d
商域無疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商業用途-保持一致”創作公用協議
轉載請保留此句:商域無疆 - 本部落格專註於 敏捷開發及移動和物聯裝置研究:資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS,否則,出自本部落格的文章拒絕轉載或再轉載,謝謝合作。
俺也是剛開始學,好多地兒肯定不對還請見諒.
以下代碼是THREE.JS 源碼檔案中extras/geometries/LatheGeometry.js檔案的注釋.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/** * @author astrodud / http://astrodud.isgreat.org/ * @author zz85 / https://github.com/zz85 * @author bhouston / http://exocortex.com *//*///LatheGeometry類通過截面頂點數組(points)建立旋轉幾何體.//////用法: ///var points = [];///for ( var i = 0; i < 10; i ++ ) {///points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );///}///var geometry = new THREE.LatheGeometry( points );///var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );///var lathe = new THREE.Mesh( geometry, material );///scene.add( lathe );*////<summary>LatheGeometry</summary>///<param name ="points" type="float">旋轉體截面頂點數組</param>///<param name ="segments" type="int">旋轉體旋轉圓周的細分線段數</param>///<param name ="phiStart" type="float">旋轉體的起始點</param>///<param name ="phiLength" type="float">旋轉體的弧長</param>// points - to create a closed torus, one must use a set of points //建立一個封閉的環面,// like so: [ a, b, c, d, a ], see first is the same as last.//例如[a,b,c,d,a],第一個頂點必須和最後一個頂點相同.// segments - the number of circumference segments to create //旋轉圓周的細分線段數// phiStart - the starting radian //旋轉截面的起始點,預設初始化為0.// phiLength - the radian (0 to 2*PI) range of the lathed section// 2*pi is a closed lathe, less than 2PI is a portion. //旋轉的弧長預設初始化為2*PI.THREE.LatheGeometry = function ( points, segments, phiStart, phiLength ) {THREE.Geometry.call( this );segments = segments || 12;phiStart = phiStart || 0;phiLength = phiLength || 2 * Math.PI;var inversePointLength = 1.0 / ( points.length - 1 );var inverseSegments = 1.0 / segments;//旋轉體截面頂點數組通過旋轉,獲得所有的頂點數組.for ( var i = 0, il = segments; i <= il; i ++ ) {var phi = phiStart + i * inverseSegments * phiLength;var c = Math.cos( phi ),s = Math.sin( phi );for ( var j = 0, jl = points.length; j < jl; j ++ ) {var pt = points[ j ];var vertex = new THREE.Vector3();vertex.x = c * pt.x - s * pt.y;vertex.y = s * pt.x + c * pt.y;vertex.z = pt.z;this.vertices.push( vertex );}}var np = points.length;//將所有的頂點計算產生三角面,並計算出三角面貼圖的uvfor ( var i = 0, il = segments; i < il; i ++ ) {for ( var j = 0, jl = points.length - 1; j < jl; j ++ ) {var base = j + np * i;var a = base;var b = base + np;var c = base + 1 + np;var d = base + 1;var u0 = i * inverseSegments;var v0 = j * inversePointLength;var u1 = u0 + inverseSegments;var v1 = v0 + inversePointLength;this.faces.push( new THREE.Face3( a, b, d ) );this.faceVertexUvs[ 0 ].push( [new THREE.Vector2( u0, v0 ),new THREE.Vector2( u1, v0 ),new THREE.Vector2( u0, v1 )] );this.faces.push( new THREE.Face3( b, c, d ) );this.faceVertexUvs[ 0 ].push( [new THREE.Vector2( u1, v0 ),new THREE.Vector2( u1, v1 ),new THREE.Vector2( u0, v1 )] );}}this.mergeVertices();//合并頂點,刪除多餘的頂點 this.computeFaceNormals();//計算三角面的法線this.computeVertexNormals();//計算頂點的法線};/*****************************************************下面是LatheGeometry對象的方法屬性定義,繼承自Geometry對象.**************************************************/THREE.LatheGeometry.prototype = Object.create( THREE.Geometry.prototype );
商域無疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商業用途-保持一致”創作公用協議
轉載請保留此句:商域無疆 - 本部落格專註於 敏捷開發及移動和物聯裝置研究:資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS,否則,出自本部落格的文章拒絕轉載或再轉載,謝謝合作。
以下代碼是THREE.JS 源碼檔案中extras/geometries/LatheGeometry.js檔案的注釋.
更多更新在 : https://github.com/omni360/three.js.sourcecode
three.js 源碼注釋(七十七)extras/geometries/LatheGeometry.js