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: