Three.js源码阅读笔记(Object3D类)(three.js入门指南)

这是Three.js源码阅读笔记的第二篇，直接开始。 Core::Object3D Object3D似乎是Three.js框架中最重要的类，相当一部分其他的类都是继承自Object3D类，比如场景类、几何形体类、相机类、光照类等等：他们都是3D空间中的对象，所以称为Object3D类。Object3D构造函数如下： 在介绍函数之前，需要先介绍一下这个类的几个重要属性。 属性parent和children说明，通常需要使用树来管理众多Object3D对象。比如一辆行驶的汽车是一个Object3D对象，控制汽车行驶路线的逻辑在该对象内部实现，汽车的每个顶点经过模型矩阵的处理后，都位于正确的位置；但是汽车摆动的雨刮器，其不但随着汽车行驶方向运动，而且自身相对汽车也在左右摆动，这个摆动的逻辑无法在汽车这个对象内部的实现。解决的方法是，将雨刮器设定为汽车的chidren，雨刮器内部的逻辑只负责其相对于汽车的摆动。在这种树状结构下，一个场景Scene实际上就是最顶端的Object3D，它的模型矩阵就是视图矩阵（取决于相机）的逆矩阵。 属性matrix和matrixWorld就很好理解了，matrix表示本地的模型矩阵，仅仅表示该对象的运动，而matrixWorld则需要依次向父亲节点迭代，每一次迭代都左乘父亲对象的本地模型矩阵，直到Scene对象——当然，实际上是左乘父亲对象的全局模型矩阵。属性position、rotation、scale表示模型矩阵的三种变换部分，在Matrix4类中有相关说明。rotation和eulerOrder共同描述了一个旋转状态，quaternion也可以描述一个旋转状态，具体使用哪种方法要看useQuation的布尔值。 可以看到，关于该Object3D对象最重要的“变换状态”信息实际上是存储在两个“备份”中的，一个是matrix对象，还有一个是position等属性，两部分应当保持一致，如果通过某种方法改变了一个备份，则另一个备份也应该在适当的时候更新。还有一些其他属性从字面和类型上就能看出其含义，不再单独列出了。下面说函数： 函数applyMatrix(matrix)将参数matrix左乘到this.matrix上，实际上就是对该Object3D对象实行某个变换（该变换可能要经过好几步基本变换，但是已经存储在参数matrix里面了）。注意，在对this.matrix执行完左乘之后，；立刻更新了position等参数的值。比起下面几个变换函数，该函数更“高级”，允许开发者自由指定变换矩阵，而不是说“朝着x轴前进5单位距离”。 函数translate(distance, axis)令该对象向axis轴指定的方向前进distance距离。函数translateX(distance)，translateY(distance)，translateZ(distance)令其向X，Y，Z轴前进distance距离。注意这些函数仅仅改变了position对象的值，而不曾改变matrix的值。 函数localToWorld(vector)将本地坐标转化为世界坐标中，函数worldToLocal则正好相反。注意这里的vector本地坐标指的是未变换之前的坐标，也就是说雨刮器的默认位置的顶点坐标。 函数lookAt(eye,center,up)执行其matrix属性对象的lookAt函数（之前介绍过，matrix4对象也有一个lookAt函数），一般用于相机对象。该函数仅仅改变了旋转状态，所以当matrix属性对象执行完之后，如果属性rotationAutoUpdate为真，则会更新rotation或quaternion的值，更新哪一个取决于属性useQuation。 函数add(object)和函数remove(object)从当前Object3D对象中添加一个子对象，或删除一个子对象，了解到场景中的众多Object3D对象是用树来管理的，这就很容易理解了。 函数traverse(callback)遍历调用者和调用者的所有后代，callback参数是一个函数，被调用者和每一个后代对象调用callback(this)。 函数getChildByName(name,recursive)通过字符串在调用者的子元素（recursive为false）或后代元素（recursive为true）中查询属性name符合的对象返回。 函数getDescendants(array)将调用者的所有后代对象全部push到数组array中。 函数updateMatrix()和updateMatrixWorld(force)将根据position，rotation或quaternion，scale参数更新matrix和matrixWorld。updateMatrixWorld还会更新所有后代元素的matrixWorld，如果force值为真或者调用者本身的matrixWorldNeedsUpdate值为真。在函数applyMatrix(matrix)中，改变了matrix值后立刻就更新了position，rotation等属性，但在函数translate(distance,axis)中改变了position等变量（或者直接改变position等属性）后并没有立刻更新matrix值，这时应该手动调用updateMatrix()。这些细节值得注意，你也许会认为应该加入事件监听，一旦一个值发生变化，其他所有的都会立刻更新，但我想在，可能是出于这方面的考虑：适当的时候更新会带来更高的效率——比如可能会频繁地改变rotation值，但是仅仅在使用matrix属性之前，才对其进行更新。 函数deallocate手动将调用者占用的空间释放掉，当不再需要该对象时这样做。 Core::Projectors 管理投影矩阵的类，代码太复杂了，我猜会涉及到render类里的操作，等到适当的时候再看吧。 Core::UV 该构造函数产生一个材质坐标类——就是材质上的坐标，往往与顶点对应起来，光栅化后每个像素都有一个材质坐标，再从材质上“取色”以实现纹理。 材质坐标类就是一个简化的vector2类，除了属性名称不同而已。 Core::Ray Core::Rectangle Core:Spline 射线类，有原点、方向、远近截断点。在点光源中应该有应用。矩形类、曲线类，相对都比较简单，也不那么“核心”，以后再看吧。 Core::Geometry Geometry类也是非常重要的一类，表示一个由顶点和表面构成的几何形体。 以下两组属性最重要： 属性vertics是一个数组，每个元素是vector3类型的对象，表示一个顶点坐标。属性colors和normals表示和顶点对应的颜色值和发现向量，只有在很少的情况下才使用，大部分情况下，顶点的颜色和发现时在“表面”中定义的——如果立方体的6面颜色各不相同，则每个顶点实在不同的面上是不同的颜色。 属性faces是一个数组，每个元素是face4或face3类型的对象，之前介绍face3的时候说到，face中存储的仅仅是顶点的索引值，通过索引值就可以在数组vertices中取到顶点的坐标值。 下面说函数： applyMatrix(matrix)函数更新geometry中的所有顶点坐标和表面的法线向量，所做的实际上是用变换矩阵matrix对geometry形体进行空间变换。normalMatrix是参数matrix左上角3×3矩阵的逆转置矩阵，该矩阵用来旋转矢量（法线，而不是顶点坐标）。 函数ComputeCentroid()计算几何形体中每个表面的重心（不是几何形体自己的重心）。这个函数似乎应当放到face类的原型上会更好，但是由于face类内部无法获取点的坐标（除非再将点坐标数组的引用作为参数传入构造函数，这样代价就大了）而仅仅是索引值，所以只好在geometry类的原型上定义了。下面几个函数都是类似的情况（事实上，face类几乎没有什么成员函数）。 函数computeFaceNormals()和computeVertexNormals(areaWeight)计算法线向量，前者影响的是face数组中每个元素的normal属性，一个face只有1个；后者face数组中每个元素的vertexNormal属性，一个face3型对象有3个，一个face4型对象有4个，但是需要注意的是，被多个表面共享的顶点，其法线向量只有一个，同时受到多个表面的影响。比如中心在原点，三组表面都垂直于轴的立方体，其第一象限中的顶点，法线向量是(1,1,1)的归一化。虽然看上去不可思议，平面的顶点的法线居然不是垂直于平面的，但这种指定法线的方法在利用平面模拟曲面的时候有很好的效果。 函数createMorphNormal为每一个morph创建法线。morph应该是用作显示固定连续动画的变形效果。 函数mergeVertics将坐标值相同的点剔除，同时更新face对象中的点索引值。 Core::Quaternian 四维数旋转类用另一种方式表达一个旋转变换，相比用rotation，可以避免万向节死锁问题。 如果不谈函数，Quaternian就是一个简单的vector4类型对象。 函数setFromEuler(v,order)通过一次欧拉旋转设置四维数旋转。 函数setFromAxis(axis,angle)通过绕任意轴旋转设定四维数旋转。 函数setFromRotationMatrix(matrix)通过旋转矩阵设置四维数旋转。 还有一些和vector4类相同的函数这里就不列了。

推荐整理分享Three.js源码阅读笔记(Object3D类)(three.js入门指南)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:基于threejs的开源项目,javascript源码阅读,threejs源码解析,three.js typescript,three.js原理,基于threejs的开源项目,基于threejs的开源项目,threejs源码解析,内容如对您有帮助，希望把文章链接给更多的朋友！

Three.js源码阅读笔记(基础的核心Core对象) Three.js是一个比较伟大的webgl开源库，它简化了浏览器3D编程，使得使用JavaScript在浏览器中创建复杂的场景变得容易很多。Github上众多webgldemo令我兴奋不

JS声明变量背后的编译原理剖析 只要是写过点JS代码，很简单一个var就完事了。那对于JS编译器背后它又发生了什么呢？那就一步步通过代码来讲起。x=1;alert(x);vary=function(){alert(x);varx=2;a

JavaScript 盒模型 尺寸深入理解 概念引自维基百科：根据由万维网联盟（W3C）于年发行并于年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定