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

2 Likes

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