0
397
Views¿Cómo giro alrededor del centro de la geometría del texto en reaccionar-tres-fibras?
Actualmente estoy trabajando en un pequeño proyecto paralelo, en el que uso react-three-fiber. Tengo el siguiente código que representa una geometría de texto con la pantalla "Prueba". Por alguna razón, la geometría del texto se gira en la esquina inferior izquierda en lugar de girar alrededor de su propio centro. ¿Cómo puedo cambiar el comportamiento para que gire alrededor de su propio centro?
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> ); }Aquí el código donde envuelvo TextMesh en el lienzo
export default function App() { //... Other code return ( <div className="App"> <Canvas> <Suspense fallback={null}> //... Other code <TextMesh font={Roboto}/> <OrbitControls /> </Suspense> </Canvas> </div> ); } Actualmente se ve así 
¡Cualquier ayuda es apreciada!
Lo resolví agregando el siguiente código al 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); })`1 answers
Answer question0
Parece que el origen de rotación de la geometría de su texto está en el lado izquierdo. Puede cambiar este origen como una operación de una sola vez con geometry.translate(x, y, z) .
No sé qué tan ancho es tu texto, pero probablemente querrás traducirlo a la mitad de su ancho en el eje x para que el origen quede en el medio:
// Translate the geometry textMesh.current.geometry.translate(1, 0, 0); // Return to its starting position textMesh.current.position.set(-1, 0, 0);