Using Three.js and React with React Three Fiber
In the previous examples, we set up the integration between React and Three.js ourselves. While it works, that approach doesn’t tightly integrate with how React works. For a good integration between these frameworks, we can use React Three Fiber. We’ll start again by setting up a project.
For this, run the following commands:
$ yarn create react-app lts-r3f $ cd lts-3rf $ yarn install $ yarn add three $ yarn add @react-three/fiber
This will install all the dependencies we need and set up a new React project. To start this project in the lts-r3f
directory, run yarn start
, which will start a server. Open the URL you see on the screen (http://localhost:3000
); you’ll see the following screen, which we’ve seen before and shows an empty React project:
Figure 14.5 – Starting up a simple JavaScript React application
As the screen starts to extend this example, we need to...