如何在 react-three-fiber 中围绕文本几何中心旋转?

How do i rotate around the center of the text geometry in react-three-fiber?

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

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>
  );
}

目前看起来是这样

感谢任何帮助!


我在 useEffect Hook 中添加了以下代码解决了这个问题。

useEffect( () => {
        textMesh.current.geometry.computeBoundingBox();
        const boundingBox = textMesh.current.geometry.boundingBox;
        const center = new THREE.Vector3();
        boundingBox.getCenter(center);
        textMesh.current.geometry.translate(-center.x,-center.y,-center.z);            
})`

看起来您的文本几何图形的旋转原点在左侧。您可以将此原点更改为 one-time operation with 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);