关于前端:列主序存储的4×4坐标变换矩阵

30次阅读

共计 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)旋转。
  • 设置三个点(设置有余六个点都认为只设置了三个点),示意围绕从原点登程的射线旋转

正文完
 0