如何理解cocos creator中的worldMatrix（下）

前端

2024-01-06 07:42:16

场景准备

新建一个cocos项目，在层级管理器Canvas下依次完成以下节点建立。

创建一个立方体节点，命名为“Cube”。
在“Cube”节点下创建子节点，命名为“Child”。
将“Child”节点的局部位置设置为(100, 100, 0)。
将“Child”节点的局部旋转设置为(0, 45, 0)。
将“Cube”节点的局部位置设置为(200, 200, 0)。
将“Cube”节点的局部旋转设置为(0, 90, 0)。

矩阵变换

接下来，我们将分别计算“Child”节点和“Cube”节点的世界矩阵。

计算“Child”节点的世界矩阵

计算“Child”节点的局部矩阵。
计算“Cube”节点的局部矩阵。
将“Cube”节点的局部矩阵与“Child”节点的局部矩阵相乘，得到“Child”节点的世界矩阵。

const childLocalMatrix = cc.mat4.create();
const cubeLocalMatrix = cc.mat4.create();
const childWorldMatrix = cc.mat4.create();

cc.mat4.fromRotationTranslationScale(childLocalMatrix, childRotation, childPosition, childScale);
cc.mat4.fromRotationTranslationScale(cubeLocalMatrix, cubeRotation, cubePosition, cubeScale);
cc.mat4.multiply(childWorldMatrix, cubeLocalMatrix, childLocalMatrix);

计算“Cube”节点的世界矩阵

计算“Cube”节点的局部矩阵。
将“Cube”节点的局部矩阵与“Cube”节点的父节点（Canvas节点）的世界矩阵相乘，得到“Cube”节点的世界矩阵。

const cubeLocalMatrix = cc.mat4.create();
const canvasWorldMatrix = cc.mat4.create();
const cubeWorldMatrix = cc.mat4.create();

cc.mat4.fromRotationTranslationScale(cubeLocalMatrix, cubeRotation, cubePosition, cubeScale);
cc.mat4.fromRotationTranslationScale(canvasWorldMatrix, canvasRotation, canvasPosition, canvasScale);
cc.mat4.multiply(cubeWorldMatrix, canvasWorldMatrix, cubeLocalMatrix);

打印世界矩阵

接下来，我们将打印“Child”节点和“Cube”节点的世界矩阵。

console.log("Child World Matrix:");
console.log(childWorldMatrix);

console.log("Cube World Matrix:");
console.log(cubeWorldMatrix);

结果

打印结果如下：

Child World Matrix:
[
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  200, 200, 100, 1
]

Cube World Matrix:
[
  0.7071067811865476, -0.7071067811865475, 0, 200,
  0.7071067811865476, 0.7071067811865475, 0, 200,
  0, 0, 1, 0,
  0, 0, 0, 1
]