Swarm

React three fiber

is a react renderer for three.js

Build Threejs applications declaratively & with re-usable components

Fully compatible

Everything that works in Threejs also works in react-three-fiber

Top performance

Rendering performance is up to Threejs and the GPU. Components may participate in the renderloop outside of React, without any additional overhead.

React ecosystem

Stick to the technologies you already now and make use of the huge ecosystem behind React.

Cross platform

Write once, run anywhere. With react on the web and react-native on your mobile phone.

Getting started with react-three-fiber

1
import React, { useRef, useState } from 'react'
2
import { Canvas, useFrame } from 'react-three-fiber'
3
4
function Box({ position, rotationSpeed, color }) {
5
    const mesh = useRef()
6
    const [active, setActive] = useState(false)
7
8
    useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += rotationSpeed / 100))
9
10
    return (
11
        <mesh
12
            position={position}
13
            ref={mesh}
14
            scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
15
            onClick={e => setActive(!active)}>
16
            <boxBufferGeometryBufferGeometry attach="geometry" args={[1, 1, 1]} />
17
            <meshStandardMaterial attach="material" color={color}/>
18
        </mesh>
19
    )
20
}
21
22
export default function App() {
23
    return <Canvas>
24
        <ambientLight />
25
        <pointLight position={[10, 10, 10]} />
26
        <Box position={[0,0,0]} rotationSpeed={1} color="#7f0000" />
27
    </Canvas>
28
}
1
Add react-three-fiber to your project
Because building dynamic scene graphs declaratively with re-usable components makes dealing with Threejs easier and brings order and sanity to your codebase.
npm install react-three-fiber three
2
Create a reusable component
Let's make a re-usable component that has it's own state, reacts to user-input and participates in the render-loop. As a material we use the
3
Add an event listener to the component
Handling events with react-three-fiber is very similar to handling events with react. Click on a component in the preview to see it scale.
4
Animate the component
With the useFrame hook we can rotate the mesh on every frame. This happens outside of React without any overhead.
5
Render the component in a canvas
Now that we have a reusable component we can render is as often as we want.
+

From Threejs to react-three-fiber

ThreeJS
1
// this code will change
2
const ratio = window.innerWidth / window.innerHeight
3
const scene = new THREE.Scene()
4
const camera = new THREE.PerspectiveCamera(75, ratio, 0.1, 1000)
5
const renderer = new THREE.WebGLRenderer()
6
7
renderer.setSize(window.innerWidth, window.innerHeight)
8
document.body.appendChild(renderer.domElement)
9
10
const geometry = new THREE.BoxGeometry()
11
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
12
const cube = new THREE.Mesh(geometry, material)
13
scene.add(cube)
14
15
camera.position.z = 5
16
17
const animate = function () {
18
  requestAnimationFrame(animate)
19
20
  cube.rotation.x += 0.01
21
  cube.rotation.y += 0.01
22
23
  renderer.render(scene, camera)
24
}
25
26
animate()
27
 
react-three-fiber
1
import React, { useRef, useState } from 'react'
2
import { Canvas, useFrame } from 'react-three-fiber'
3
4
function Box({ position, rotationSpeed, color }) {
5
  const mesh = useRef()
6
  const [active, setActive] = useState(false)
7
8
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += rotationSpeed / 100))
9
10
  return (
11
    <mesh
12
      position={position}
13
      ref={mesh}
14
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
15
      onClick={(e) => setActive(!active)}>
16
      <BoxBufferGeometry attach="geometry" args={[1, 1, 1]} />
17
      <basicMaterial attach="material" color={color} />
18
    </mesh>
19
  )
20
}
21

How to proceed?

Documentation & Learning

Threejs documentation

Learn what a scene, camera, mesh, geometry and material is and how they can be used
threejs.org

react-three-fiber documentation

Detailed documentation about the API react-three-fiber provides you
github.com

Three.js Fundamentals

A set of articles to help learn Three.js.
threejsfundamentals.org

Discover Three.js

The mssing manual for three.js
discoverthreejs.com

Tutorials

Animation and 3D in react-three-fiber — Learn With Jason

Get to know react-three-fiber with the creator of the renderer
www.youtube.com

Write three.js in React Using react-three-fiber

Learn what a scene, camera, mesh, geometry and material is and how they can be used
alligator.io

3D Data Visualization with React and Three.js

Animate 100.000 points using InstancedMesh with react-three-fiber
medium.com

Code examples

Hello World

Get familiar with the basics of react free fiber by creating a canvas with rotating boxes
codesandbox.io