three.js 源碼注釋（七十五）extras/geometries/ShapeGeometry.js

標籤：web3d   webgl   資料視覺效果   three.js   圖形   

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

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

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

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

以下代碼是THREE.JS 源碼檔案中extras/geometries/ShapeGeometry.js檔案的注釋.

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

/** * @author jonobr1 / http://jonobr1.com * * Creates a one-sided polygonal geometry from a path shape. Similar to * ExtrudeGeometry. * * parameters = { * *curveSegments: <int>, // number of points on the curves. NOT USED AT THE MOMENT. 曲線上的頂點數量 * *material: <int> // material index for front and back faces 正面和背面材質索引 *uvGenerator: <Object> // object that provides UV generator functions UV座標產生函數 * * } **//*///ShapeGeometry用來通過截面(參數shape)和參數選項(options)產生形狀幾何體.*////<summary>ShapeGeometry</summary>///<param name ="shapes" type="THREE.Shape">形狀幾何體截面</param>///<param name ="options" type="Object">展開幾何體參數選項</param>THREE.ShapeGeometry = function ( shapes, options ) {THREE.Geometry.call( this );//調用Geometry()方法建立幾何體,並將Geometry對象的方法供ShapeGeometry對象使用.if ( shapes instanceof Array === false ) shapes = [ shapes ];this.addShapeList( shapes, options );//將截面(參數shape)和參數選項,添加到shapes數組.this.computeFaceNormals();//計算三角面法線};/*****************************************************下面是ShapeGeometry對象的方法屬性定義,繼承自Geometry對象.**************************************************/THREE.ShapeGeometry.prototype = Object.create( THREE.Geometry.prototype );/*///addShapeList方法將截面(參數shape)和參數選項,添加到shapes數組.*////<summary>addShapeList</summary>///<param name ="shapes" type="THREE.ShapeArray">形狀幾何體截面</param>///<param name ="options" type="Object">形狀幾何體參數選項</param>/** * Add an array of shapes to THREE.ShapeGeometry. 為ShapeGeometry添加shapes數組. */THREE.ShapeGeometry.prototype.addShapeList = function ( shapes, options ) {for ( var i = 0, l = shapes.length; i < l; i ++ ) {this.addShape( shapes[ i ], options );}return this;};/*///addShape方法將截面(參數shape)和參數選項,獲得構造幾何體的截面.*////<summary>addShape</summary>///<param name ="shapes" type="THREE.ShapeArray">展開幾何體截面</param>///<param name ="options" type="Object">展開幾何體參數選項</param>///<returns type="Vector3Array">返回構造幾何體的截面.</returns>/** * Adds a shape to THREE.ShapeGeometry, based on THREE.ExtrudeGeometry. * 添加形狀到當前對象,基於THREE.ExtrudeGeometry. */THREE.ShapeGeometry.prototype.addShape = function ( shape, options ) {if ( options === undefined ) options = {};var curveSegments = options.curveSegments !== undefined ? options.curveSegments : 12;//曲線上的頂點數量,預設為12var material = options.material;//正面和背面材質屬性var uvgen = options.UVGenerator === undefined ? THREE.ExtrudeGeometry.WorldUVGenerator : options.UVGenerator;// 如果沒有指定uv產生器,使用預設的全域uv產生器.//var i, l, hole, s;var shapesOffset = this.vertices.length;var shapePoints = shape.extractPoints( curveSegments );var vertices = shapePoints.shape;var holes = shapePoints.holes;var reverse = ! THREE.Shape.Utils.isClockWise( vertices );if ( reverse ) {vertices = vertices.reverse();// Maybe we should also check if holes are in the opposite direction, just to be safe...//檢查鏤空(孔洞)頂點的順序.for ( i = 0, l = holes.length; i < l; i ++ ) {hole = holes[ i ];if ( THREE.Shape.Utils.isClockWise( hole ) ) {holes[ i ] = hole.reverse();}}reverse = false;}var faces = THREE.Shape.Utils.triangulateShape( vertices, holes );// Verticesvar contour = vertices;for ( i = 0, l = holes.length; i < l; i ++ ) {hole = holes[ i ];vertices = vertices.concat( hole );}//var vert, vlen = vertices.length;var face, flen = faces.length;var cont, clen = contour.length;for ( i = 0; i < vlen; i ++ ) {//遍曆所有的頂點vert = vertices[ i ];this.vertices.push( new THREE.Vector3( vert.x, vert.y, 0 ) );}for ( i = 0; i < flen; i ++ ) {//遍曆三角面數組.face = faces[ i ];var a = face[ 0 ] + shapesOffset;var b = face[ 1 ] + shapesOffset;var c = face[ 2 ] + shapesOffset;this.faces.push( new THREE.Face3( a, b, c, null, null, material ) );this.faceVertexUvs[ 0 ].push( uvgen.generateBottomUV( this, shape, options, a, b, c ) );//產生貼圖uv座標.}};

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

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

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

以下代碼是THREE.JS 源碼檔案中extras/geometries/ShapeGeometry.js檔案的注釋.

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

three.js 源碼注釋（七十五）extras/geometries/ShapeGeometry.js