three.js 源碼註釋（七十一）extras/geometries/CylinderGeometry.js

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

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

轉載請保留此句：商域無疆 -  本博客專注於 敏捷開發及移動和物聯設備研究：數據可視化、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本博客的文章拒絕轉載或再轉載，謝謝合作。

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

以下代碼是THREE.JS 源碼文件中extras/geometries/CylinderGeometry.js文件的註釋.

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

/**
 * @author mrdoob / http://mrdoob.com/
 */
/*
///CylinderGeometry用來在三維空間內創建一個圓柱,圓錐,圓桶對象.
/// NOTE: 和CircleGeometry對象一樣,如果我們把參數radialSeagments的值設置成4,是不是就變成了棱臺了,設置成3,並且radiusTop設置成0,是不是就是金字塔了????
///
///	用法: var geometry = new THREE.CircleGeometry(5,5,20,32);	
/// 	  var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
/// 	  var clinder = new THREE.Mesh(geometry,material);
/// 	  scene.add(clinder);
*/
///<summary>CylinderGeometry</summary>
///<param name ="radiusTop" type="float">對象的上表面半徑</param>
///<param name ="radiusBottom" type="float">對象的下表面半徑</param>
///<param name ="height" type="float">對象的高度</param>
///<param name ="radialSegments" type="int">對象的半徑方向的細分線段數</param>
///<param name ="heightSegments" type="int">對象的高度細分線段數</param>
///<param name ="openEnded" type="boolean">是否開口,如果設置爲true,並且radiusTop參數不爲0,將會是一個沒有上表面,下表面的幾何對象.</param>
THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded ) {

	THREE.Geometry.call( this );	//調用Geometry對象的call方法,將原本屬於Geometry的方法交給當前對象CylinderGeometry來使用.

	this.parameters = {
		radiusTop: radiusTop,	//對象的上表面半徑
		radiusBottom: radiusBottom,		//對象的下表面半徑
		height: height,					//對象的高度
		radialSegments: radialSegments,	//對象的半徑方向的細分線段數
		heightSegments: heightSegments,	//對象的高度細分線段數
		openEnded: openEnded			//是否開口,如果設置爲true,並且radiusTop參數不爲0,將會是一個沒有上表面,下表面的幾何對象.
	};

	radiusTop = radiusTop !== undefined ? radiusTop : 20;	//對象的上表面半徑,如果未設置,默認爲20
	radiusBottom = radiusBottom !== undefined ? radiusBottom : 20;	//對象的下表面半徑,如果未設置,默認爲20
	height = height !== undefined ? height : 100;	//對象的高度,如果未設置,默認爲20

	radialSegments = radialSegments || 8;	//對象的半徑方向的細分線段數,如果未設置,默認爲20
	heightSegments = heightSegments || 1;	//對象的高度細分線段數,如果未設置,默認爲20

	openEnded = openEnded !== undefined ? openEnded : false;	//是否開口,如果設置爲true,並且radiusTop參數不爲0,將會是一個沒有上表面,下表面的幾何對象.默認爲false

	var heightHalf = height / 2;

	var x, y, vertices = [], uvs = [];

	for ( y = 0; y <= heightSegments; y ++ ) {	//根據高度細分線段數,遍歷計算頂點座標和排列uv.

		var verticesRow = [];
		var uvsRow = [];

		var v = y / heightSegments;
		var radius = v * ( radiusBottom - radiusTop ) + radiusTop;

		for ( x = 0; x <= radialSegments; x ++ ) {

			var u = x / radialSegments;
			//計算頂點的x,y,z座標,記住下邊的公式,這個公式很常用,極座標轉爲直角座標.就是他.
			var vertex = new THREE.Vector3();
			vertex.x = radius * Math.sin( u * Math.PI * 2 );	//
			vertex.y = - v * height + heightHalf;
			vertex.z = radius * Math.cos( u * Math.PI * 2 );

			this.vertices.push( vertex );

			verticesRow.push( this.vertices.length - 1 );
			uvsRow.push( new THREE.Vector2( u, 1 - v ) );

		}

		vertices.push( verticesRow );
		uvs.push( uvsRow );

	}
	//上面是圓柱的一列頂點數據,下邊是將這一列頂點複製一圈.
	var tanTheta = ( radiusBottom - radiusTop ) / height;
	var na, nb;

	for ( x = 0; x < radialSegments; x ++ ) {

		if ( radiusTop !== 0 ) {

			na = this.vertices[ vertices[ 0 ][ x ] ].clone();
			nb = this.vertices[ vertices[ 0 ][ x + 1 ] ].clone();

		} else {

			na = this.vertices[ vertices[ 1 ][ x ] ].clone();
			nb = this.vertices[ vertices[ 1 ][ x + 1 ] ].clone();

		}

		na.setY( Math.sqrt( na.x * na.x + na.z * na.z ) * tanTheta ).normalize();
		nb.setY( Math.sqrt( nb.x * nb.x + nb.z * nb.z ) * tanTheta ).normalize();

		for ( y = 0; y < heightSegments; y ++ ) {

			var v1 = vertices[ y ][ x ];
			var v2 = vertices[ y + 1 ][ x ];
			var v3 = vertices[ y + 1 ][ x + 1 ];
			var v4 = vertices[ y ][ x + 1 ];

			var n1 = na.clone();
			var n2 = na.clone();
			var n3 = nb.clone();
			var n4 = nb.clone();

			var uv1 = uvs[ y ][ x ].clone();
			var uv2 = uvs[ y + 1 ][ x ].clone();
			var uv3 = uvs[ y + 1 ][ x + 1 ].clone();
			var uv4 = uvs[ y ][ x + 1 ].clone();

			this.faces.push( new THREE.Face3( v1, v2, v4, [ n1, n2, n4 ] ) );	//計算三角面索引
			this.faceVertexUvs[ 0 ].push( [ uv1, uv2, uv4 ] );					//計算uvs紋理貼圖座標索引.

			this.faces.push( new THREE.Face3( v2, v3, v4, [ n2.clone(), n3, n4.clone() ] ) );
			this.faceVertexUvs[ 0 ].push( [ uv2.clone(), uv3, uv4.clone() ] );

		}

	}

	// top cap
	//上表面
	if ( openEnded === false && radiusTop > 0 ) {

		this.vertices.push( new THREE.Vector3( 0, heightHalf, 0 ) );

		for ( x = 0; x < radialSegments; x ++ ) {

			var v1 = vertices[ 0 ][ x ];
			var v2 = vertices[ 0 ][ x + 1 ];
			var v3 = this.vertices.length - 1;

			var n1 = new THREE.Vector3( 0, 1, 0 );
			var n2 = new THREE.Vector3( 0, 1, 0 );
			var n3 = new THREE.Vector3( 0, 1, 0 );

			var uv1 = uvs[ 0 ][ x ].clone();
			var uv2 = uvs[ 0 ][ x + 1 ].clone();
			var uv3 = new THREE.Vector2( uv2.x, 0 );

			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ] ) );
			this.faceVertexUvs[ 0 ].push( [ uv1, uv2, uv3 ] );

		}

	}

	// bottom cap
	//下表面
	if ( openEnded === false && radiusBottom > 0 ) {

		this.vertices.push( new THREE.Vector3( 0, - heightHalf, 0 ) );

		for ( x = 0; x < radialSegments; x ++ ) {

			var v1 = vertices[ y ][ x + 1 ];
			var v2 = vertices[ y ][ x ];
			var v3 = this.vertices.length - 1;

			var n1 = new THREE.Vector3( 0, - 1, 0 );
			var n2 = new THREE.Vector3( 0, - 1, 0 );
			var n3 = new THREE.Vector3( 0, - 1, 0 );

			var uv1 = uvs[ y ][ x + 1 ].clone();
			var uv2 = uvs[ y ][ x ].clone();
			var uv3 = new THREE.Vector2( uv2.x, 1 );

			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ] ) );
			this.faceVertexUvs[ 0 ].push( [ uv1, uv2, uv3 ] );

		}

	}

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

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

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

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

轉載請保留此句：商域無疆 -  本博客專注於 敏捷開發及移動和物聯設備研究：數據可視化、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本博客的文章拒絕轉載或再轉載，謝謝合作。

以下代碼是THREE.JS 源碼文件中extras/geometries/CylinderGeometry.js文件的註釋.

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