Hi, I want to create a web app with React and Three.js.
When React detects a state change, we need to apply the state change to the Three.js scene. However, I do not want to “re-render” in the context of React. Because that is “rebuilding DOM elements”. That would mean regenerating graphics resources.
When using Three.js with React, I believe the above re-rendering issue will arise, but how is it typically solved?
If we don’t want to use “react-three-fiber”, is there any other solution?
I would have to modify a lot of the code I have created so far, and I am not sure if it is feasible to implement.
fiber is threejs, you can still use a useEffect and dump your existing imperative code into it 1:1. but overall there is zero point in not using fiber, even if you have to dump large blobs of old code in it because you still benefit from react integration and the eco system. just throw your setup boilerplate away, and use what you already have.
the very reason react exists is to express imperative platforms declaratively, it is paired into react, the base library, and a renderer, like react-dom. react-three-fiber is nothing but a renderer, a small form that teaches react about threejs semantics + things that make your life easier like a pointer event system and some interop stuff for better integration.
Thank you for your reply.
It seems like a good choice to simply switch to “react-three-fiber”.
By the way, which is a better choice for Three.js programmers, React or Vue?
I wonder if Vue also has a library like “react-three-fiber”.
the react eco system for three is unique. it is the biggest eco system that threejs has overall. vue also has something like r3f, tresjs, but without the eco system. the thing that made react so different from other frameworks is that it’s not a web framework, it is platform independent. it was made to drive any imperative platform, like threejs. it doesn’t shoehorn threejs into dom semantics, fiber renders a <mesh /> the same way react-dom renders a <div />.
