Блог

В настоящее время я работаю над небольшим побочным проектом, в котором я использую react-three-fiber. У меня есть следующий код, который отображает текстовую геометрию с отображением «Test». По какой-то причине текстовая геометрия поворачивается в нижнем левом углу вместо того, чтобы поворачиваться вокруг своего собственного центра. Как я могу изменить поведение, чтобы оно вращалось вокруг своего собственного центра?

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

Вот код, в котором я переношу текстовую сетку на холст

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

В настоящее время это выглядит так

Любая помощь приветствуется!

Я решил это, добавив следующий код в хук useEffect.

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

Похоже, что начало вращения вашей текстовой геометрии находится в левой части. Вы можете изменить это начало координат как одноразовую операцию с 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);