Documentation

Documentation

Available Resources

Does it have limitations?

Is it slower than plain Threejs?

Can it keep up with frequent feature updates to Threejs?

What does it look like?

First steps

• basic grasp of Threejs

  • URL: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

• demo above

  • URL: https://github.com/pmndrs/react-three-fiber#what-does-it-look-like

• Look up

  • URL: https://threejs.org/docs/index.html#api/en/objects/Mesh

• API

  • URL: /api/canvas

• Threejs-docs

  • URL: https://threejs.org/docs

• Discover Threejs

  • URL: https://discoverthreejs.com

• Bruno Simons Threejs Journey

  • URL: https://threejs-journey.com

Eco system

• @react-three/drei

  • URL: https://github.com/pmndrs/drei

• @react-three/gltfjsx

  • URL: https://github.com/pmndrs/gltfjsx

• @react-three/postprocessing

  • URL: https://github.com/pmndrs/react-postprocessing

• @react-three/test-renderer

  • URL: https://github.com/pmndrs/react-three-fiber/tree/master/packages/test-renderer

• @react-three/flex

  • URL: https://github.com/pmndrs/react-three-flex

• @react-three/xr

  • URL: https://github.com/pmndrs/react-xr

• @react-three/csg

  • URL: https://github.com/pmndrs/react-three-csg

• @react-three/rapier

  • URL: https://github.com/pmndrs/react-three-rapier

• @react-three/cannon

  • URL: https://github.com/pmndrs/use-cannon

• @react-three/p2

  • URL: https://github.com/pmndrs/use-p2

• @react-three/a11y

  • URL: https://github.com/pmndrs/react-three-a11y

• @react-three/gpu-pathtracer

  • URL: https://github.com/pmndrs/react-three-gpu-pathtracer

• create-r3f-app next

  • URL: https://github.com/pmndrs/react-three-next

• lamina

  • URL: https://github.com/pmndrs/lamina

• zustand

  • URL: https://github.com/pmndrs/zustand

• jotai

  • URL: https://github.com/pmndrs/jotai

• valtio

  • URL: https://github.com/pmndrs/valtio

• react-spring

  • URL: https://github.com/pmndrs/react-spring

• framer-motion-3d

  • URL: https://www.framer.com/docs/three-introduction/

• use-gesture

  • URL: https://github.com/pmndrs/react-use-gesture

• leva

  • URL: https://github.com/pmndrs/leva

• maath

  • URL: https://github.com/pmndrs/maath

• miniplex

  • URL: https://github.com/hmans/miniplex

• composer-suite

  • URL: https://github.com/hmans/composer-suite

How to contribute

Backers

Contributors

Vite.js

Next.js

Without build tools

React Native

Adding a Mesh Component

Adding lights

The result

Showcase

Game prototypes

Basic examples

Properties

Defaults

Errors and fallbacks

WebGPU

Custom Canvas

Tree-shaking

Constructor arguments

Shortcuts

Piercing into nested properties

Dealing with non-scene objects

Putting already existing objects into the scene-graph

Using 3rd-party objects declaratively

Disposal

useThree

useFrame

useLoader

useGraph

Accessing typed three-elements

Extend usage

Extending three default elements

Exported types

Testing interactions

• Repo

  • URL: https://github.com/pmndrs/react-three-fiber/blob/master/packages/test-renderer

• React Three Test Renderer API

  • URL: https://github.com/pmndrs/react-three-fiber/blob/master/packages/test-renderer/markdown/rttr.md#create

• React Three Test Instance API

  • URL: https://github.com/pmndrs/react-three-fiber/blob/master/packages/test-renderer/markdown/rttr-instance.md

Exercises

On-demand rendering

Re-using geometries and materials

Instancing

Level of detail

Nested loading

Performance monitoring

Movement regression

Enable concurrency

Tips and Tricks

Avoid setState in loops

Handle animations in loops

Do not bind to fast state reactively

Don't mount indiscriminately

Don't re-create objects in loops

useLoader instead of plain loaders

Features

WebGPU

Fixes

TypeScript Changes

Testing

Next steps

Loading GLTF models

Loading OBJ models

Loading FBX models

Showing a loader

Using TextureLoader and useLoader

Using useTexture

useFrame

Animating with Refs

Next steps

• Animating with React Spring
  • URL: /tutorials/using-with-react-spring

Creating THREE objects

The attach props

Props

Pointer Events

Render Loop

How to Use This Skill

Reference these resources when working with Documentation.