如何在 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 包装到画布上的代码

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

Answer 1

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