Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Three.js | 92,408 | 10 hours ago | 505 | mit | JavaScript | |||||
JavaScript 3D Library. | ||||||||||
React Three Fiber | 22,732 | 123 | a day ago | 147 | September 23, 2022 | 61 | mit | TypeScript | ||
🇨🇭 A React renderer for Three.js | ||||||||||
React Three Next | 1,520 | 10 days ago | 10 | mit | JavaScript | |||||
React Three Fiber, Nextjs, Tailwind and Styled-components starter | ||||||||||
3dtilesrendererjs | 1,079 | 2 days ago | 30 | July 02, 2022 | 42 | apache-2.0 | JavaScript | |||
Renderer for 3D Tiles in Javascript using three.js | ||||||||||
Three Gpu Pathtracer | 950 | 16 days ago | 5 | July 16, 2022 | 107 | mit | JavaScript | |||
Path tracing renderer and utilities for three.js built on top of three-mesh-bvh. | ||||||||||
Ray Tracing Renderer | 557 | 1 | a year ago | 43 | October 05, 2020 | 58 | mit | JavaScript | ||
[UNMAINTAINED] Real-time path tracing on the web with three.js | ||||||||||
Threevr | 412 | 6 years ago | 15 | JavaScript | ||||||
An orientation-aware Virtual Reality controller for web browsers built on top of three.js | ||||||||||
Css3d.js | 361 | 11 years ago | 1 | mit | JavaScript | |||||
CSS 3D renderer for Three.js. | ||||||||||
Ngraph.pixel | 288 | 9 | 3 | 24 days ago | 24 | September 18, 2017 | 10 | mit | JavaScript | |
Fast graph renderer based on low level ShaderMaterial from three.js | ||||||||||
D3 Threejs | 287 | 6 years ago | mit | JavaScript | ||||||
CSS 3D Transforms with D3 and THREE.js |
react-three-fiber is a React renderer for threejs.
Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.
npm install three @types/three @react-three/fiber
None. Everything that works in Threejs will work here without exception.
No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.
Yes. It merely expresses Threejs in JSX, <mesh />
dynamically turns into new THREE.Mesh()
. If a new Threejs version adds, removes or changes features, it will be available to you instantly without depending on updates to this library.
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 { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
function Box(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef()
// Hold state for hovered and clicked events
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (ref.current.rotation.x += delta))
// Return the view, these are regular Threejs elements expressed in JSX
return (
<mesh
{...props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
createRoot(document.getElementById('root')).render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
)
npm install @types/three
import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
function Box(props: ThreeElements['mesh']) {
const ref = useRef<THREE.Mesh>(null!)
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
useFrame((state, delta) => (ref.current.rotation.x += delta))
return (
<mesh
{...props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
createRoot(document.getElementById('root') as HTMLElement).render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
)
Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
This example relies on react 18 and uses expo-cli
, but you can create a bare project with their template or with the react-native
CLI.
# Install expo-cli, this will create our app
npm install expo-cli -g
# Create app and cd into it
expo init my-app
cd my-app
# Install dependencies
npm install three @react-three/[email protected] [email protected]
# Start
expo start
Some configuration may be required to tell the Metro bundler about your assets if you use useLoader
or Drei abstractions like useGLTF
and useTexture
:
// metro.config.js
module.exports = {
resolver: {
sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
assetExts: ['glb', 'png', 'jpg'],
},
}
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber/native'
function Box(props) {
const mesh = useRef(null)
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
useFrame((state, delta) => (mesh.current.rotation.x += delta))
return (
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
)
}
Visit docs.pmnd.rs
You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official React docs, especially the section about hooks. As for Threejs, make sure you at least glance over the following links:
Some helpful material:
There is a vibrant and extensive eco system around three-fiber, full of libraries, helpers and abstractions.
@react-three/drei
– useful helpers, this is an eco system in itself@react-three/gltfjsx
– turns GLTFs into JSX components@react-three/postprocessing
– post-processing effects@react-three/test-renderer
– for unit tests in node@react-three/offscreen
– offscreen/worker canvas for react-three-fiber@react-three/flex
– flexbox for react-three-fiber@react-three/xr
– VR/AR controllers and events@react-three/csg
– constructive solid geometry@react-three/rapier
– 3D physics using Rapier@react-three/cannon
– 3D physics using Cannon@react-three/p2
– 2D physics using P2@react-three/a11y
– real a11y for your scene@react-three/gpu-pathtracer
– realistic path tracingcreate-r3f-app next
– nextjs starterlamina
– layer based shader materialszustand
– flux based state managementjotai
– atoms based state managementvaltio
– proxy based state managementreact-spring
– a spring-physics-based animation libraryframer-motion-3d
– framer motion, a popular animation libraryuse-gesture
– mouse/touch gesturesleva
– create GUI controls in secondsmaath
– a kitchen sink for math helpersminiplex
– ECS (entity management system)composer-suite
– composing shaders, particles, effects and game mechanicsIf 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
.
Thank you to all our backers!
This project exists thanks to all the people who contribute.