โš›๏ธ React

If you are interested in using Three.js with React Three Fiber, you will need to know at least the basics of React. Use the new React docs (opens in a new tab) for that. Learning a UI library like React is a relatively significant commitment, but the good news is that you will be able to use React for all sorts of projects, not just Three.js. React itself is not tied to the web. You can use it to make regular websites via react-dom, native apps for iOS and Android via React Native (opens in a new tab), and even CLI tools via react-blessed (opens in a new tab). I recommend Cody Bennett's Technical Breakdown of React Three Fiber (opens in a new tab) to learn more about React renderers and how React Three Fiber works.

For good measure, you might want an overview of the current market shares of other UI libraries:

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

Frameworks and toolchains

To use React, you need a tool that will transform your React (and optionally TypeScript) files into JavaScript code that the browser can understand. You probably also want hot reloading to see your changes instantly in the browser. You can use bundlers like Webpack and transpilers like Babel to configure this yourself, but a way more convenient option is to use a framework. These frameworks on top of React are sometimes called "meta-frameworks", as in frameworks on top of an other framework (although React brands itself as a UI library).

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

TypeScript

TypeScriptTypeScript94k43M/w is a superset of JavaScript made by Microsoft that adds types. It is a great way to catch bugs early in development, and nowadays, there is really no reason not to use it, particularly when the configuration is automatically handled by a framework like Next.js.

Next.js React Three Fiber Setup

Getting started with Next.js (opens in a new tab), React, and TypeScript is extremely simple. Set up your project by running:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Install Three.js, React Three Fiber, and Drei:

npm i three @react-three/fiber @react-three/drei
npm i -D @types/three
# or
yarn add three @react-three/fiber @react-three/drei
yarn add -D @types/three
# or
pnpm i three @react-three/fiber @react-three/drei
pnpm i -D @types/three

Add these styles to make your canvas take all available space in styles/globals.css:

html,
body,
#__next {
  height: 100%;
}

Replace the content of pages/index.tsx with:

import { OrbitControls } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
 
const IndexPage = () => (
  <Canvas>
    <ambientLight />
    <mesh>
      <boxGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
    <OrbitControls />
  </Canvas>
)
 
export default IndexPage

Run npm run dev or yarn dev or pnpm dev, and open http://localhost:3000 (opens in a new tab).

Congratulations, you have a 3D cube with mouse camera controls! You can now start building your game.

You can deploy your app to Vercel (opens in a new tab), Netlify (opens in a new tab), or any other hosting provider that supports Next.js, usually by simply pushing to a Git repository and without any extra configuration.

You may use the react-three-next starter template (opens in a new tab), particularly if your app includes navigation between pages with a shared canvas, but I personally like to set up projects with my own preferred tools and coding style.

React Essentials

The very minimum you need know in React to use R3F comfortably are:

  • The core React concept that UI = fn(state).
  • Creating a UI with functional components and props.
  • What rerenders are (Alex Sidorenko (opens in a new tab) has excellent visual articles about that).
  • useState to hold a state in memory and rerender when it changes.
  • useEffect to trigger side effects in given conditions.
  • useContext to pass down data to deeply nested components.
  • useRef to hold a mutable value in memory (refs are very important in R3F).
  • Using hooks from external libraries, such as useFrame from R3F or Zustand stores.
โšซ๏ธ Poimandres๐Ÿงฐ Dev Tools