如何在 react-three-fiber 中围绕文本几何图形的中心旋转？

Question

我目前正在做一个小项目，我正在使用react-three-fiber。 我有以下代码，它使用显示“测试”呈现文本几何图形。 由于某种原因，文本几何图形在左下角旋转，而不是围绕自己的中心旋转。 我怎样才能改变行为，使其围绕自己的中心旋转？

export function TextMesh(props){
    const textMesh = useRef();
    const font = new FontLoader().parse(props.font);

    useHelper(textMesh, BoxHelper, 'cyan');

    useEffect( () => {
    })

    useFrame( ({clock}) => {
        textMesh.current.rotation.y = clock.getElapsedTime(); 
    })
    
    return (
        <mesh ref={textMesh} position={[-1,-0.25,0]}>
            <textGeometry args={["Test", {
                font: font, 
                size: .5,
                height: 0.1
            }]}/>
            <meshStandardMaterial/>
        </mesh>
    );
}

这是我将 TextMesh 包装到 Canvas 上的代码

export default function App() {
  //... Other code
  return (
    <div className="App">
      <Canvas>
        <Suspense fallback={null}>
          //... Other code
          <TextMesh font={Roboto}/>
          <OrbitControls />
        </Suspense>
      </Canvas>
    </div>
  );
}

目前它看起来像这样

任何帮助表示赞赏！

Answer 1

看起来您的文本几何图形的旋转原点位于左侧。 您可以 使用geometry.translate(x, y, z)将此原点更改为一次性操作。

我不知道您的文本有多宽，但您可能希望将其翻译成 x 轴宽度的一半，以便原点位于中间：

// Translate the geometry
textMesh.current.geometry.translate(1, 0, 0);

// Return to its starting position
textMesh.current.position.set(-1, 0, 0);