Learn Three.js for 3D Computer Graphics/

...

/

Using Three.js and React with React Three Fiber

Using Three.js and React with React Three Fiber

Learn how to create a React Three Fiber project and add Three.js scene to it.

We'll cover the following...

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:

Press + to interact
yarn create react-app lts-r3f
cd lts-r3f
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.

Try it out

Click the “Run” button below and execute the above commands in the terminal to create React ...