首页 > 语言 > JavaScript > 正文

Three.js源码阅读笔记(物体是如何组织的)

2024-05-06 14:20:16
字体:
来源:转载
供稿:网友
这是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个表面组成,正如同网格一样。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选