Three.js源码阅读笔记(物体是如何组织的)资源-CSDN文库

material

191 浏览量 2021-01-21 13:56:07 上传评论收藏 97KB PDF 举报

资源推荐

资源详情

资源评论

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

这是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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

weixin_38714509

粉丝: 3
资源: 931

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

Three.js源码阅读笔记(Object3D类)

Three.js源码阅读笔记(基础的核心Core对象)

Three.js源码阅读笔记(光照部分)

html5+three.js彩色液态流动背景动画特效.zip

html5+three.js科幻地球仪3D旋转动画特效.zip

three.js全息光影动画特效.zip

#资源达人分享计划#threejs学习Demo笔记.rar

three.js+Canvas飞机飞行场景动画特效.zip

threejs大一大二笔记

简洁易用3D场景创建和控制工具python源码+项目说明(适用于科研、多智能体强化学习领域的3D演示、娱乐等).zip

landgreen.github.io:Landgreen的公共网站

slide_webglmu2015:2015 年东京 webgl 聚会

基于spring boot的小区物业管理系统源码+论文+答辩ppt

32个uniapp项目源码 涵盖商城团购等

20余套微信小程序源代码（含前端和后端）

chatGPT商业版源码和教程.zip

用C#&HALCON开发的完整视觉检测案例.rar

YOLOV8-main基础项目源码

Java源码springboot+vue传统文化网站-毕业设计论文-大作业.zip

profinet协议栈源码

蓝桥杯第十四届省赛真题源码

MES系统源码C#源码

Scratch3.0编程100个实例代码及素材（数学、语文、科学、音乐、游戏、动画）

基于JavaWeb的SSM的音乐网站（源码+数据库+报告）开源项目.zip

小米官网simply.zip

STM32F103C8T6+MPU6050完整工程，可直接编译下载使用

JavaWeb开发实战源码

最新资源

32个uniapp项目源码涵盖商城团购等