Calling geometry methods in react-three-fiber

Question

How to call methods like .rotateZ (doesn't work out of the box) or .center (which accept no args) on geometry component.

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

Answer 1

Have you looked into useRef()? It stores a reference to that object so you can call methods on it as needed:

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

Then you can add this reference to the object you want to point to:

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

Answer 2

I used the onUpdate prop to center my custom geometry and rotate

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