如何让轴随立方体移动？ （反应三纤维/ Three.js）

Question

我正在使用react- Three-Fiber（基于Three.js构建）并且想要向我的立方体添加x，y，z轴。问题是轴不随立方体移动，它们只是与页面保持对齐。如何让轴随立方体一起旋转？

当您旋转场景/相机时，轴似乎会移动。但是我没有这样做，我只是使用 ref.current.rotation.x 等手动旋转立方体...有没有办法也手动旋转轴？或者有没有办法将轴直接应用于 BoxGeometry/立方体而不是场景？

另外如何向轴添加标签（x，y，z）？

谢谢！这是我的代码：

const Box = (props) => {
    const ref = useRef()
         
    const websocketRef = useRef();
    const connectWebsocket = () => {
      if (!websocketRef.current) {
        socket.addEventListener("message", (ev) => {
          if (ev.data.includes('ahrs_yaw')) {
            setPose(JSON.parse(ev.data.replaceAll("'", '"')))
          }
        });
        websocketRef.current = socket;
      }
    };
    connectWebsocket();

        useFrame(() => {
            ref.current.rotation.x += .005
            ref.current.rotation.y += .005
            ref.current.rotation.z += .005
        })

        return (
          <mesh
            {...props}
            ref={ref}
            >
            <boxGeometry args={[3, 3, 3]} />
            <meshStandardMaterial color={'orange'} />
          </mesh>
        )
      }

<Canvas>
          <ambientLight intensity={Math.PI / 2} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
          <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
          <Box position={[0, 0, 0] } rotation={[0,0,0]}/>
          <axesHelper args={[5, 5, 5]} />
        </Canvas>

Answer 1

如果您想将 AxesHelper 添加到网格中，只需执行以下操作：

<mesh {...props} ref={ref}>
    <axesHelper/>
    <boxGeometry args={[3, 3, 3]} />
    <meshStandardMaterial color={"orange"} />
</mesh>