标签：javascript 图形 互联网 三维 数据可视化
商域无疆 (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
three.js 源码注释（七十一）extras/geometries/CylinderGeometry.js
标签：javascript 图形 互联网 三维 数据可视化
原文地址：http://blog.csdn.net/omni360/article/details/43203533
