标签：webgl three.js web3d 数据可视化 三维
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中extras/geometries/RingGeometry.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/**
* @author Kaleb Murphy
*/
/*
///RingGeometry用来在三维空间内创建一个二维圆环面对象.
///
/// 用法: var geometry = new THREE.RingGeometry(1,5,32);
/// var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
/// var Ring = new THREE.Mesh(geometry,material);
/// scene.add(Ring);
*/
///<summary>TorusGeometry</summary>
///<param name ="innerRadius" type="float">圆环面内圆半径,默认初始化为0</param>
///<param name ="outerRadius" type="float">圆环面外圆半径,默认初始化为50</param>
///<param name ="thetaSegments" type="int">圆环面圆周上的细分线段数,代表了圆环的圆度,最低的是3。默认值是8</param>
///<param name ="phiSegments" type="int">圆环面内圆到外圆方向上的细分线段数,最低的是1。默认值是8</param>
///<param name ="thetaStart" type="float">圆环面的起始角度,默认初始化为0</param>
///<param name ="thetaLength" type="float">圆环面圆周弧长,默认初始化为Math.PI * 2</param>
THREE.RingGeometry = function ( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength ) {
THREE.Geometry.call( this ); //调用Geometry对象的call方法,将原本属于Geometry的方法交给当前对象RingGeometry来使用.
innerRadius = innerRadius || 0; //圆环面内圆半径,默认初始化为0
outerRadius = outerRadius || 50; //圆环面外圆半径,默认初始化为50
thetaStart = thetaStart !== undefined ? thetaStart : 0; //圆环面的起始角度,默认初始化为0
thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2; //圆环面圆周弧长,默认初始化为Math.PI * 2
thetaSegments = thetaSegments !== undefined ? Math.max( 3, thetaSegments ) : 8; //圆环面圆周上的细分线段数,代表了圆环的圆度,最低的是3。默认值是8
phiSegments = phiSegments !== undefined ? Math.max( 1, phiSegments ) : 8; //圆环面内圆到外圆方向上的细分线段数,最低的是1。默认值是8
var i, o, uvs = [], radius = innerRadius, radiusStep = ( ( outerRadius - innerRadius ) / phiSegments );
//计算顶点数据,压入vertices数组.
for ( i = 0; i < phiSegments + 1; i ++ ) { // concentric circles inside ring
for ( o = 0; o < thetaSegments + 1; o ++ ) { // number of segments per circle 圆周上的分段数
var vertex = new THREE.Vector3();
var segment = thetaStart + o / thetaSegments * thetaLength;
vertex.x = radius * Math.cos( segment );
vertex.y = radius * Math.sin( segment );
this.vertices.push( vertex );
uvs.push( new THREE.Vector2( ( vertex.x / outerRadius + 1 ) / 2, ( vertex.y / outerRadius + 1 ) / 2 ) );
}
radius += radiusStep;
}
var n = new THREE.Vector3( 0, 0, 1 );
//计算三角面,以及贴图uv.
for ( i = 0; i < phiSegments; i ++ ) { // concentric circles inside ring
var thetaSegment = i * (thetaSegments + 1);
for ( o = 0; o < thetaSegments ; o ++ ) { // number of segments per circle 圆周上的分段数
var segment = o + thetaSegment;
var v1 = segment;
var v2 = segment + thetaSegments + 1;
var v3 = segment + thetaSegments + 2;
this.faces.push( new THREE.Face3( v1, v2, v3, [ n.clone(), n.clone(), n.clone() ] ) );
this.faceVertexUvs[ 0 ].push( [ uvs[ v1 ].clone(), uvs[ v2 ].clone(), uvs[ v3 ].clone() ]);
v1 = segment;
v2 = segment + thetaSegments + 2;
v3 = segment + 1;
this.faces.push( new THREE.Face3( v1, v2, v3, [ n.clone(), n.clone(), n.clone() ] ) );
this.faceVertexUvs[ 0 ].push( [ uvs[ v1 ].clone(), uvs[ v2 ].clone(), uvs[ v3 ].clone() ]);
}
}
this.computeFaceNormals(); //计算面的法线
this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius ); //计算球体边界
};
/*************************************************
****下面是RingGeometry对象的方法属性定义,继承自Geometry对象.
**************************************************/
THREE.RingGeometry.prototype = Object.create( THREE.Geometry.prototype );
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
以下代码是THREE.JS 源码文件中extras/geometries/RingGeometry.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
three.js 源码注释（八十二）extras/geometries/RingGeometry.js
标签：webgl three.js web3d 数据可视化 三维
原文地址：http://blog.csdn.net/omni360/article/details/43370085
