如何在 ThreeJS 中圍繞其中心旋轉一個組？

Question

我正在嘗試使用ThreeJS構建一個有效的魔方。 現在我在旋轉側面時遇到了問題。 目前，我正在將較小的立方體添加到魔方，並像這樣創建它：

const rubikscube = new THREE.Group();
for (var i = 0; i < 27; i++) {
  // 3x3x3 (0,0,0) is on the top left corner
  var cube = createPartOfCube(i, scene);
  cube.name = i;
  cube.position.x = (i % 3) * gap;
  cube.position.y = Math.floor(i / 9) * gap;
  cube.position.z = (Math.floor(i / 3) % 3) * gap;
  rubikscube.add(cube);
}
scene.add(rubikscube);

這一切都很好，直到我嘗試旋轉，例如右側。 我將 select 右側的部分添加到自己的組中。 現在，當我嘗試旋轉組時，它圍繞 x 軸旋轉。 這是我想用來移動一側的方法（只需忽略 bool 和 eval 部分，它只是為了獲得正確的部分）：

  function move(direction) {
    var bool = moves[direction];

    var pivot = new THREE.Group();
    pivot.updateMatrixWorld();

    for (var i = 0; i < 27; i++) {
      if (eval(format(bool, i))) {
        pivot.add(scene.getObjectByName(i));
      }
    }
    scene.add(pivot);
    animateMove(pivot);
  }

並對其進行動畫處理：

  function animateMove(pivot) {
    requestAnimationFrame(() => {
      animateMove(pivot);
    });
    // missing part
    renderer.render(scene, camera);
  }

我試過的：

我嘗試了不同的方法，以正確的方式旋轉它，但沒有任何效果，移動立方體也不是正確的答案。

我嘗試過的一件事是在這個線程上，但是當我嘗試以這種方式旋轉它時，側面剛剛移動，所以它仍然圍繞 x-axes 旋轉。

我希望有人理解我的問題並幫助我解決它。 謝謝！

Answer 1

所有旋轉都圍繞對象的原點進行。 因此，如果您的對象的 position 位於 (0, 0, 0)，那么這將是 pivot 點。

我建議您將立方體塊嵌套到一個THREE.Group()中，這樣您就可以將所有 27 塊的 pivot 點保持在 (0, 0, 0) 不變。 然后您可以將其組內的每個部分替換為所需的 position：

const geom = new THREE.BoxGeometry(1, 1, 1);
const Piece = new THREE.Mesh(geom, mat);
const Group = new THREE.Group();

// Nest Piece inside of its Group
Group.add(Piece);

// Parent Group position is at (0, 0, 0)
// Inner piece position is at (-1, -1, -1)
Piece.position.set(-1, -1, -1);

// Now we can apply rotations to the parent group 
// and the child will maintain its distance from the center
Group.rotation.set(Math.PI / 2, 0, 0);

您需要對X,Y,Z的[-1, 0, +1]的所有值重復此操作。 那是 3^3 = 27 件。