React-three-fiber中圆柱体（硬币）无法平稳旋转的问题排查

问题场景 #

用低高度的cylinderGeometry模拟硬币形态，为让硬币正面朝向屏幕，先对圆柱体z轴做初始旋转Math.PI / 2，但添加y轴旋转后，硬币出现晃动、旋转不居中的情况，呈现滚动而非自旋的效果。

问题原因 #

Three.js默认采用XYZ欧拉角旋转顺序，先设置z轴旋转后，后续修改y轴旋转时，会基于已旋转后的局部坐标系计算，导致旋转轴偏移，最终出现晃动现象。

解决方案 #

通过分层旋转解决：用空group作为父容器，将动态y轴旋转应用在父容器上，硬币mesh仅保留初始z轴旋转。两个旋转操作在不同层级，互不干扰，确保自旋轴为世界空间的y轴。

修正后的代码 #

import { Canvas, useFrame } from "@react-three/fiber";
import React, { useRef } from "react";
import * as THREE from 'three';

type CoinType = {};

const Coin: React.FC<CoinType> = () => {
  // 引用父容器group而非mesh
  const groupRef = useRef<THREE.Group>(null);

  useFrame((state, delta) => {
    if (groupRef.current) {
      // 旋转父容器的y轴
      groupRef.current.rotation.y += 4 * delta;
    }
  });

  return (
    <>
      <spotLight
        position={[10, 10, 10]}
        angle={0.15}
        penumbra={1}
        decay={0}
        intensity={Math.PI}
      />
      <directionalLight position={[0, 0, 3]} />
      {/* 父容器负责动态y轴旋转 */}
      <group ref={groupRef} position={[0, 0, 0]}>
        {/* 硬币mesh仅负责初始z轴旋转，让正面朝向屏幕 */}
        <mesh rotation={[0, 0, Math.PI / 2]}>
          <cylinderGeometry args={[2, 2, 0.3, 128]} />
          <meshStandardMaterial color={"#D2E9FB"} />
        </mesh>
      </group>
    </>
  );
};

export default Coin;

补充说明 #

也可以通过修改mesh的旋转顺序解决，比如设置mesh.rotation.order = "ZYX"，但分层旋转的方式更直观，也便于后续扩展（比如添加硬币位移动画等）。

内容的提问来源于stack exchange，提问作者Alexei Belozertsev