three.js 源碼注釋（六十九）extras/geometries/CircleGeometry.js

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

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

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

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

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

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

/**
 * @author hughes
 */
/*
///CircleGeometry用來在三維空間内建立一個圓形對象,因為圓形對象是由參數segments指定的一個個三角形圍繞圓心拼接而成,是以也可以是多邊形對象.
///
///	用法: var radius = 5, segments = 32;
///		  var geometry = new THREE.CircleGeometry(radius,segments);	
/// 	  var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
/// 	  var circle = new THREE.Mesh(geometry,material);
/// 	  scene.add(circle);
*/
///<summary>CircleGeometry</summary>
///<param name ="radius" type="float">圓形(多邊形)對象的半徑,預設初始化為50</param>
///<param name ="segments" type="int">可選參數,圓形(多邊形)的線段數(邊數),預設初始化為8</param>
///<param name ="thetaStart" type="int">可選參數,圓(多邊形)的起始點,預設初始化為0</param>
///<param name ="thetaLength" type="int">可選參數,圓(多邊形)的結束點,預設初始化為Math.PI * 2</param>
THREE.CircleGeometry = function ( radius, segments, thetaStart, thetaLength ) {

	THREE.Geometry.call( this );

	this.parameters = {
		radius: radius,
		segments: segments,
		thetaStart: thetaStart,
		thetaLength: thetaLength
	};

	radius = radius || 50;	//圓形(多邊形)半徑,預設初始化為50.
	segments = segments !== undefined ? Math.max( 3, segments ) : 8;	///圓形或者多邊形的線段數,最小為3,如果沒有設定segments屬性,則初始化為8.

	thetaStart = thetaStart !== undefined ? thetaStart : 0;	//圓形或者多邊形的起始點,預設初始化為0.
	thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2;	//圓(多邊形)的結束點,預設初始化為Math.PI * 2
	// 下面這段代碼為圓形(多邊形)生成uv坐标,點點資訊.
	var i, uvs = [],
	center = new THREE.Vector3(), centerUV = new THREE.Vector2( 0.5, 0.5 );

	this.vertices.push(center);
	uvs.push( centerUV );

	for ( i = 0; i <= segments; i ++ ) { //周遊組成圓形(多邊形)的線段數或邊數

		var vertex = new THREE.Vector3();
		var segment = thetaStart + i / segments * thetaLength;	//獲得組成圓形(多邊形)邊或線段的角度

		vertex.x = radius * Math.cos( segment );	//根據半徑和角度值計算出x坐标
		vertex.y = radius * Math.sin( segment );	//根據半徑和角度值計算出y坐标

		this.vertices.push( vertex );	//添加到頂點數組.
		uvs.push( new THREE.Vector2( ( vertex.x / radius + 1 ) / 2, ( vertex.y / radius + 1 ) / 2 ) );	//添加uvs坐标資訊

	}

	var n = new THREE.Vector3( 0, 0, 1 );

	for ( i = 1; i <= segments; i ++ ) {	//周遊組成圓形(多邊形)的線段數或邊數

		this.faces.push( new THREE.Face3( i, i + 1, 0, [ n.clone(), n.clone(), n.clone() ] ) );	//生成三角面的頂點索引
		this.faceVertexUvs[ 0 ].push( [ uvs[ i ].clone(), uvs[ i + 1 ].clone(), centerUV.clone() ] );	//生成與三角面的頂點索引順序相同的三角面的uvs坐标

	}

	this.computeFaceNormals();	//計算面法線

	this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );	//生成圓形(多邊形)對象的球形邊界.

};
/*************************************************
****下面是CircleGeometry對象的方法屬性定義,繼承自Geometry對象.
**************************************************/
THREE.CircleGeometry.prototype = Object.create( THREE.Geometry.prototype );
           

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

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

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

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

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