簡介
這個矩陣提供了常見的三維變換矩陣(旋轉、縮放、移動等)的運算,可以直接用於webgl或three.js等前端3D技術相關。
本工具本身是平臺無關的,可以在所有支援JS和TS的環境中使用,包括H5、各種小程式、uni-app等。
溫馨提示:使用中如果遇到任何問題,都可以點選此處給我們提Issue。
引入
你需要執行下面的安裝命令:
npm install --save jsdoor
然後在需要使用地方引入:
import Matrix4 from 'jsdoor/Matrix4/index.js';
建立例項物件
Matrix4是一個列主序儲存的4x4矩陣,使用該矩陣物件的第一步是像下面這樣獲取該物件,引數initMatrix4可選,你可以傳遞一個初始化矩陣或預設採用單位矩陣E初始化。
var matrix4=Matrix4(initMatrix4);
變換不是直接作用在具體的點上,而是先求解出一系列變換的變換矩陣,最後應用在具體點上。
基本運算
value
返回matrix4當前記錄的內部矩陣:
var val=matrix4.value();
比如採用預設值初始化的矩陣物件,列印結果如下:
(16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
multiply
兩個矩陣相乘:
matrix4.multiply(newMatrix4[, flag]);
第一個引數應該是一個和value列印出來一樣格式的一維陣列,列主序儲存。flag預設false,可不傳,表示左乘,即newMatrix4 × matrix4,如果設定flag為true,表示右乘。
use
把變換矩陣作用在具體的點上:
var position=matrix4.use(x, y, z, w);
矩陣的目的是對座標進行變換,use方法返回齊次座標(x, y, z, w)經過matrix4矩陣變換後的座標值。其中z和w可以不傳遞,預設0和1,返回的座標值是一個齊次座標。
座標變換
move
沿著向量(a, b, c)方向移動距離dis(其中c可以不傳,預設0):
matrix4.move(dis, a, b, c);
scale
以點(cx, cy, cz)為中心,分別在x、y和z方向上縮放xTimes、yTimes和zTimes倍(其中cx、cy和cz都可以不傳遞,預設0):
matrix4.scale(xTimes, yTimes, zTimes, cx, cy, cz);
rotate
圍繞射線(a1, b1, c1) -> (a2, b2, c2)旋轉deg度(方向由右手法則確定):
matrix4.rotate(deg, a1, b1, c1, a2, b2, c2);
a1、b1、c1、a2、b2和c2這6個值在設定的時候,不是一定需要全部設定,還有以下可選:
- 只設定了a1和b1,表示在xoy平面圍繞(a1, b1)旋轉。
- 設定三個點(設定不足六個點都認為只設定了三個點),表示圍繞從原點出發的射線旋轉