react-three-fiber
React-fiber renderer for THREE.js
Last updated 5 years ago
by drcmda
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ npm install react-three-fiber
SYNC missed versions from
official npm registry.
react-three-fiber
react-three-fiber is a React reconciler for Threejs on the web and react-native.
npm install three react-three-fiber
These demos are real, you can click them! They contain the full code, too.
Why?
Building dynamic scene graphs declaratively with re-usable components makes dealing with Threejs easier and brings order and sanity to your codebase. These components react to state changes, are interactive out of the box and can tap into React's infinite ecosystem.
Does it have limitations?
None. Everything that works in Threejs will work here. In contrast to "bindings" where a library ships/maintains dozens of wrapper components, it just reconciles JSX to Threejs dynamically: <mesh /> simply is another expression for new THREE.Mesh(). It does not know or target a specific Threejs version nor does it need updates for modified, added or removed upstream features.
Is it slower than raw Threejs?
No. Rendering performance is up to Threejs and the GPU. Components may participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.
What does it look like?
| Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (live demo). |
 |
import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
function Box(props) {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Rotate mesh every frame, this is outside of React without overhead
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
return (
<mesh
{...props}
ref={mesh}
scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
onClick={(e) => setActive(!active)}
onPointerOver={(e) => setHover(true)}
onPointerOut={(e) => setHover(false)}>
<boxBufferGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
ReactDOM.render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
document.getElementById('root')
)
Fundamentals
- Before you start, make sure you have a basic grasp of Threejs.
- When you know what a scene is, a camera, mesh, geometry and material, more or less, fork the demo sandbox on the frontpage, try out some of the things you learn here.
- Don't break your head, three-fiber is Threejs, it does not introduce new rules or assumptions. If you see a snippet somewhere and you don't know how to make it declarative yet, use it 1:1 as it is.
Some reading material:
- Threejs-docs
- Threejs-examples
- Threejs-fundamentals
- Discover Threejs
- Do's and don'ts for performance and best practices
- react-three-fiber alligator.io tutorial by @dghez_
API
Ecosystem
- 🌭 drei, useful helpers for react-three-fiber
- 💣 use-cannon, physics based hooks
- 🤳 react-xr, VR/AR controllers and events
- 🎮 gltfjsx, turns GLTFs into JSX components
- 🐻 zustand, state management
- ✌️ react-spring, a spring-physics-based animation library
- 👇 react-use-gesture, mouse/touch gestures
- 🧪 react-three-gui, GUI/debug tools
News, updates, community
- @0xca0a's twitter
- github discussions
How to contribute
If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH, ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682.
Sponsors
Backers
Thank you to all our backers! 🙏
Contributors
This project exists thanks to all the people who contribute.
Current Tags
- 6.0.0-alpha.11 ... alpha (4 years ago)
- 5.0.0-beta.12 ... beta (4 years ago)
- 0.0.0-deprecated ... deprecated (4 years ago)
- 6.0.13 ... latest (4 years ago)
284 Versions
- 6.0.13 [deprecated] ... 4 years ago
- 6.0.12 [deprecated] ... 4 years ago
- 6.0.11 [deprecated] ... 4 years ago
- 6.0.10 [deprecated] ... 4 years ago
- 5.3.22 [deprecated] ... 4 years ago
- 5.3.21 [deprecated] ... 4 years ago
- 5.3.20 [deprecated] ... 4 years ago
- 0.0.0-deprecated ... 4 years ago
- 6.0.0-alpha.11 ... 4 years ago
- 6.0.0-alpha.10 ... 4 years ago
- 6.0.0-alpha.9 ... 4 years ago
- 6.0.0-alpha.8 ... 4 years ago
- 6.0.0-alpha.7 ... 4 years ago
- 6.0.0-alpha.6 ... 4 years ago
- 6.0.0-alpha.5 ... 4 years ago
- 6.0.0-alpha.4 ... 4 years ago
- 6.0.0-alpha.3 ... 4 years ago
- 6.0.0-alpha.2 ... 4 years ago
- 6.0.0-alpha.1 ... 4 years ago
- 6.0.0-alpha.0 ... 4 years ago
- 5.3.19 [deprecated] ... 4 years ago
- 5.3.18 [deprecated] ... 4 years ago
- 5.3.17 [deprecated] ... 4 years ago
- 5.3.16 [deprecated] ... 4 years ago
- 5.3.15 [deprecated] ... 4 years ago
- 5.3.14 [deprecated] ... 4 years ago
- 5.3.13 [deprecated] ... 4 years ago
- 5.3.12 [deprecated] ... 4 years ago
- 5.3.11 [deprecated] ... 4 years ago
- 5.3.10 [deprecated] ... 4 years ago
- 5.3.9 [deprecated] ... 4 years ago
- 5.3.8 [deprecated] ... 4 years ago
- 5.3.7 [deprecated] ... 4 years ago
- 5.3.6 [deprecated] ... 4 years ago
- 5.3.5 [deprecated] ... 4 years ago
- 5.3.4 [deprecated] ... 4 years ago
- 5.3.3 [deprecated] ... 4 years ago
- 5.3.1 [deprecated] ... 4 years ago
- 5.3.0 [deprecated] ... 4 years ago
- 5.2.1 [deprecated] ... 4 years ago
- 5.2.0 [deprecated] ... 4 years ago
- 5.1.9 [deprecated] ... 4 years ago
- 5.1.8 [deprecated] ... 4 years ago
- 5.1.7 [deprecated] ... 4 years ago
- 5.1.6 [deprecated] ... 4 years ago
- 5.1.5 [deprecated] ... 4 years ago
- 5.1.4 [deprecated] ... 4 years ago
- 5.1.3 [deprecated] ... 4 years ago
- 5.1.2 [deprecated] ... 4 years ago
- 5.1.1 [deprecated] ... 4 years ago
- 5.1.0 [deprecated] ... 4 years ago
- 5.0.6 [deprecated] ... 4 years ago
- 5.0.5 [deprecated] ... 4 years ago
- 5.0.4 [deprecated] ... 4 years ago
- 5.0.3 [deprecated] ... 4 years ago
- 5.0.2 [deprecated] ... 4 years ago
- 5.0.1 [deprecated] ... 4 years ago
- 5.0.0 [deprecated] ... 4 years ago
- 5.0.0-beta.12 ... 4 years ago
- 4.2.21 [deprecated] ... 4 years ago
- 4.2.20 [deprecated] ... 4 years ago
- 5.0.0-alpha.1 ... 4 years ago
- 4.2.19 [deprecated] ... 4 years ago
- 4.2.18 [deprecated] ... 4 years ago
- 5.0.0-alpha.0 ... 4 years ago
- 5.0.0-beta.11 ... 4 years ago
- 4.2.17 [deprecated] ... 4 years ago
- 4.2.16 [deprecated] ... 4 years ago
- 4.2.15 [deprecated] ... 4 years ago
- 4.2.14 [deprecated] ... 4 years ago
- 4.2.13 [deprecated] ... 4 years ago
- 4.2.12 [deprecated] ... 5 years ago
- 4.2.11 [deprecated] ... 5 years ago
- 5.0.0-beta.10 ... 5 years ago
- 4.2.10 [deprecated] ... 5 years ago
- 4.2.9 [deprecated] ... 5 years ago
- 5.0.0-beta.8 ... 5 years ago
- 5.0.0-beta.7 ... 5 years ago
- 5.0.0-beta.6 ... 5 years ago
- 5.0.0-beta.5 ... 5 years ago
- 5.0.0-beta.4 ... 5 years ago
- 4.2.8 [deprecated] ... 5 years ago
- 5.0.0-beta.3 ... 5 years ago
- 5.0.0-beta.2 ... 5 years ago
- 5.0.0-beta.1 ... 5 years ago
- 4.2.7 [deprecated] ... 5 years ago
- 4.2.6 [deprecated] ... 5 years ago
- 5.0.0-beta.0 ... 5 years ago
- 4.2.5 [deprecated] ... 5 years ago
- 4.2.4 [deprecated] ... 5 years ago
- 4.2.3 [deprecated] ... 5 years ago
- 4.2.2 [deprecated] ... 5 years ago
- 4.2.0 [deprecated] ... 5 years ago
- 4.1.4 [deprecated] ... 5 years ago
- 4.1.3 [deprecated] ... 5 years ago
- 4.1.2 [deprecated] ... 5 years ago
- 4.1.1 [deprecated] ... 5 years ago
- 4.1.0 [deprecated] ... 5 years ago
- 4.0.29-beta.0 ... 5 years ago
- 4.0.28 [deprecated] ... 5 years ago
- 4.0.27 [deprecated] ... 5 years ago
- 4.0.26 [deprecated] ... 5 years ago
- 4.0.25 [deprecated] ... 5 years ago
- 4.0.24 [deprecated] ... 5 years ago
- 4.0.23 [deprecated] ... 5 years ago
- 4.0.22 [deprecated] ... 5 years ago
- 4.0.21 [deprecated] ... 5 years ago
- 4.0.21-beta.1 ... 5 years ago
- 4.0.21-beta.0 ... 5 years ago
- 4.0.20 [deprecated] ... 5 years ago
- 4.0.19 [deprecated] ... 5 years ago
- 4.0.18 [deprecated] ... 5 years ago
- 4.0.17 [deprecated] ... 5 years ago
- 4.0.16 [deprecated] ... 5 years ago
- 4.0.14 [deprecated] ... 5 years ago
- 4.0.13 [deprecated] ... 5 years ago
- 4.0.12 [deprecated] ... 5 years ago
- 4.0.11 [deprecated] ... 5 years ago
- 4.0.10 [deprecated] ... 5 years ago
- 4.0.9 [deprecated] ... 5 years ago
- 4.0.8 [deprecated] ... 5 years ago
- 4.0.7 [deprecated] ... 5 years ago
- 4.0.6 [deprecated] ... 5 years ago
- 4.0.5 [deprecated] ... 5 years ago
- 4.0.4 [deprecated] ... 5 years ago
- 4.0.3 [deprecated] ... 5 years ago
- 4.0.2 [deprecated] ... 5 years ago
- 4.0.1 [deprecated] ... 5 years ago
- 4.0.0-beta.16 ... 5 years ago
- 4.0.0-beta.15 ... 5 years ago
- 4.0.0-beta.14 ... 5 years ago
- 3.0.17 [deprecated] ... 5 years ago
- 4.0.0-beta.13 ... 5 years ago
- 4.0.0-beta.12 ... 5 years ago
- 3.0.16 [deprecated] ... 5 years ago
- 4.0.0-beta.11 ... 5 years ago
- 4.0.0-beta.10 ... 5 years ago
- 4.0.0-beta.9 ... 5 years ago
- 4.0.0-beta.8 ... 5 years ago
- 4.0.0-beta.7 ... 5 years ago
- 4.0.0-beta.6 ... 5 years ago
- 4.0.0-beta.5 ... 5 years ago
- 4.0.0-beta.4 ... 5 years ago
- 4.0.0-beta.3 ... 5 years ago
- 4.0.0-beta.2 ... 5 years ago
- 4.0.0-beta.1 ... 5 years ago
- 4.0.0-beta.0 ... 5 years ago
- 3.0.15 [deprecated] ... 5 years ago
- 3.0.14 [deprecated] ... 5 years ago
- 3.0.13 [deprecated] ... 5 years ago
- 3.0.12 [deprecated] ... 5 years ago
- 3.0.11 [deprecated] ... 5 years ago
- 3.0.10 [deprecated] ... 5 years ago
- 3.0.9 [deprecated] ... 5 years ago
- 3.0.8-beta.0 ... 5 years ago
- 3.0.8 [deprecated] ... 5 years ago
- 3.0.7 [deprecated] ... 5 years ago
- 3.0.6 [deprecated] ... 5 years ago
- 3.0.3 [deprecated] ... 5 years ago
- 3.0.2 [deprecated] ... 5 years ago
- 3.0.1 [deprecated] ... 5 years ago
- 3.0.0 [deprecated] ... 5 years ago
- 3.0.0-beta.16 ... 5 years ago
- 3.0.0-beta.15 ... 5 years ago
- 3.0.0-beta.14 ... 5 years ago
- 3.0.0-beta.13 ... 5 years ago
- 3.0.0-beta.12 ... 5 years ago
- 3.0.0-beta.11 ... 5 years ago
- 3.0.0-beta.10 ... 5 years ago
- 3.0.0-beta.9 ... 5 years ago
- 3.0.0-beta.8 ... 5 years ago
- 3.0.0-beta.7 ... 5 years ago
- 3.0.0-beta.6 ... 5 years ago
- 3.0.0-beta.4 ... 5 years ago
- 3.0.0-beta.3 ... 5 years ago
- 3.0.0-beta.1 ... 5 years ago
- 3.0.0-beta.0 ... 5 years ago
- 2.5.0-beta.1 ... 5 years ago
- 2.5.0-beta.0 ... 5 years ago
- 2.4.3 [deprecated] ... 5 years ago
- 2.4.2 [deprecated] ... 5 years ago
- 2.4.1 [deprecated] ... 5 years ago
- 2.4.0 [deprecated] ... 5 years ago
- 2.3.9 [deprecated] ... 5 years ago
- 2.3.8 [deprecated] ... 5 years ago
- 2.3.7 [deprecated] ... 5 years ago
- 2.3.6 [deprecated] ... 5 years ago
- 2.3.5 [deprecated] ... 5 years ago
- 2.3.4 [deprecated] ... 5 years ago
- 2.3.3-beta.0 ... 5 years ago
- 2.3.3 [deprecated] ... 5 years ago
- 2.3.2 [deprecated] ... 5 years ago
- 2.3.1 [deprecated] ... 5 years ago
- 2.3.0 [deprecated] ... 5 years ago
- 2.2.17-beta.2 ... 5 years ago
- 2.2.17-beta.1 ... 5 years ago
- 2.2.17-beta.0 ... 5 years ago
- 2.2.17 [deprecated] ... 5 years ago
- 2.2.16 [deprecated] ... 5 years ago
- 2.2.15 [deprecated] ... 5 years ago
- 2.2.14 [deprecated] ... 5 years ago
- 2.2.13 [deprecated] ... 5 years ago
- 2.2.12 [deprecated] ... 5 years ago
- 2.2.11 [deprecated] ... 5 years ago
- 2.2.10 [deprecated] ... 5 years ago
- 2.2.9 [deprecated] ... 6 years ago
- 2.2.8 [deprecated] ... 6 years ago
- 2.2.7 [deprecated] ... 6 years ago
- 2.2.6 [deprecated] ... 6 years ago
- 2.2.5 [deprecated] ... 6 years ago
- 2.2.4 [deprecated] ... 6 years ago
- 2.2.3 [deprecated] ... 6 years ago
- 2.2.2 [deprecated] ... 6 years ago
- 2.2.1 [deprecated] ... 6 years ago
- 2.2.0 [deprecated] ... 6 years ago
- 2.1.6 [deprecated] ... 6 years ago
- 2.1.5 [deprecated] ... 6 years ago
- 2.1.4 [deprecated] ... 6 years ago
- 2.1.3-beta.0 ... 6 years ago
- 2.1.3 [deprecated] ... 6 years ago
- 2.1.2 [deprecated] ... 6 years ago
- 2.1.1 [deprecated] ... 6 years ago
- 2.1.0 [deprecated] ... 6 years ago
- 2.1.0-beta.2 ... 6 years ago
- 2.1.0-beta.1 ... 6 years ago
- 2.1.0-beta.0 ... 6 years ago
- 2.0.12 [deprecated] ... 6 years ago
- 2.0.11 [deprecated] ... 6 years ago
- 2.0.10 [deprecated] ... 6 years ago
- 2.0.9 [deprecated] ... 6 years ago
- 2.0.8 [deprecated] ... 6 years ago
- 2.0.7 [deprecated] ... 6 years ago
- 2.0.6 [deprecated] ... 6 years ago
- 2.0.5 [deprecated] ... 6 years ago
- 2.0.4 [deprecated] ... 6 years ago
- 2.0.3 [deprecated] ... 6 years ago
- 2.0.2 [deprecated] ... 6 years ago
- 2.0.1 [deprecated] ... 6 years ago
- 2.0.0 [deprecated] ... 6 years ago
- 2.0.0-beta.12 ... 6 years ago
- 2.0.0-beta.11 ... 6 years ago
- 2.0.0-beta.10 ... 6 years ago
- 2.0.0-beta.9 ... 6 years ago
- 2.0.0-beta.8 ... 6 years ago
- 2.0.0-beta.7 ... 6 years ago
- 2.0.0-beta.6 ... 6 years ago
- 2.0.0-beta.5 ... 6 years ago
- 2.0.0-beta.4 ... 6 years ago
- 2.0.0-beta.3 ... 6 years ago
- 2.0.0-beta.2 ... 6 years ago
- 2.0.0-beta.1 ... 6 years ago
- 1.5.4-beta.0 ... 6 years ago
- 1.5.3 [deprecated] ... 6 years ago
- 1.5.2 [deprecated] ... 6 years ago
- 1.5.1 [deprecated] ... 6 years ago
- 1.5.0 [deprecated] ... 6 years ago
- 1.4.0-beta.1 ... 6 years ago
- 1.4.0-beta.0 ... 6 years ago
- 1.3.10 [deprecated] ... 6 years ago
- 1.3.9-beta.1 ... 6 years ago
- 1.3.9 [deprecated] ... 6 years ago
- 1.3.8 [deprecated] ... 6 years ago
- 1.3.7 [deprecated] ... 6 years ago
- 1.3.6 [deprecated] ... 6 years ago
- 1.3.5 [deprecated] ... 6 years ago
- 1.3.4 [deprecated] ... 6 years ago
- 1.3.3 [deprecated] ... 6 years ago
- 1.3.2 [deprecated] ... 6 years ago
- 1.3.1 [deprecated] ... 6 years ago
- 1.3.0-beta.0 ... 6 years ago
- 1.3.0 [deprecated] ... 6 years ago
- 1.2.7 [deprecated] ... 6 years ago
- 1.2.4 [deprecated] ... 6 years ago
- 1.2.2 [deprecated] ... 6 years ago
- 1.2.1 [deprecated] ... 6 years ago
- 1.2.0 [deprecated] ... 6 years ago
- 1.1.0 [deprecated] ... 6 years ago
- 1.0.8 [deprecated] ... 6 years ago
- 1.0.7 [deprecated] ... 6 years ago
- 1.0.6 [deprecated] ... 6 years ago
- 1.0.5 [deprecated] ... 6 years ago
- 1.0.4 [deprecated] ... 6 years ago
- 1.0.3 [deprecated] ... 6 years ago
- 1.0.2 [deprecated] ... 6 years ago
Maintainers (1)
drcmda
Downloads
Total
3
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
0
Dependencies (11)
- @babel/runtime ^7.10.2
- @juggle/resize-observer ^3.2.0
- drei ^0.0.55
- react-merge-refs ^1.0.0
- react-promise-suspense ^0.3.3
- react-reconciler 0.25.1
- react-use-measure ^2.0.1
- resize-observer-polyfill ^1.5.1
- scheduler 0.19.1
- tiny-emitter ^2.1.0
- utility-types ^3.10.0
Dev Dependencies (0)
None
Dependents (2)