共计 1191 个字符,预计需要花费 3 分钟才能阅读完成。
简介
这个矩阵提供了常见的三维变换矩阵(旋转、缩放、挪动等)的运算,能够间接用于 webgl 或 three.js 等前端 3D 技术相干。
本工具自身是平台无关的,能够在所有反对 JS 和 TS 的环境中应用,包含 H5、各种小程序、uni-app 等。
舒适提醒:应用中如果遇到任何问题,都能够点击此处给咱们提 Issue。
引入
你须要执行上面的装置命令:
npm install --save jsdoor
而后在须要应用中央引入:
import Matrix4 from 'jsdoor/Matrix4/index.js';
创立实例对象
Matrix4 是一个列主序存储的 4 ×4 矩阵,应用该矩阵对象的第一步是像上面这样获取该对象,参数 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)旋转。
- 设置三个点(设置有余六个点都认为只设置了三个点),示意围绕从原点登程的射线旋转