这是Three.js源码阅读笔记第三篇。之前两篇主要是关于核心对象的，这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的，关注的是空间中的单个顶点的位置和变化。这一篇将主要讨论Three.js中的物体是如何组织的：即如何将顶点、表面、材质组合成为一个具体的对象。
Object::Mesh
该构造函数构造了一个空间中的物体。之所以叫“网格”是因为，实际上具有体积的物体基本都是建模成为“网格”的。
复制代码 代码如下:
THREE.Mesh = function ( geometry, material ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( material !== undefined ) ? material : new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: true } );
/* 一些其他的与本节无关的内容 */
}
实际上，Mesh类只有两个属性，表示几何形体的geometry对象和表示材质的material对象。geometry对象在上一篇博文中已经介绍过，还有部分派生类会在这篇博文中介绍（通过这些派生类的构造过程，能更加清晰地了解到Mesh对象的工作原理）；matrial对象及其派生类也将在这篇笔记中介绍。Mesh对象的这两个属性相互紧密关联，geometry对象中的face数组中，每个face对象的materialIndex用来匹配material属性对象，face对象的vertexUVs数组用以依次匹配每个顶点在数组上的取值。值得注意的是，Mesh只能有一个material对象（不知这样设计的意图何在），如果需要用到多个材质，应当将材质按照materialIndex顺序初始化在geometry本身的materials属性中。
Geometry::CubeGeometry
该构造函数创建了一个立方体对象。
复制代码 代码如下:
THREE.CubeGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments ) {
THREE.Geometry.call( this );
var scope = this;
this.width = width;
this.height = height;
this.depth = depth;
var width_half = this.width / 2;
var height_half = this.height / 2;
var depth_half = this.depth / 2;
/* 略去 */
buildPlane( 'z', 'y', - 1, - 1, this.depth, this.height, width_half, 0 ); // px
/* 略去 */
function buildPlane( u, v, udir, vdir, width, height, depth, materialIndex ) {
/* 略去 */
}
this.computeCentroids();
this.mergeVertices();
};
构造函数做的最重要的事在buildPlane中。该函数最重要的事情就是对scope的操作（上面的代码块中，scope就是this），包括：调用scope.vertices.push(vector)将顶点加入geometry对象；调用scope.faces.push(face)将表面加入到geometry对象，调用scope.faceVertexUvs[i].push(uv)方法将对应于顶点的材质坐标加入geometry对象。代码的大部分都是关于生成立方体的逻辑，这些逻辑很容易理解，也很容易扩展到其他类型的geometry对象。
构造函数的参数包括长、宽、高和三个方向的分段数。所谓分段，就是说如果将widthSeqments等三个参数都设定为2的话，那么每个面将被表现成2×2=4个面，整个立方体由24个表面组成，正如同网格一样。
复制代码 代码如下:
function buildPlane( u, v, udir, vdir, width, height, depth, materialIndex ) {
var w, ix, iy,
gridX = scope.widthSegments,
gridY = scope.heightSegments,
width_half = width / 2,
height_half = height / 2,
offset = scope.vertices.length;
if ( ( u === 'x' && v === 'y' ) || ( u === 'y' && v === 'x' ) ) {w = 'z';}
else if ( ( u === 'x' && v === 'z' ) || ( u === 'z' && v === 'x' ) ) {w = 'y';gridY = scope.depthSegments;} else if ( ( u === 'z' && v === 'y' ) || ( u === 'y' && v === 'z' ) ) {w = 'x';gridX = scope.depthSegments;}
var gridX1 = gridX + 1,
gridY1 = gridY + 1,
segment_width = width / gridX,
segment_height = height / gridY,
normal = new THREE.Vector3();
normal[ w ] = depth > 0 ? 1 : - 1;
for ( iy = 0; iy < gridY1; iy ++ ) {
for ( ix = 0; ix < gridX1; ix ++ ) {
var vector = new THREE.Vector3();
vector[ u ] = ( ix * segment_width - width_half ) * udir;
vector[ v ] = ( iy * segment_height - height_half ) * vdir;
vector[ w ] = depth;
scope.vertices.push( vector );
}
}
for ( iy = 0; iy < gridY; iy++ ) {
for ( ix = 0; ix < gridX; ix++ ) {
var a = ix + gridX1 * iy;
var b = ix + gridX1 * ( iy + 1 );
var c = ( ix + 1 ) + gridX1 * ( iy + 1 );
var d = ( ix + 1 ) + gridX1 * iy;
var face = new THREE.Face4( a + offset, b + offset, c + offset, d + offset );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );
face.materialIndex = materialIndex;
scope.faces.push( face );
scope.faceVertexUvs[ 0 ].push( [
new THREE.UV( ix / gridX, 1 - iy / gridY ),
new THREE.UV( ix / gridX, 1 - ( iy + 1 ) / gridY ),
new THREE.UV( ( ix + 1 ) / gridX, 1- ( iy + 1 ) / gridY ),
new THREE.UV( ( ix + 1 ) / gridX, 1 - iy / gridY )
] );
}
}
}
除了一个大部分对象都具有的clone()方法，CubeGeometry没有其他的方法，其他的XXXGeometry对象也大抵如此。没有方法说明该对象负责组织和存储数据，而如何利用这些数据生成三维场景和动画，则是在另外的对象中定义的。
Geometry::CylinderGeometry
顾名思义，该构造函数创建一个圆柱体（或圆台）对象。
复制代码 代码如下: