Three.js 矩阵 Matrix4

Question

如果你有线性代数的基础，自然对象矩阵并不陌生，如果对大学所学的线性代数具体知识已经忘记了也没有关系，Three.js的矩阵库对常见的矩阵运算都进行了封装，如果不是为了封装或扩展3D引擎，只是开发一些常见 3D 项目，你只需要有一些基本的概念，会调用矩阵对象Matrix相关的方法就可以。

创建向量对象

通过矩阵对象的 elements 属性可以访问矩阵元素的具体指，如果创建的时候构造函数没有设置具体的值，构造函数实例化的时候会自动设置一个默认值。

4x4 矩阵 Matrix4

// 创建一个4x4矩阵对象
var mat4 = new THREE.Matrix4()
// 默认值单位矩阵
// 1, 0, 0, 0,
// 0, 1, 0, 0,
// 0, 0, 1, 0,
// 0, 0, 0, 1
console.log('查看矩阵对象默认值', mat4.elements);

属性 elements 和方法 .set()

需要通过 Matrix4 对象表示的一个4x4矩阵

 | 1  0  0  5 |
 | 0  1  0  3 |
 | 0  0  1  9 |
 | 0  0  0  1 |

通过 .set() 方法重置矩阵的元素值，执行.set()方法，本质上改变的就是矩阵elements属性值，这里注意set方法的参数顺序是按行设置一个矩阵的元素值。

mat4.set(
  1, 0, 0, 5,
  0, 1, 0, 3,
  0, 0, 1, 9,
  0, 0, 0, 1
)

通过elements属性重置矩阵的元素值，elements的属性值是一个矩阵对象，里面的元素按列设置一个矩阵的元素值。

mat4.elements=[
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  5, 3, 9, 1
]

转置矩阵 .transpose()

矩阵对象执行方法.transpose()按照一定算法改变的自身.elements属性值。

// 创建一个4X4矩阵
var mat4 = new THREE.Matrix4();
mat4.set(1,0,0,5,0,1,0,3,0,0,1,9,0,0,0,1);
//转置矩阵
mat4.transpose();
console.log('查看mat4的转置矩阵',mat4.elements);

为了不改变原矩阵，可以先执行克隆.clone方法返回一个和原矩阵完全一样的矩阵。

// 创建一个4X4矩阵
var mat4 = new THREE.Matrix4();
mat4.set(1,0,0,5,0,1,0,3,0,0,1,9,0,0,0,1);
// 先克隆，避免改变原矩阵mat4
var mat4T = mat4.clone()
//转置矩阵，
mat4T.transpose();
console.log('查看mat4的转置矩阵',mat4T.elements);

.multiplyScalar()

矩阵的每个元素乘以.multiplyScalar()方法的参数。

// 创建一个4X4矩阵
var mat4 = new THREE.Matrix4();
mat4.set(1,0,0,5,0,1,0,3,0,0,1,9,0,0,0,1);
// 矩阵乘以标量
mat4.multiplyScalar(10);
console.log('查看矩阵乘以标量后的结果', mat4.elements);

矩阵乘法

• c.multiplyMatrices(a,b):参数中两个矩阵相乘axb，结果保存在c中
• a.multiply(b):矩阵相乘axb，结果保存在a
• a.premultiply(b):矩阵相乘bxa，结果保存在a

// 矩阵乘法运算
var mat41 = new THREE.Matrix4()
mat41.set(1,2,0,0,0,0,0,8,0,3,5,0,0,0,0,0)
var mat42 = new THREE.Matrix4()
mat42.set(1,2,0,0,0,2,3,0,7,0,0,8,0,3,5,0)
// mat43保存计算结果
var mat43 = new THREE.Matrix4()
// 矩阵乘法运算：mat41xmat42
mat43.multiplyMatrices(mat41,mat42)
console.log('查看mat43', mat43.elements);

逆矩阵 getInverse

计算逆矩阵需要注意矩阵首先是可逆的，如果矩阵不可逆执行该方法会报错

计算可逆矩阵的逆矩阵

var mat4 = new THREE.Matrix4();
// 可逆矩阵
mat4.elements=[1,0,0,0,0,1,0,0,0,0,1,0,5,3,9,1]
// mat4I用来保存mat4逆矩阵计算结果
var mat4I = new THREE.Matrix4();
mat4I.getInverse(mat4, true);
// 控制台查看矩阵的逆矩阵
console.log('mat4I', mat4I.elements);

不可逆矩阵报错

var mat4 = new THREE.Matrix4();
// 不可逆矩阵
mat4.elements = [0,0,0,0,0,0,0,0,0,0,0,0,5,3,9,1];
// mat4I用来保存mat4逆矩阵计算结果
var mat4I = new THREE.Matrix4();
mat4I.getInverse(mat4, true);
// 控制台查看矩阵的逆矩阵
console.log('mat4I', mat4I.elements);

行列式 .determinant()

通过 .determinant() 方法计算矩阵行列式的值

var mat = new THREE.Matrix4()
mat.set(1,2,0,0,0,2,3,0,7,0,0,8,0,3,5,0)
// 计算矩阵行列式的值
var determinant = mat.determinant()
console.log('行列式', determinant);

对象属性值

相关矩阵属性可以参考网格模型Mesh的基类 Object3D。

var mesh = new THREE.Mesh();
console.log('本地矩阵', mesh.matrix);
console.log('世界矩阵', mesh.matrixWorld);
console.log('模型视图矩阵', mesh.modelViewMatrix);
// .normalMatrix属性值是3X3矩阵Matrix3
console.log('法线矩阵', mesh.normalMatrix);

相机对象的投影矩阵属性 .projectionMatrix 和视图矩阵属性 .matrixWorldInverse。

// 创建相机对象
var camera = new THREE.OrthographicCamera(-20, 20, 10, -10, 1, 1000);
console.log('视图矩阵', camera.matrixWorldInverse);
console.log('投影矩阵', camera.projectionMatrix);