简介
这个矩阵提供了常见的三维变换矩阵(旋转、缩放、移动等)的运算,可以直接用于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)旋转。
- 设置三个点(设置不足六个点都认为只设置了三个点),表示围绕从原点出发的射线旋转