I'm currently working on a little side project, where i am using react-three-fiber. I have the following code which renders a text geometry with the display "Test". For some reason the Text Geometry gets rotated at the bottom left corner instead of it being rotated around its own center. How can i change the behavior so that it rotates around its own center?

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

Here the Code where i wrap the TextMesh onto the Canvas

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

Currently it looks like this

Any help is appreciated!

I solved it adding following code to the 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);            
})`