three.js 源碼註釋(七十九)extras/geometries/TorusGeometry.js

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

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

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


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

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

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


/**
 * @author oosmoxiecode
 * @author mrdoob / http://mrdoob.com/
 * based on http://code.google.com/p/away3d/source/browse/trunk/fp10/Away3DLite/src/away3dlite/primitives/Torus.as?r=2888
 */
/*
///TorusGeometry用來在三維空間內創建一個圓環體對象.
///
///	用法: var geometry = new THREE.TorusGeometry(3,1,12,18);	
/// 	  var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
/// 	  var torus = new THREE.Mesh(geometry,material);
/// 	  scene.add(torus);
*/
///<summary>TorusGeometry</summary>
///<param name ="radius" type="float">圓環體半徑</param>
///<param name ="tube" type="float">圓環彎管半徑</param>
///<param name ="radialSegments" type="int">圓環體圓周上細分線段數</param>
///<param name ="tubularSegments" type="int">圓環彎管圓周上的細分線段數</param>
///<param name ="arc" type="float">圓環體圓周弧長,默認初始化爲Math.PI * 2</param>
THREE.TorusGeometry = function ( radius, tube, radialSegments, tubularSegments, arc ) {

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

	this.parameters = {
		radius: radius,	//圓環體半徑
		tube: tube,	 	//圓環彎管半徑
		radialSegments: radialSegments, 	//圓環體圓周上細分線段數
		tubularSegments: tubularSegments,	//圓環彎管圓周上的細分線段數
		arc: arc 	//圓環體圓周弧長,默認初始化爲Math.PI * 2
	};

	radius = radius || 100;	//圓環體半徑,如果參數未設置,初始化爲100.
	tube = tube || 40;	 	//圓環彎管半徑,如果參數未設置,初始化爲40.
	radialSegments = radialSegments || 8; 	//圓環體圓周上細分線段數,如果參數未設置,初始化爲8.
	tubularSegments = tubularSegments || 6;	//圓環彎管圓周上的細分線段數,如果參數未設置,初始化爲6.
	arc = arc || Math.PI * 2;		//圓環體圓周弧長,默認初始化爲Math.PI * 2

	var center = new THREE.Vector3(), uvs = [], normals = [];
	//計算頂點數據,壓入vertices數組.
	for ( var j = 0; j <= radialSegments; j ++ ) {

		for ( var i = 0; i <= tubularSegments; i ++ ) {

			var u = i / tubularSegments * arc;
			var v = j / radialSegments * Math.PI * 2;

			center.x = radius * Math.cos( u );
			center.y = radius * Math.sin( u );

			var vertex = new THREE.Vector3();
			vertex.x = ( radius + tube * Math.cos( v ) ) * Math.cos( u );
			vertex.y = ( radius + tube * Math.cos( v ) ) * Math.sin( u );
			vertex.z = tube * Math.sin( v );

			this.vertices.push( vertex );

			uvs.push( new THREE.Vector2( i / tubularSegments, j / radialSegments ) );
			normals.push( vertex.clone().sub( center ).normalize() );

		}

	}
	//計算三角面,以及貼圖uv.
	for ( var j = 1; j <= radialSegments; j ++ ) {

		for ( var i = 1; i <= tubularSegments; i ++ ) {

			var a = ( tubularSegments + 1 ) * j + i - 1;
			var b = ( tubularSegments + 1 ) * ( j - 1 ) + i - 1;
			var c = ( tubularSegments + 1 ) * ( j - 1 ) + i;
			var d = ( tubularSegments + 1 ) * j + i;

			var face = new THREE.Face3( a, b, d, [ normals[ a ].clone(), normals[ b ].clone(), normals[ d ].clone() ] );
			this.faces.push( face );
			this.faceVertexUvs[ 0 ].push( [ uvs[ a ].clone(), uvs[ b ].clone(), uvs[ d ].clone() ] );

			face = new THREE.Face3( b, c, d, [ normals[ b ].clone(), normals[ c ].clone(), normals[ d ].clone() ] );
			this.faces.push( face );
			this.faceVertexUvs[ 0 ].push( [ uvs[ b ].clone(), uvs[ c ].clone(), uvs[ d ].clone() ] );

		}

	}

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

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


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

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

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


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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章