列主序儲存的4x4座標變換矩陣

zxl20070701發表於2023-01-17

簡介

這個矩陣提供了常見的三維變換矩陣(旋轉、縮放、移動等)的運算,可以直接用於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)旋轉。
  • 設定三個點(設定不足六個點都認為只設定了三個點),表示圍繞從原點出發的射線旋轉

相關文章