Best way to implement in React

Hi everybody! I’m a threejs newbie and I guess this is recurrent topic.
In my short experience I tried using the useEffect hook to implement all the code after the <canvas> element is rendered functional components. But this ends in a massive useEffect function when the project scalates and not being able to split the code.

I would like to know about your experience and what would you recommend me as the best way to implement this amazing library with react regarding to a big project mixing 3d graphics and html.
I’m open to use frameworks as fiber and react-three if they give me as much freedom as plain threejs does.

Thanks everyone!

What do you mean by “big project”?

I would say a project with several models or an imported scene with many animations and ways to interact with the 3d environment.
Just trying to avoid the simplest ‘one model with a camera rotating’ scene

quickly run through this: React Three Fiber Documentation

it does not have limitations, but it gives threejs many things that it otherwise wouldn’t have: clean code, project sanity, an eco system, events, cross platform native apps.

also check the examples, they give you some idea how it works


It really depends on how you’d want to peice together the big scene, wether your project has a narrative, of which parts will be loaded dynamically, or if you mean one composition with a lot of data that a camera would interact with, I would say there’s as many approaches to a solution than there are use cases