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

Three.js是一个比较伟大的webgl开源库，它简化了浏览器3D编程，使得使用JavaScript在浏览器中创建复杂的场景变得容易很多。Github上众多webgl demo令我兴奋不已，跃跃欲试。由于这个库还处在开发阶段，因此资料非常匮乏，爱好者大部分时间不得不通过阅读该库的源码进行学习，我现在也准备这样做。 这是第一篇笔记，先从最基础的核心（Core）对象开始。 Core::Vector2 该构造函数用来创建一个表示二维向量的对象 Vector2对象的功能函数采用定义构造函数的原型对象来实现，形如： 函数set(x,y)用以指定向量的值，调用者本身的x，y值被影响了，而该方法本身又返回调用者本身，这种情况很常见，以下不再说明。通过文字能够表述清楚功能的函数不再引用源代码，这一点以下也不再说明。 函数copy(v)用来将向量v复制进调用者。 函数add(a,b)和函数sub(a,b)分别表示对向量a，b相加和相减。 函数addSelf(v)和subSelf(v)分别表示对调用者本身加上或减去向量v。 函数multiplyScale(s)和divideScale(s)分别表示对调用者本身乘以或除以s。 函数lerpSelf(v,alpha)将调用者向v所指的方向旋转alpha，当alpha为1时，调用者最终等于v，而当alpha=0时，调用者还等于原来。 函数negate()对调用者取反。 函数dot(v)返回float类型的调用者和向量v的点乘。 函数lengthSq()和函数length()返回float类型的调用者长度平方或长度。 函数normalize()将调用者本身归一化。 函数distanceToSquared(v)和distanceTo(v)将返回调用者和向量v的距离。这里的距离其实是两向量起点都在原点时，终点之间的距离，也就是向量this-v的长度。 函数setLength(s)将向量的长度缩放至为s，方向不变。 函数equals(v)判断调用者与向量v的值是否相同。 函数isZero()判断调用者是否是零向量。 函数clone()返回一个与调用者值一样的新向量，相当于将其复制出去，注意与copy(v)的区别。 Core::Vector3 该构造函数创建一个表示三维向量的对象 三维向量和二维向量有许多共通之处，比如set，add，dot，length，clone等，此处尽数略去，只记录三维向量比二维向量多出的部分函数。 函数setX(x)，setY(y)和setZ(z)用来单独设置某一分量的值。 函数cross(a,b)和crossSelf(v)分别使调用者变为a，b的叉乘或者调用者本身与v的叉乘。叉乘是一个向量，垂直于参与叉乘的两个向量并呈右手螺旋法则。 函数getPositionFromMatrix(m)，getRotationFromMatrix(m)，getScaleFromMatrix(m)从4×4的模型矩阵中提取位置分量，旋转分量和缩放分量。模型矩阵表示了一系列平移、旋转、缩放变换的叠加效果。（这里第二个函数出现在文档中，在源码中被另外两个函数代替了，也许还没来得及更新）。 函数angleTo(v)计算调用者和向量v的夹角。 Core::Vector4 该构造函数创建一个表示四维向量的对象 四维向量用来表示齐次坐标，其函数和Vector2，Vector3中的函数功能重合，仅仅是多一个分量而已，这里不再记录。 Core::Matrix3 该构造函数创建一个表示3×3矩阵的对象 THREE.Matrix3 = function () { this.elements = new FloatArray(9); }; 3×3矩阵有9个元素，存储在矩阵对象的属性elements中，elements是一个数组。 函数getInverse(m)返回矩阵m的逆矩阵，同时改变调用者本身。 函数transpose()转置调用者。 函数transposeToArray(r)将调用者转置进数组r而不改变自身。（这个地方似乎源码错了，var m=this.m应该为var m=this.elements。） Core::Matrix4 该构造函数创建一个表示4×4矩阵的对象，4×4矩阵在三维图形学中非常重要，模型矩阵、视图矩阵和投影矩阵都是这样的矩阵。 在Matrix3对象中出现的几个函数在Matrix4中有相同的作用，这里也略去。 函数identity()将对象重置为单位阵。 函数lookAt(eye,center,up)将对象设定为一个视图矩阵，参数都是Vector3对象，该矩阵只会用到eye和center的相对位置。该视图矩阵表示，摄像机在eye位置看向center位置，且向上的向量（这一点稍后解释）为up时的视图矩阵。视图矩阵又可以看做摄像机的模型矩阵，所以该函数产生的矩阵又可以表示以下变换：将物体从原点平移至位置center-eye，再将其旋转至向上的向量为up。向上的向量up用来固定相机，可以想象当相机固定在一点，镜头朝向固定方向的时候，还是可以在一个维度里自由旋转的，up向量固定相机的这个维度。 函数multiply(a,b)，multiplySelf(v)和multiplyToArray(a,b,r)将两个矩阵相乘。 函数multiplyScale(s)将对象所有个元素都乘以s。 函数multiplyVector3(v)和multiplyVector4(v)将对象矩阵左乘四维行向量，返回vector3和vector4类型的行向量。如果对象矩阵是模型视图矩阵，输入的向量是点位置信息，则输出的向量则是经过模型变换和相机变换后，该点相对于相机的位置。输入vector3类型向量时，自动补足为齐次坐标，返回时再砍掉第四个分量成为普通坐标。 函数rotateAxis(v)使用对象矩阵左上角的3×3子矩阵左乘行向量v，得到一个新的行向量并归一化，返回这个新行向量。该函数同时更新了向量v的值。模型视图矩阵左上角3×3的子矩阵包含了模型矩阵中的旋转信息，将该子矩阵左乘一个向量，得到的新向量实际上就是原向量经过旋转（该旋转效果来自于模型矩阵）得到的。因此该函数名为rotateAxis。 函数crossVector(v)计算矩阵对象（调用者）和v的叉乘，实际上就是对象矩阵左乘四维行向量v，返回向量。这个具体是做什么的，我还没弄明白。 函数determinant()计算矩阵的行列式值。 函数flattenToArray(flat)和函数flattenToArrayOfset(flat,offset)将矩阵转存到一维数组中，前一个函数从flat[0]存储到flat[]，后一个函数允许指定开始存储的位置，从flat[offset]存储到flat[offset+]。函数getPosition()和函数setPosition()用来获取或设置矩阵对象的位置分量。正如旋转分量存储在左上角3×3的子矩阵中，位置分量存储在第四行前三个分量上，即element[]， element[]， element[]中。 函数getColumeX()，getColumeY()，getColumeZ()分别提取左上角3×3子矩阵的三列。 函数compose(translate,rotation,scale)将对象矩阵设置为由vector3类型translate对象表示的平移、由matrix3类型rotation对象表示的旋转、由vector3类型scale对象表示的缩放这三个变换组合到一起的变换矩阵。实际上就是讲其直接填充到模型矩阵的相应子空间。 函数decompose(translate,rotation,scale)将矩阵对象拆开到三个对象中，和上一个函数正好相反。 函数extractPosition(m)和extractRotation(m)将矩阵对象m中表示位置或旋转的分量抽取到调用者对象中，比如两个物体经过多次各不相同的变换，只需要一个物体的模型视图矩阵extractRotation另一个物体的模型视图矩阵，则调用者就和另外一个物体保持着变换之处相同的旋转方位。函数translate(v)是模型矩阵最基本的变换之一：平移变换，将模型矩阵从属的物体平移向量v。 函数rotateX(angle)，rotateY(angle)，rotateZ(angle)分别将模型矩阵从属的物体绕X，Y，Z轴旋转角度angle。 函数rotateByAxis(axis, angle)将模型矩阵从属的物体绕一个任意轴axis旋转角度angle，这是上面两条所涉及的变换的多次叠加（叠加参数由当前位置和axis参数决定），我在《模型视图矩阵和投影矩阵：webgl笔记(1)》中曾讨论到绕任意轴旋转的问题。 这里不应该有一个scale(s)函数吗？可是我在源码中没找到。 函数makeTranslate(x,y,z)，makeRotationX(theta)，makeRotationY(theta)，makeRotationZ(theta)，makeRotationAxis(axis,angle)，makeScale(s)函数将对象矩阵直接重置为单位阵经过一次平移、或绕某轴旋转、或单纯某次缩放后的矩阵。该函数更新对象本身的值，而且更新的结果与对象之前的值毫无关联（这也是make前缀函数的特点）。 函数makeFrustum(...)，makePerspective(...)，makeOrthographic(...)也是用来初始化新矩阵，具体含义到相机类里面再讨论，我想相机类的构造函数里一定会调用这些函数的。 函数clone()将矩阵对象复制出来并返回。 Core::Face3 该函数创建一个三角形平面对象 对象的a，b，c值是三个顶点的索引（后面会说到，Mesh对象中将所有点存储为一个数组）；顾名思义normal是法线；color是颜色；materialIndex是顶点材质索引：这几个参数即可以传入vector3类型又可以传入数组类型。 clone(x)方法返回一个新的，具有相同值的对象。 Core::Face4 该函数创建一个四个顶点的面，和Face3几乎一样，略去。 Core::Math THREE.Math是一个“静态类”，没有构造函数因此也不需要通过new关键字初始化。该类提供一些必要的数学工具。 函数clamp(x,a,b)将x夹在区间[a,b]中。clampBottom(x,a)的作用类似，只不过只夹一边。 函数mapLinear(x,a1,a2,b1,b2)计算出一个值y，使得点(x,y)落在(a1,a2)和(b1,b2)连成的直线上。 函数random()，randInt(low,high)，randFloat(low,high)，randFloatSpread(range)分别产生[0,1]区间的位随机浮点数，[low,high]区间随机整数，[low,high]区间随机浮点数，[-range/2,range/2]区间随机浮点数。 函数sigh(x)根据x的符号返回+1或-1。 Core::Clock 该构造函数创建时钟（确切的说是秒表）对象 函数start()和stop()用来开始计时或停止计时。 函数getDelta()返回调用该函数时距离上一次调用该函数时的时间长度，如果是第一次调用该函数，则返回此时距离开始计时时的时间长度。如果autoStart值为真，若在调用getDelta()函数时尚未调用start()函数或者已经调用过stop()函数，则自动开始计时并返回0。如果autoStart()值为假，则在调用start()之前或stop()之后，调用getDelta()返回0。函数getElapsedTime()返回调用该函数时距离开始计时时的时间。 Core::Color 该构造函数构造一个表示颜色的对象 函数setHex(hex)以十六进制序列设置对象的r，g，b属性。实际上在对象中，最终是以这三个属性存储颜色的。 函数setRGB(r,g,b)和setHSV(h,s,v)以RGB值或HSV值设置对象。 函数getHex()返回进制颜色值。 函数copyGammaToLinear(color)，copyLinearToGamma(color)将color的rgb值分别平方或开方，赋给调用者对象。 函数convertGammaToLinear()和convertLinearToGamma()分别对调用者自身的rgb值平方或开放。

推荐整理分享Three.js源码阅读笔记(基础的核心Core对象)(three. js)，希望有所帮助，仅作参考，欢迎阅读内容。

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

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

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

javascript学习(一)构建自己的JS库 前言库是一个饱受争议的热门话题。一种观点认为它是一种非常棒的工具，是任何开发者都不可或缺的；另一种观点则认为在不理解库的内部工作原理