How to properly handle geometry merge in react-three-fiber?

[iam-yan]

I want to merge several geometries into one. What is the suggested way to accomplish this in react-three-fiber?

[drcmda]

merging is an imperative function, this is what usememo is for, memoized, imperative calculations. how exactly you merge two geometries i do not know by memory but there's no difference as to how you'd do it: same as in threejs.

const merged = useMemo(() => merge(geo1, geo2), [geo1, geo2])
return <mesh geometry={merged} />

your geometry is still managed afterwards, so when the component unmounts, it will be discarded properly.

[iam-yan]

Thx. Then what is the use case of the merge in geometry jsx tag?

[drcmda]

https://threejs.org/docs/index.html#api/en/core/BufferGeometry.merge

it's a function. and you are overwriting it with () => null, so now the geometry essentially can merge no longer.

this is what you did in plain threejs

const geom = new THREE.BoxBufferGeometry()
geom.merge = () => null 

what you probably want to do:

const geom = useMemo(() => {
  const base = new THREE.BoxBufferGeometry()
  base.merge(extra)
  return base
}, [extra])

return (
  <mesh geometry={geom} ... >

you can of course also define the geom declaratively and put a ref on it, then you merge in, say, useLayoutEffect, so before paint. but keep in mind that you are sacrificing immutability, mutating it may cause you problems in scale.

[iam-yan]

I see. Thanks for your help! : )

[TeoAvignon]

Thanks for your help ! Would you know how to set different colors for each geometry please?