前言
可能很多同学会发现，学习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 );
}
