вращение объекта вокруг локальных осей

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)
}

И это то, что я получаю на экране.

Я могу выбрать, какая фигура активна, и преобразовать ее.По событию keydown я начинаю трансформировать активную фигуру.Если я хочу иметь преобразование (вращение) вокруг осей формы, мне нужно перевести его в (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)]);

}

Когда я поворачиваю среднее поле, вращение работает как положено.

Но когда я переключаюсь на первый или последний, вращение вращается вокруг другой точки.

Что я делаю не так?