npm 包 mat4-recompose 使用教程

mat4-recompose 是一个 JavaScript 库，提供了快速创建、组合和定位 3D 变换矩阵的功能。它使用 WebGL 的 mat4 矩阵，并扩展了一些方便的辅助函数，用于构建和组合矩阵以实现旋转、缩放和平移等操作。

安装和引入

你可以通过 npm 来安装 mat4-recompose：

npm install mat4-recompose

然后在你的 JavaScript 或 TypeScript 代码中引入它：

import { compose, translate, rotateX, rotateY, scale } from "mat4-recompose";

基本用法

mat4-recompose 提供了一系列函数来帮助你快速创建和组合矩阵。下面是一些基本的用例：

创建标准矩阵

const identityMatrix = compose();

这个函数返回一个标准的 4x4 单位矩阵，表示没有任何变换。

平移

const translationMatrix = translate([1.0, 2.0, 3.0]);

这个函数返回一个将物体沿着 x 轴移动 1.0 个单位，y 轴移动 2.0 个单位，z 轴移动 3.0 个单位的矩阵。

缩放

const scaleMatrix = scale([2.0, 2.0, 2.0]);

这个函数返回一个将物体在 x、y 和 z 轴上分别缩放 2 倍的矩阵。

旋转

const rotationMatrix = rotateX(Math.PI / 2);

这个函数返回一个绕 x 轴旋转 90 度的矩阵。你也可以使用 rotateY 和 rotateZ 函数来绕 y 和 z 轴旋转。

组合多个变换

const modelViewMatrix = compose(
  translate([1.0, 2.0, 3.0]),
  rotateX(Math.PI / 2),
  scale([2.0, 2.0, 2.0])
);

这个函数会先进行平移操作，然后是绕 x 轴的旋转和缩放操作。最后返回的矩阵表示按照这些顺序执行这些变换的结果。

深入探索

mat4-recompose 提供了一些额外的函数来帮助你更深入地探索变换矩阵。

变换向量

如果你有一个 3D 向量，并想将它应用到一个 4x4 的变换矩阵上，你可以使用以下函数：

import { transformVector } from "mat4-recompose";

const matrix = ...; // 一个 4x4 变换矩阵
const vector = [1.0, 2.0, 3.0]; // 一个 3D 向量

const transformedVector = transformVector(matrix, vector);

这个函数将向量应用到变换矩阵上，返回变换后的向量。

点积

如果你有两个向量，并想计算它们之间的点积，可以使用以下函数：

import { dot } from "mat4-recompose";

const a = [1.0, 2.0, 3.0];
const b = [4.0, 5.0, 6.0];

const result = dot(a, b); // 返回 32

叉积

如果你有两个向量，并想计算它们之间的叉积，可以使用以下函数：

import { cross } from "mat4-recompose";

const a = [1.0, 2.0, 3.0];
const b = [4.0, 5

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/48328) ，转载请注明来源
[https://www.javascriptcn.com/post/48328](https://www.javascriptcn.com/post/48328)