Three.js源码解读一：Object3D

前言

可能很多同学会发现，学习Three.js的API非常容易，但是真正理解API的作用却非常难。其实让大家感到难的并不是Three.js本身，而是Three.js背后所隐藏的3D图形学知识。本系列Three.js源码解读文章，会帮你一边补齐3D图形学的基础知识，一边真正理解到Three.js的实现原理，知其然，知其所以然。

正文

Object3D是ThreeJS中大部分物体的基类，它包含了物体的位移，旋转，缩放，以及各个物体父子关系的js实现。选取Object3D几个重要的属性做解释：

对象组合

• parent 父对象
• children 子对象
• matrixWorld 全局形变
• matrix 本地形变

一个3D对象往往由多个父子对象组成，父对象的位移, 旋转, 缩放会传递给所有的子对象。
this.parent指向父对象，this.children包含了所有的子对象。

对象组合

通过add为物体添加子对象。需要注意的是，如果该子对象有其他的父对象，会先解除子对象和旧的父对象的父子关系，然后将子对象添加到新的父对象中。

this.matrix表示物体自身的本地形变，this.matrixWorld表示物体的全局形变。当物体没有父对象时，全局形变就是本地形变。

//本地形变
this.matrix = local transform
//全局形变
this.matrixWorld = this.parent ? this.parent.matrixWorld * this.matrix : this.matrix

为什么对象组合这么重要呢？看下面的例子：

父子对象

这两个立方体共同组成了一个3D对象，下面的立方体为底座，上面的立方体为操作臂。当底座转动的时候，操作臂会同样转动，所以操作臂的形变会传递给底座。当操作臂旋转时，底座不会被影响。
这里，底座就是操作臂的父对象。只要简单的将底座的全局形变(this.parent.matrixWorld)和操作臂的本地形变(this.matrix)相乘，就能得到操作臂的最终形变。是不是很方便？

形变的数学表示

3D物体的位移，旋转，缩放都可以通过矩阵表示。其中，旋转除了通过矩阵，还可以通过欧拉角和四元数表示。

旋转

• rotation
• quaternion

Object3D的rotation代表物体旋转的欧拉角表示，quaternion代表了四元数表示，他们是3D物体统一旋转的不同数学表达方式。(矩阵，欧拉角，四元数表示旋转

的区别可以参考[这里](TODO))

onRotationChange, onQuaternionChange这两个回调用于同步欧拉角和四元数，保证他们代表着相同的旋转角度。

位移

• position
  position表示物体的位移，通过一个3维向量表示。为什么不用位移矩阵表示呢？3维向量只需3个数就是表示，而位移矩阵需要16(4x4)个数，节省了4/5的内存空间。

缩放

• scale
  scale表示物体的缩放，同position类似，也通过一个3维向量表示。

形变的数学计算

• applyMatrix
  这个方法做了两件事，为物体加上形变this.matrix = this.matrix * transformMatrix，然后物体的形变拆分为位移，旋转，缩放，存放在相应的position, quaternion, 和scale中。

旋转

• applyQuaternion
  通过四元数旋转物体。
• setRotationFromEuler
  通过将欧拉角转换为四元数来旋转物体。
• setRotationFromMatrix
  通过将传入的旋转矩阵转换为四元数来旋转物体。

TODO
* setRotationFromQuaternion

• rotateOnAxis
  将物体绕轴旋转。具体实现中，通过将旋转轴和旋转角转换成四元数来实现旋转。
• rotateX, rotateY, rotateZ
  这三个方法是rotateOnAxis的具体化，即让物体绕X, Y, Z轴旋转。

位移

• translateOnAxis
  这个方法提供了让物体基于本地空间进行位移的功能。由于物体发生过旋转，因此需要先将位移的目标向量进行同样的旋转，然后再相加：

var v1 = new Vector3();
//将axis旋转，旋转量为物体自身已经发生过的旋转。默认axis是一个已经标准化的向量
v1.copy( axis ).applyQuaternion( this.quaternion );
//v1*distance得到了需要位移量，和this.position相加就得到了更新后的位移量
this.position.add( v1.multiplyScalar( distance ) );

• translateX，translateY，translateZ
  这三个方法是translateOnAxis的具体化，即让物体沿X, Y, Z轴位移。

形变矩阵

3D交互一个很大一部分工作量是需要在物体的本地空间(this.matrix)和世界空间(this.matrixWorld)进行坐标转换。

• localToWorld
  将向量或矩阵转化到世界空间。实现非常简单，只需将目标向量或矩阵和世界矩阵相乘即可

// [Target] * [WORLD]
vector.applyMatrix4(this.matrixWorld)

• worldToLocal
  将向量或矩阵从世界空间转化到本地空间。根据矩阵原理，只需要乘上世界矩阵的逆矩阵即可。

// [Target] * [WORLD]*[WORLD]^(-1)
vector.applyMatrix4(m1.getInverse(this.matrixWorld))

• getWorldPosition
  获取对象在世界空间中的位移
• getWorldQuaternion
  获取物体在世界空间中的旋转，结果以四元数返回
• getWorldRotation
  同getWorldQuaternion相似，结果以欧拉角返回
• getWorldScale
  获取物体在世界空间中的缩放，结果以三维向量返回

TODO
* getWorldDirection

• updateMatrix
  将this.position, this.quaternion, this.scale和this.matrix同步。
• updateMatrixWorld
  更新世界矩阵。如果父对象发生了形变，那么他的形变需要传递到下面所有的子对象 。this.matrixWorld保存了物体在世界空间的形变，这个形变也是需要传递给所有子对象的形变。

// this.matrixWorld = this.parent.matrixWorld * this.matrix
this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );
//将形变传递给所有子对象
for ( var i = 0, l = this.children.length; i < l; i ++ ) {
    this.children[ i ].updateMatrixWorld( force );
}