three.js 学习笔记之 混乱的矩阵

要搞清楚three.js 的矩阵变换，看官方的文档和例子是远远不够的，因为他们不够详细，还得看看threejs的源代码才能理解。

首先得整明白three.js 最核心的两个类Object3D 和Matrix4

Object3d里的方法相对于Matrix4更加高级，其实操作的还是矩阵中的方法，所以

先来看看Matrix4的结构

Matrix4.elements 是个大小为1*16的数组 

[x1,x2,x3,x4,

y1,y2,y3,y4,

z1,z2,z3,z4,

px,py,pz,1]

剩下都是矩阵操作的方法，下面先列出Matrix4的常用函数

getInverse(m,throwOnInvertible) 

设置自身的matrix为m的逆矩阵

setPosition(v) 

分别设置elements[12],[13],[14] （即上面的px，py，pz）为v.x,v.y,v.z

multiplyMatrices(a,b) 

设置自身的matrix为a,b的乘积

multiply(m) 

相当于multiplyMatrices(this,m) 我经常误以为效果会是multiplyMatrices(m,this)

makeRotationFromQuaternion(q)

千万别以为是旋转自身的matrix 这里把我坑死了，实际上它相当于旋转初始矩阵，覆盖当前矩阵的操作，如果你希望旋转当前矩阵应该这么做

matrix.multiplyMatrices(new THREE.Matrix4().makeRotationFromQuaternion(q),matrix);

方法名带make的都是如此

makeRotationFromEuler(euler)

同样也是对初始矩阵的旋转

makeRotationX(angle) 同上
makeRotationY(angle) 同上
makeRotationZ(angle) 同上

makeRotationAxis(axis,angle) 同上

makeTranslation(x,y,z) 同样它相当于平移初始矩阵并且覆盖当前矩阵

makeScale(x,y,z) 同上

scale(v)

和上面的缩放不一样

它会对每个轴的分量分别相乘

x1*=v.x x2*=v.x x3*=v.xx4*=v.x y1*=v.yy2*=v.y and so on

multiplyScalar(s)

对elements所有元素分别*=s。看到这里相信你一定已经绕晕了，实践一下慢慢熟悉他们

compose(position,quaternion,scale) 

替换自身的matrix为 由object3d的position,quaternion,scale组成的matrix

decompose(position,quaternion,scale) 

分解自身的matrix到这三个变量

transpose 

转置矩阵

待续