How to use method on geometry?

[SarahVanDenBerghe]

Hey, sorry just another little question! I'm trying to understand how to use a method on a geometry within this library. For example, the Spline Curve, on the BufferGeometry, there's a method setFromPoints(), but I don't really know how to properly translate this to be usable within this library.

On the website of Three JS they show a simple example, I think I got the most part right within r3f, just the setFromPoint() I'm having issues with.

I've tried it on Code Sandbox, can anyone point out what I'm doing wrong precisely? I've tried working with useRef(), the shortcut from the API, args, but none seem to work.

Thank you!! 😊

[drcmda]

either you create it

const geo = useMemo(() => new THREE.BufferGeometry().setFromPoints(points), [points])
return <mesh geometry={geo} ... />

or you feed it as a side-effect (useLayoutEffect is called next "frame", but before the threejs renders it)

const ref = useRef()
useLayoutEffect(() => void ref.current.setFromPoints(points), [points])
return (
  <mesh>
    <bufferGeometry attach="geometry" ref={ref} />

there's also a convenience hook, it is practically the same but shorter

const ref = useUpdate(geo => geo.setFromPoints(points), [points])
return (
  <mesh>
    <bufferGeometry attach="geometry" ref={ref} />

it's imo best packed away as a re-usable component, see: https://github.com/react-spring/react-three-fiber/blob/master/recipes.md#managing-imperative-code

[drcmda]

ps. here's a fixed csb: https://codesandbox.io/s/r3f-instanced-colors-fjvcj

in react never put side-effects or object instanciations into the render method. it would have re-created everything on every render. as for setFromPoints, it's not a prop, it's a function. you can of course "set" it:

<bufferGeometry attach="geometry" setFromPoints={...} />

but you would just overwrite the function, not invoke it.

[SarahVanDenBerghe]

Oh wow, this helps a lot, thank you so much!! I'll look into the different options and see what works best :)