Best way to integrate PLAIN Three.js inside a React app?

I’ve been wondering if there are other approaches about using Plain Three.js inside a React app (without using react-three or any other framework

I’ve seen many use cases such as putting the entire code inside an useEffect() or even something like this:

return (
  <>
    <script src="https://github.com/mrdoob/three.js/blob/03cc77fd1675c22d5765407ef5878a617cf6049d/build/three.min.js" />
    <script>
      // some threejs code
    </script>
  </>
)

And even making a seperate component for it.

But what is the best way in terms of performance to integrate plain Three.js inside a React App using FUNCTIONAL components? What is your approach?

2 Likes