threejs中矩阵旋转原理
矩阵的概念
threejs中的矩阵
矩阵的应用
用于旋转一个几何体
创建一个立方体cube放到场景中;
绕向量(1,1,0)旋转30度
var axis = new THREE.Vector3(1,1,0); //创建一个三维向量 var rotWorldMatrix = new THREE.Matrix4(); //创建一个4*4矩阵 rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 ); rotWorldMatrix.multiply(cube.matrix); // pre-multiply cube.matrix = rotWorldMatrix; cube.rotation.setFromRotationMatrix(cube.matrix);
旋转之前与之后对比
- 向量一定是从几何体中心指向外面?
- 能围绕一个不以圆点位起点的向量旋转?
代码详解
创建一个三维空间中的点
var axis = new THREE.Vector3(1,1,0);
打印出axios
THREE.Vector3(1,1,0).normalize()
axis.normalize() //返回一个向量,其方向与指定向量相同,但长度为一。 如: var axis = new THREE.Vector3(10,20,0); console.log( axis.normalize() ); //{x: 0.4472135954999579, y: 0.8944271909999159, z: 0} (0.4472135954999579^2)+(0.8944271909999159^2)+(0^2) = 1 var axis1 = new THREE.Vector3(1,1,0); console.log( axis1.normalize() ) //{x: 0.7071067811865475, y: 0.7071067811865475, z: 0} (0.7071067811865475^2)+(0.7071067811865475^2)+(0^2) = 1
创建一个4*4的矩阵
var rotWorldMatrix = new THREE.Matrix4(); console.log( rotWorldMatrix )
将上面创建的4×4矩阵按照传入的轴旋转传入的弧度
rotWorldMatrix.makeRotationAxis( 旋转轴,旋转弧度 )
//Matrix4原型上的方法 //axis = axis.normalize() 值为 {x: 0.7071067811865475, y: 0.7071067811865475, z: 0} //angle = 30 * Math.PI / 180 值为 pi/6 makeRotationAxis: function ( axis, angle ) { var c = Math.cos( angle ); //Math.cos(π/6) var s = Math.sin( angle ); //Math.sin(π/6) var t = 1 - c; var x = axis.x, y = axis.y, z = axis.z; var tx = t * x, ty = t * y; this.set( tx * x + c, tx * y - s * z, tx * z + s * y, 0, tx * y + s * z, ty * y + c, ty * z - s * x, 0, tx * z - s * y, ty * z + s * x, t * z * z + c, 0, 0, 0, 0, 1 ); return this; },
rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 );
rotWorldMatrix初始值为{ elements:[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] }
执行makeRotationAxis()之后的值为:
将按照旋转轴和弧度旋转完成的矩阵和几何体的矩阵相乘
rotWorldMatrix.multiply(cube.matrix);
//框架源码 multiply: function ( m, n ) { if ( n !== undefined ) { //这里的n是undefined因为只传入一个值cube.matrix return this.multiplyMatrices( m, n ); } return this.multiplyMatrices( this, m ); }, multiplyMatrices: function ( a, b ) { var ae = a.elements; //rotWorldMatrix.elements var be = b.elements; //cube.matrix.elements var te = this.elements; //ae和te是全等的 var a11 = ae[ 0 ], a12 = ae[ 4 ], a13 = ae[ 8 ], a14 = ae[ 12 ]; var a21 = ae[ 1 ], a22 = ae[ 5 ], a23 = ae[ 9 ], a24 = ae[ 13 ]; var a31 = ae[ 2 ], a32 = ae[ 6 ], a33 = ae[ 10 ], a34 = ae[ 14 ]; var a41 = ae[ 3 ], a42 = ae[ 7 ], a43 = ae[ 11 ], a44 = ae[ 15 ]; var b11 = be[ 0 ], b12 = be[ 4 ], b13 = be[ 8 ], b14 = be[ 12 ]; var b21 = be[ 1 ], b22 = be[ 5 ], b23 = be[ 9 ], b24 = be[ 13 ]; var b31 = be[ 2 ], b32 = be[ 6 ], b33 = be[ 10 ], b34 = be[ 14 ]; var b41 = be[ 3 ], b42 = be[ 7 ], b43 = be[ 11 ], b44 = be[ 15 ]; te[ 0 ] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41; te[ 4 ] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42; te[ 8 ] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43; te[ 12 ] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44; te[ 1 ] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41; te[ 5 ] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42; te[ 9 ] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43; te[ 13 ] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44; te[ 2 ] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41; te[ 6 ] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42; te[ 10 ] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43; te[ 14 ] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44; te[ 3 ] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41; te[ 7 ] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42; te[ 11 ] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43; te[ 15 ] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44; return this; },
相关推荐
sasac 2020-09-25
huangjie0 2020-09-25
cloudking000 2020-09-11
xiaoxiaokeke 2020-07-28
mingyunxiaohai 2020-07-28
honghao0 2020-07-27
风吹夏天 2020-07-26
夕加加 2020-07-20
CallmeZhe 2020-06-29
zhoujiyu 2020-06-28
清风徐来水波不兴 2020-06-16
Happyunlimited 2020-06-15
wanff0 2020-06-14
cuiguanjun 2020-06-13
啸林 2020-06-12
jiayuqicz 2020-06-09
章鱼之家 2020-06-08
guangmingsky 2020-06-05