商域無疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商業用途-保持一致”創作公用協議
轉載請保留此句:商域無疆 - 本博客專注於 敏捷開發及移動和物聯設備研究:數據可視化、GOLANG、Html5、WEBGL、THREE.JS,否則,出自本博客的文章拒絕轉載或再轉載,謝謝合作。
俺也是剛開始學,好多地兒肯定不對還請見諒.
以下代碼是THREE.JS 源碼文件中extras/geometries/ParametricGeometry.js文件的註釋.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/**
* @author zz85 / https://github.com/zz85
* Parametric Surfaces Geometry
* based on the brilliant article by @prideout http://prideout.net/blog/?p=44
*
* new THREE.ParametricGeometry( parametricFunction, uSegments, ySegements );
*
*/
/*
///ParametricGeometry用來在三維空間內通過參數func的定義,生成一個幾何體.有了這個對象,各種你想要的集合體,發揮你的數學天賦吧.
///
/// 用法:
/// var func = function(u,v){
/// var point = new THREE.Vector3();
/// point.x = 100 + Math.cos(u);
/// point.y = 100 + Math.sin(v);
/// return point;
/// };
/// var geometry = new THREE.ParametricGeometry(func,8,8);
/// var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
/// var param = new THREE.Mesh(geometry,material);
/// scene.add(param);
*/
///<summary>ParametricGeometry</summary>
///<param name ="func" type="funciton">功能函數,必須接受參數u,v,返回Vector3</param>
///<param name ="slices" type="int">u方向上的細分線段數</param>
///<param name ="stacks" type="int">v方向上的細分線段數</param>
THREE.ParametricGeometry = function ( func, slices, stacks ) {
THREE.Geometry.call( this ); //調用Geometry對象的call方法,將原本屬於Geometry的方法交給當前對象ParametricGeometry來使用.
var verts = this.vertices;
var faces = this.faces;
var uvs = this.faceVertexUvs[ 0 ];
var i, il, j, p;
var u, v;
var stackCount = stacks + 1;
var sliceCount = slices + 1;
//計算頂點數據,壓入vertices數組.
for ( i = 0; i <= stacks; i ++ ) {
v = i / stacks;
for ( j = 0; j <= slices; j ++ ) {
u = j / slices;
p = func( u, v );
verts.push( p );
}
}
var a, b, c, d;
var uva, uvb, uvc, uvd;
//計算三角面,以及貼圖uv.
for ( i = 0; i < stacks; i ++ ) {
for ( j = 0; j < slices; j ++ ) {
a = i * sliceCount + j;
b = i * sliceCount + j + 1;
c = (i + 1) * sliceCount + j + 1;
d = (i + 1) * sliceCount + j;
uva = new THREE.Vector2( j / slices, i / stacks );
uvb = new THREE.Vector2( ( j + 1 ) / slices, i / stacks );
uvc = new THREE.Vector2( ( j + 1 ) / slices, ( i + 1 ) / stacks );
uvd = new THREE.Vector2( j / slices, ( i + 1 ) / stacks );
faces.push( new THREE.Face3( a, b, d ) );
uvs.push( [ uva, uvb, uvd ] );
faces.push( new THREE.Face3( b, c, d ) );
uvs.push( [ uvb.clone(), uvc, uvd.clone() ] );
}
}
// console.log(this);
// magic bullet
// var diff = this.mergeVertices();
// console.log('removed ', diff, ' vertices by merging');
this.computeFaceNormals(); //計算面的法線
this.computeVertexNormals(); //計算頂點法線
};
/*************************************************
****下面是ParametricGeometry對象的方法屬性定義,繼承自Geometry對象.
**************************************************/
THREE.ParametricGeometry.prototype = Object.create( THREE.Geometry.prototype );
商域無疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商業用途-保持一致”創作公用協議
轉載請保留此句:商域無疆 - 本博客專注於 敏捷開發及移動和物聯設備研究:數據可視化、GOLANG、Html5、WEBGL、THREE.JS,否則,出自本博客的文章拒絕轉載或再轉載,謝謝合作。
以下代碼是THREE.JS 源碼文件中extras/geometries/ParametricGeometry.js文件的註釋.