Unable to convert an OOP Three.js project to R3F

[fnick851]

I apologize in advance because the ask might be too general. But I genuinely have little clue so far since I can't inspect rendered WebGL like regular DOM.

Basically, I am trying to rewrite this code (https://github.com/brunoimbrizi/interactive-particles) to R3F. Although it seems like I'm translating everything right, it does not show anything. It is supposed to show a particles render of the zebra image.

Here is my reproduction repo: https://github.com/fnick851/particles-map. The project was scaffolded with https://github.com/pmndrs/react-three-next.

I wonder if someone is kind enough to take a look at my R3F code and see what is wrong with it? Or maybe point me to a right direction? It'll be much appreciated.

[drcmda]

it would be easier if thats a codesandbox, setting up a repo just to find a bug is too much time wasted. the usual problem with porting plain three is that vanilla code is a spaghetti of dependencies, miss one and it fails. i'd suggest start simple, get some particles on screen then go from there.

[fnick851]

Thanks for replying.
I made a reproduction CodeSanbox: https://codesandbox.io/s/particles-map-kxcm2
It shows the simple some boxes (just to show myself r3f is working lol), but does not show the particles mesh which uses custom shaders. It's supposed to show an image rendered as particles like this one: https://tympanus.net/Tutorials/InteractiveParticles/, but without the interactivities.

Do you need me to port this project (https://github.com/brunoimbrizi/interactive-particles) to CodeSanbox too? I think this one is fairly easy to run on local. But if you prefer, I'll see if I can get it work on CodeSanbox.

[fnick851]

I got it to work.

It turned out I missed some pieces from the original code.

But I still need to write imperative code for material and geometry, then:

<mesh material={material} geometry={geometry} />

I don't know how to express <rawShaderMaterial /> and <instancedBufferGeometry /> declaratively with r3f.

[drcmda]

you should extend materials. look into the shaders for this one: https://codesandbox.io/s/threejs-journey-ni6v4 you can use shadermaterials declaratively but i don't like it because you would have to at least memoize the constructor arguments or else it's going to re-construct every render.

instancedBufferGeometry ive never used it, if you post a small snippet of how you use that in three it would be easier to figure it out.

[fnick851]

@drcmda
Thanks for the example. In this case maybe writing the material code declaratively doesn't have a real advantage.

Here is how I used InstancedBufferGeometry: https://github.com/fnick851/particles-map/blob/main/src/components/canvas/Shader/Shader.tsx#L90
I think it is largely the same as BufferGeometry according to the doc: https://threejs.org/docs/#api/en/core/InstancedBufferGeometry

[drcmda]

so that thing is 100% imperative, that's what useLayoutEffect is for. generally, you should not put stuff into the render function, there should not be a single "new" or function call anywhere.

const ref = useRef()
useLayoutEffect(() => {
  ref.current.setBar(...)
}, [])
return <foo ref={ref} />

• const [foo] = useState(() => new Foo()) for static local sate
• const foo = useMemo(() => new Foo(arg), [arg]) for dynamic local state
• useEffect for side effects
• useLayoutEffect for side effects that manipulate the view

[fnick851]

Thanks for the great tips!