对象绕局部轴旋转

Question

我想围绕他的坐标旋转一个对象。 例如，我想在屏幕上连续放置三个多维数据集 让我们假设我有一个具有transformMatrix属性的类形状。

export class Shape {
  constructor(vertices, indices, gl) {
  this.id = ++id
  this.gl = gl;
  this.vertices = vertices;
  this.indices = indices;
  this.color = [];
  this.generateColor();

  this.transformMatrix = mat4.create();
...
  this.baseTranslation = {}
...
}

默认情况下，形状是通过顶点绘制的。这是一个立方体顶点。

-0.5, -0.5,  0.5,
 0.5, -0.5,  0.5,
 0.5,  0.5,  0.5,
-0.5,  0.5,  0.5,
 0.5, -0.5, -0.5,
-0.5, -0.5, -0.5,
-0.5,  0.5, -0.5,
 0.5,  0.5, -0.5,

和索引

   0, 1, 2,
   0, 2, 3,
   4, 5, 6,
   4, 6, 7,
   5, 0, 3,
   5, 3, 6,
   1, 4, 7,
   1, 7, 2,
   5, 4, 1,
   5, 1, 0,
   3, 2, 7,
   3, 7, 6,

然后针对初始化期间的每个形状，我将对其进行一些转换并缩放以连续在屏幕上看到它们。

// translation values for each shape
const baseTranslation = [
    [-1.5, 0, 0],
    [0, 0, 0],
    [1.5, 0, 0],
]
// usage
// shapes.forEach((shape,i) => 
//   shape.setBaseTranslation(baseTranslation[i]))

setBaseTranslation(coordinates) {
  const BASE_SCALE = 0.33
  this.baseTranslation.x = coordinates[0]
  this.baseTranslation.y = coordinates[1]
  this.baseTranslation.z = coordinates[2]

  const {x,y,z} = this.baseTranslation
  const array = [x,y,z]

  mat4.scale(this.transformMatrix, this.transformMatrix, [BASE_SCALE, 
    BASE_SCALE, BASE_SCALE])
  mat4.translate(this.transformMatrix, this.transformMatrix, array)
}

这就是我在屏幕上看到的。

我可以选择激活的形状并对其进行变换。 在按键事件中，我开始转换活动形状。 如果要围绕形状轴进行变换（旋转），则需要将其平移为（0,0）全局坐标，然后旋转然后平移回去。 我只想对一个形状使用一个矩阵进行所有转换。 这就是我在按键事件中的转换函数的外观。

// {Array} @actions
//   @name mat4 function
//   {GLFloat32Array|GLFloat} @value to transform

transform(actions) {
  const {x, y, z} = this.baseTranslation

  // translate back 
  mat4.translate(this.transformMatrix, this.transformMatrix, [x, y, z]);

  actions.forEach(action => {
    const key = action.name;
    const value = action.value;

    mat4[key](this.transformMatrix, this.transformMatrix, value);
  });

  // translate to center
  mat4.translate(
     this.transformMatrix, 
     this.transformMatrix, 
     [-(x), -(y), -(z)]);

}

旋转中间框时，旋转会按预期进行。

但是当我切换到第一个或最后一个时，旋转又绕了另一个点。

我在做什么错了？