three.js 数学方法之Matrix3
今天郭先生来说一说three.js的三维矩阵,这块知识需要结合线性代数的一些知识,毕业时间有点长,线性代数的知识大部分都还给了老师。于是一起简单的复习了一下。
所有的计算都是使用列优先顺序进行的。然而,由于实际的排序在数学上没有什么不同, 而且大多数人习惯于以行优先顺序考虑矩阵,所以three.js文档以行为主的顺序显示矩阵。 请记住,如果您正在阅读源代码,您必须对这里列出的任何矩阵进行转置transpose,以理解计算。例如:
var matrix3 = new THREE.Matrix3().set( 1,2,3,4,5,6,7,8,9);
//而其内部elements则展示为:
matrix3.elements = [1,4,7,2,5,8,3,6,9];
1. Matrix3的属性
1. elements : Array
矩阵列优先column-major列表。
2. isMatrix3 : Boolean
用于判定此对象或者此类的派生对象是否是三维矩阵。默认值为 true。
2. Matrix3的方法
1. set(n11: number,n12: number,n13: number...): Matrix3
三维矩阵不能在构造函数中直接设置参数值,需要通过set()方法设置,set()方法参数采用行优先row-major, 而它们在内部是用列优先column-major顺序存储在数组当中。代码如上面所示。
2. identity(): Matrix3
将此矩阵重置为3x3单位矩阵。
var matrix = new THREE.Matrix3();
matrix.identity();//返回elements: (9) [1, 0, 0, 0, 1, 0, 0, 0, 1]
3. clone(): this
创建一个新的矩阵,元素 elements 与该矩阵相同。不多说。
4. copy( m: Matrix3 ): this
将矩阵m的元素复制到当前矩阵中。不多说。
5. extractBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3 ): Matrix3
将此矩阵的基提取到提供的三个轴向量中。
var matrix = new THREE.Matrix3();
matrix.set( 1,2,3,4,5,6,7,8,9);
var a = new THREE.Vector3();
var b = new THREE.Vector3();
var c = new THREE.Vector3();
matrix.extractBasis(a, b, c);
console.log(a,b,c);//返回Vector3 {x: 1, y: 4, z: 7} Vector3 {x: 2, y: 5, z: 8} Vector3 {x: 3, y: 6, z: 9}
6. setFromMatrix4( m: Matrix4 ): Matrix3
将当前矩阵设置为4X4矩阵m左上3X3,
var matrix = new THREE.Matrix3();
var matrix4 = new THREE.Matrix4().makeScale(2,2,2);
matrix.setFromMatrix4(matrix4)//elements: (9) [2, 0, 0, 0, 2, 0, 0, 0, 2]
7. multiplyScalar( s: number ): Matrix3
当前矩阵所有的元素乘以该缩放值s
var matrix = new THREE.Matrix3();
matrix.set( 1,2,3,4,5,6,7,8,9);
matrix.multiplyScalar(2)//elements: (9) [2, 8, 14, 4, 10, 16, 6, 12, 18]
8. determinant(): number
计算并返回矩阵的行列式determinant 。
var matrix = new THREE.Matrix3();
matrix.set( 1,2,3,4,5,6,7,8,9);
matrix.determinant()//返回0
计算方法a11 a22 a33 + a12 a23 a31 + a13 a21 a32 - a13 a22 a31 - a12 a21 a33 - a11 a23 a32 = 0;
9. getInverse( matrix: Matrix3, throwOnDegenerate?: boolean ): Matrix3
求传入矩阵m的逆矩阵,使用解析法将该矩阵设置为传递矩阵m的逆矩阵。行列式为零的矩阵不能求逆。如果您尝试这样做,该方法将返回一个零矩阵。
var matrix1 = new THREE.Matrix3();
var matrix2 = new THREE.Matrix3();
matrix1.set(1,2,3,4,5,6,7,8,9);
matrix2.set(1,1,0,0,1,1,0,0,1);
new THREE.Matrix3().getInverse(matrix1)//因为行列式的值为0,所以返回零矩阵elements: (9) [0, 0, 0, 0, 0, 0, 0, 0, 0]
new THREE.Matrix3().getInverse(matrix2)//因为行列式的值不为0,所以返回elements: (9) [1, 0, 0, -1, 1, 0, 1, -1, 1]
求逆矩阵的方法有很多,可以通过伴随矩阵求逆矩阵,也可以行做差来构造逆矩阵。
10. transpose(): Matrix3
将该矩阵转置。
var matrix = new THREE.Matrix3();
matrix.set(1,1,0,0,1,1,0,0,1);//返回elements: (9) [1, 0, 0, 1, 1, 0, 0, 1, 1];
matrix.transpose();
console.log(matrix);//返回elements: (9) [1, 1, 0, 0, 1, 1, 0, 0, 1];
11. getNormalMatrix( matrix4: Matrix4 ): Matrix3
将这个矩阵设置为给定矩阵的正规矩阵normal matrix(左上角的3x3)。 正规矩阵是矩阵m的逆矩阵inverse 的转置transpose。
this.setFromMatrix4( matrix4 ).getInverse( this ).transpose();
上面试three.js的源码,从源码可以看出这是setFromMatrix4,getInverse和transpose的组合用法。
var matrix = new THREE.Matrix3();
var matrix4 = new THREE.Matrix4().makeScale(2,2,2);
matrix.getNormalMatrix(matrix4);//返回elements: (9) [0.5, 0, 0, 0, 0.5, 0, 0, 0, 0.5]
12. transposeIntoArray( r: number[] ): Matrix3
将当前矩阵的转置Transposes存入给定的数组array : Array但不改变当前矩阵, 并返回当前矩阵。
var matrix = new THREE.Matrix3();
matrix.set(1,1,0,0,1,1,0,0,1);
var array = [];
matrix.transposeIntoArray(array);
console.log(array);//返回[1, 1, 0, 0, 1, 1, 0, 0, 1]
13. setUvTransform( tx: number, ty: number, sx: number, sy: number, rotation: number, cx: number, cy: number ): Matrix3
tx - x偏移量
ty - y偏移量
sx - x方向的重复比例
sy - y方向的重复比例
rotation - 旋转(弧度)
cx - 旋转中心x
cy - 旋转中心y
使用偏移,重复,旋转和中心点位置设置UV变换矩阵。
var matrix = new THREE.Matrix3();
matrix.setUvTransform(0,0,0,0,0,0.5,0.5);
console.log(matrix);//返回elements: (9) [0, -0, 0, 0, 0, 0, 0.5, 0.5, 1]
14. equals( matrix: Matrix3 ): boolean
如果矩阵m 与当前矩阵所有对应元素相同则返回true。
15. fromArray( array: number[], offset?: number ): Matrix3
使用基于列优先格式column-major的数组来设置该矩阵。
var matrix = new THREE.Matrix3();
matrix.fromArray([1,4,7,2,5,8,3,6,9]);//因为是基于列优先原则,所以设置的数组和elements属性相同,不需转置。
16. toArray( array?: number[], offset?: number ): number[]
使用列优先column-major格式将此矩阵的元素写入数组中。这是fromArray的逆运算。
var matrix = new THREE.Matrix3();
matrix.set(1,2,3,4,5,6,7,8,9);
matrix.toArray(array);
console.log(array);//返回[1, 4, 7, 2, 5, 8, 3, 6, 9]
17. multiply( m: Matrix3 ): Matrix3
将当前矩阵乘以矩阵m。
var matrix1 = new THREE.Matrix3();
var matrix2 = new THREE.Matrix3();
matrix1.set(1,2,3,4,5,6,7,8,9);
matrix2.setFromMatrix4(new THREE.Matrix4().makeScale(0.5, 0.5, 0.5));//通过4维矩阵,得到三维矩阵
matrix1.multiply(matrix2);//返回elements: (9) [0.5, 2, 3.5, 1, 2.5, 4, 1.5, 3, 4.5]
18. premultiply( m: Matrix3 ): Matrix3
将矩阵m乘以当前矩阵。和上面相比这是左乘和右乘的问题,不多说。
19. multiplyMatrices( a: Matrix3, b: Matrix3 ): Matrix3
设置当前矩阵为矩阵a x 矩阵b。和上面的方法差不多,不多说。
20. multiplyVector3( vector: Vector3 ): any
和Vector3.applyMatrix3一样
var matrix1 = new THREE.Matrix3();
matrix1.set(1,2,3,4,5,6,7,8,9);
var vector3 = new THREE.Vector3(1,2,3);
matrix1.multiplyVector3(vector3);//返回Vector3 {x: 14, y: 32, z: 50}
这就是Matrix3的一些属性和方法,Matrix3理解起来比Vector3确实更困难,同时功能更强大。它让three更灵活强大。
转载请注明地址:郭先生的博客
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 蓝桥杯 试题 基础练习 FJ的字符串
- 蓝桥杯 试题 基础练习 龟兔赛跑预测
- 问题 1432: [蓝桥杯][2013年第四届真题]剪格子
- 问题 1426: [蓝桥杯][历届试题]九宫重排
- mock测试及jacoco覆盖率
- HDU 1495 非常可乐 最简单的的解决方案
- Performing Push Install adb: error: failed to get feature set: more than one 解决方案
- Shell Style Guide
- 10分钟搞定OAuth2.0授权服务
- IP 地址大解密
- 曾经,我以为我很懂MySQL索引
- AES加解密工具类AESUtil记录
- iOS逆向之使用unc0ver越狱 iOS13.5
- Spring @Autowired npe example:Why your Spring @Autowired component is null
- Spring JPA 查询创建