Three.js 旋轉物體局部坐標系：父級容器法實現局部軸旋轉

問題

object.rotation.y = Math.PI / 4; // 繞世界 Y 軸旋轉 45°
object.position.x = 1;           // 期望在物體「自己的」X 軸方向移動 1
// 實際：物體在世界 X 軸移動，局部坐標系未旋轉

rotation 只改變物體渲染朝向，**不改變其局部坐標系方向**（即 object.matrixWorld 的旋轉分量變了，但 object.position 仍在世界坐標系下解釋）。

解決方案：包裹一層父級 Object3D

const pivot = new THREE.Object3D();
pivot.add(object);          // 物體成為子級
pivot.rotation.y = Math.PI / 4; // 旋轉父級
// 此時 object 的局部坐標系（相對 pivot）已隨父級旋轉 45°
object.position.x = 1;      // 在物體「自己的」X 軸方向移動 1
scene.add(pivot);           // 將父級加入場景

原理解析

• Object3D 的 position/rotation/scale 定義**相對父級**的局部變換。
• 世界變換 = 父級世界變換 × 自身局部變換。
• 旋轉父級 → 子級的局部坐標系在世界空間中跟著轉 → 子級 subsequent position 即在「旋轉後」的局部軸上位移。

進階：動態改變旋轉中心

// 若需繞任意點旋轉，可調整 object 在 pivot 中的位置
pivot.add(object);
object.position.set(-centerX, -centerY, -centerZ); // 將旋轉中心移至物體局部原點
pivot.rotation.y = angle;

總結

想旋轉物體的「自身坐標系」，請旋轉它的父級。 Three.js 中沒有直接「旋轉局部軸」的 API，父級容器模式是標準做法。