列主序存储的4x4坐标变换矩阵

简介

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

你可能感兴趣的:(列主序存储的4x4坐标变换矩阵)