如何在 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);
我目前正在做一个小项目,我正在使用 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);