在 react-three-fiber 中调用几何方法答案

【问题标题】：Calling geometry methods in react-three-fiber在 react-three-fiber 中调用几何方法
【发布时间】：2021-10-23 14:22:45
【问题描述】：

如何在几何组件上调用 .rotateZ（不能开箱即用）或 .center（不接受 args）等方法。

<mesh position={[x, y, 0]}>
    <shapeBufferGeometry attach="geometry" args={[shape]} rotateZ={3.14} />
    <meshBasicMaterial attach="material" color={'#FF0000'} />
</mesh>

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

你有looked into useRef()吗？它存储对该对象的引用，因此您可以根据需要对其调用方法：

const geomRef = useRef();
const onButtonClick = () => {
    // You might need to use .current
    geomRef.current.rotateZ(Math.PI / 2);
}

然后你可以把这个引用添加到你想要指向的对象上：

<mesh position={[x, y, 0]}>
    <shapeBufferGeometry attach="geometry" args={[shape]} ref={geomRef} />
    <meshBasicMaterial attach="material" color={'#FF0000'} />
</mesh>

【讨论】：

【解决方案2】：

我使用 onUpdate 属性将自定义几何图形居中并旋转

<shapeBufferGeometry args={[shape]} onUpdate={geometry => {  
    geometry.center()
    geometry.rotateX(Math.PI / 2)
    }} />

【讨论】：