threejs中矩陣旋轉原理

2021-09-16 12:38:16 字數 2201 閱讀 9398

建立乙個立方體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

axis.normalize()  //返回乙個向量,其方向與指定向量相同,但長度為一。

如:var axis = new three.vector3(10,20,0);

console.log( axis.normalize() ); //

(0.4472135954999579^2)+(0.8944271909999159^2)+(0^2) = 1

var axis1 = new three.vector3(1,1,0);

console.log( axis1.normalize() ) //

(0.7071067811865475^2)+(0.7071067811865475^2)+(0^2) = 1

建立乙個4*4的矩陣
var rotworldmatrix = new three.matrix4();

將上面建立的4×4矩陣按照傳入的軸旋轉傳入的弧度

rotworldmatrix.makerotationaxis( 旋轉軸,旋轉弧度 )

//matrix4原型上的方法

//axis = axis.normalize() 值為

//angle = 30 * math.pi / 180 值為 pi/6

makerotationaxis: function ( axis, angle ) ,

rotworldmatrix.makerotationaxis(axis.normalize(), 30 * math.pi / 180 );

rotworldmatrix初始值為

執行makerotationaxis()之後的值為:

將按照旋轉軸和弧度旋轉完成的矩陣和幾何體的矩陣相乘

rotworldmatrix.multiply(cube.matrix);

//框架原始碼

multiply: function ( m, n )

return this.multiplymatrices( this, m );

},multiplymatrices: function ( a, b ) ,

openGL矩陣複習 旋轉矩陣的原理

以繞x軸旋轉為例 很明顯,繞x軸旋轉,x值是不會變化的,所以矩陣第一行是和單位矩陣一樣的.繞x軸旋轉,實際上就是在下圖的座標系裡面旋轉乙個二維向量.從紅色向量旋轉到綠色向量.通常我們以 x,y 這種形式來表示向量,但在旋轉向量這裡,使用三角函式來表示,更加容易理解,也更方便計算.紅色向量用三角函式表...

ThreeJS中CameraHelper的使用

參考 想達到這種效果,都必須使用2個相機。就如上圖2所示,螢幕相機的投影是整個螢幕 左右兩個小視窗共同組成 帶相機助手的投影是左面的畫面。偽 螢幕相機 let camera newthree.perspectivecamera 45 1,0.01 300 camera.position.set 1 ...

矩陣運算 矩陣旋轉

以下不加證明地給出在世界座標系中,以座標點 0,0,0 為原點的旋轉矩陣 包含平移的線性變換稱作仿射變換,3d中的仿射變換不能用 3 x 3 矩陣表達,必須使用4 x 4矩陣 1.繞x座標軸旋轉 1 0 0 0 0 cos a sin a 0 0 sin a cos a 0 0 0 0 1 2.繞y...