npmpackage.info

Gathering detailed insights and metrics for @react-three/fiber

Other packages similar to @react-three/fiber

@react-three/drei

10.3.0

useful add-ons for react-three-fiber

react-three-fiber

6.0.13

A React renderer for Threejs

@react-spring/three

10.0.1

[`react-three-fiber`](https://github.com/drcmda/react-three-fiber) support. This package is for version 6 of react-three-fiber

@react-three/postprocessing

3.0.4

postprocessing wrapper for React and @react-three/fiber

Gathering detailed insights and metrics for @react-three/fiber

@react-three/fiber - 9.1.4 | npmpackage.info

@react-three/fiber

🇨🇭 A React renderer for Three.js

9.1.4

29,145

MIT

TypeScript

47.63 kB

46,864,945 3.7

Installations

npm install @react-three/fiber

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

24.1.0

NPM Version

11.2.0 Score

60.8

Supply Chain

37.6

Quality

81.2

Maintenance

Vulnerability

License

Pull Requests

Open

15

Total

792

Closed

133

Merged

644

Issues

Open

80

Total

1,114

Closed

1,034

Releases

125

v9.1.4

Updated on Jun 29, 2025

v9.1.3

Updated on Jun 29, 2025

v9.1.2

Updated on Apr 06, 2025

v9.1.1

Updated on Mar 31, 2025

v9.1.0

Updated on Mar 08, 2025

v9.0.4

Updated on Feb 20, 2025

View All 125 releases

Languages

TypeScript

CSS

JavaScript

HTML

Shell

TypeScript (98.69%)

CSS (0.82%)

JavaScript (0.36%)

HTML (0.11%)

Shell (0.02%)

Developer

pmndrs

Download Statistics

Total Downloads

46,864,945

Last Day

37,924

Last Week

620,809

Last Month

2,645,981

Last Year

22,814,083

GitHub Statistics

MIT License

29,145 Stars

2,765 Commits

1,700 Forks

211 Watchers

24 Branches

234 Contributors

Updated on Jul 01, 2025

Bundle Size

150.90 kB

Minified

47.63 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 234 Contributors

Package Meta Information

Latest Version

9.1.4

Package Id

@react-three/fiber@9.1.4

Unpacked Size

389.13 kB

Size

93.80 kB

File Count

NPM Version

11.2.0

Node Version

24.1.0

Published on

Jun 29, 2025

Total Downloads

Cumulative downloads

Total Downloads

46,864,945

Last Day

-24.6%

37,924

Compared to previous day

Last Week

-11.4%

620,809

Compared to previous week

Last Month

5.2%

2,645,981

Compared to previous month

Last Year

62%

22,814,083

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-three-fiber

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.

1npm install three @react-three/fiber

Does it have limitations?

None. Everything that works in Threejs will work here without exception.

Is it slower than plain Threejs?

No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.

Can it keep up with frequent feature updates to Threejs?

Yes. It merely expresses Threejs in JSX: <mesh /> becomes new THREE.Mesh(), and that happens dynamically. If a new Threejs version adds, removes or changes features, it will be available to you instantly without depending on updates to this library.

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).

1import { createRoot } from 'react-dom/client'
2import React, { useRef, useState } from 'react'
3import { Canvas, useFrame } from '@react-three/fiber'
4
5function Box(props) {
6  // This reference gives us direct access to the THREE.Mesh object
7  const ref = useRef()
8  // Hold state for hovered and clicked events
9  const [hovered, hover] = useState(false)
10  const [clicked, click] = useState(false)
11  // Subscribe this component to the render-loop, rotate the mesh every frame
12  useFrame((state, delta) => (ref.current.rotation.x += delta))
13  // Return the view, these are regular Threejs elements expressed in JSX
14  return (
15    <mesh
16      {...props}
17      ref={ref}
18      scale={clicked ? 1.5 : 1}
19      onClick={(event) => click(!clicked)}
20      onPointerOver={(event) => hover(true)}
21      onPointerOut={(event) => hover(false)}>
22      <boxGeometry args={[1, 1, 1]} />
23      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
24    </mesh>
25  )
26}
27
28createRoot(document.getElementById('root')).render(
29  <Canvas>
30    <ambientLight />
31    <pointLight position={[10, 10, 10]} />
32    <Box position={[-1.2, 0, 0]} />
33    <Box position={[1.2, 0, 0]} />
34  </Canvas>,
35)

Show TypeScript example

1npm install @types/three

1import * as THREE from 'three'
2import { createRoot } from 'react-dom/client'
3import React, { useRef, useState } from 'react'
4import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
5
6function Box(props: ThreeElements['mesh']) {
7  const ref = useRef<THREE.Mesh>(null!)
8  const [hovered, hover] = useState(false)
9  const [clicked, click] = useState(false)
10  useFrame((state, delta) => (ref.current.rotation.x += delta))
11  return (
12    <mesh
13      {...props}
14      ref={ref}
15      scale={clicked ? 1.5 : 1}
16      onClick={(event) => click(!clicked)}
17      onPointerOver={(event) => hover(true)}
18      onPointerOut={(event) => hover(false)}>
19      <boxGeometry args={[1, 1, 1]} />
20      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
21    </mesh>
22  )
23}
24
25createRoot(document.getElementById('root') as HTMLElement).render(
26  <Canvas>
27    <ambientLight />
28    <pointLight position={[10, 10, 10]} />
29    <Box position={[-1.2, 0, 0]} />
30    <Box position={[1.2, 0, 0]} />
31  </Canvas>,
32)

Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

Show React Native example

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.

1# Install expo-cli, this will create our app
2npm install expo-cli -g
3# Create app and cd into it
4expo init my-app
5cd my-app
6# Install dependencies
7npm install three @react-three/fiber react
8# Start
9expo 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:

1// metro.config.js
2module.exports = {
3  resolver: {
4    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
5    assetExts: ['glb', 'png', 'jpg'],
6  },
7}

1import React, { useRef, useState } from 'react'
2import { Canvas, useFrame } from '@react-three/fiber/native'
3function Box(props) {
4  const mesh = useRef(null)
5  const [hovered, setHover] = useState(false)
6  const [active, setActive] = useState(false)
7  useFrame((state, delta) => (mesh.current.rotation.x += delta))
8  return (
9    <mesh
10      {...props}
11      ref={mesh}
12      scale={active ? 1.5 : 1}
13      onClick={(event) => setActive(!active)}
14      onPointerOver={(event) => setHover(true)}
15      onPointerOut={(event) => setHover(false)}>
16      <boxGeometry args={[1, 1, 1]} />
17      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
18    </mesh>
19  )
20}
21export default function App() {
22  return (
23    <Canvas>
24      <ambientLight />
25      <pointLight position={[10, 10, 10]} />
26      <Box position={[-1.2, 0, 0]} />
27      <Box position={[1.2, 0, 0]} />
28    </Canvas>
29  )
30}

Documentation, tutorials, examples

Visit docs.pmnd.rs

Fundamentals

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:

Make sure you have a basic grasp of Threejs. Keep that site open.
When you know what a scene is, a camera, mesh, geometry, material, fork the demo above.
Look up the JSX elements that you see (mesh, ambientLight, etc), all threejs exports are native to three-fiber.
Try changing some values, scroll through our API to see what the various settings and hooks do.

Some reading material:

Threejs-docs
Threejs-examples
Threejs-fundamentals
three.js-journey
Discover Threejs
Do's and don'ts for performance and best practices
react-three-fiber alligator.io tutorial by @dghez_

Ecosystem

@react-three/gltfjsx – turns GLTFs into JSX components
@react-three/drei – useful helpers for react-three-fiber
@react-three/postprocessing – post-processing effects
@react-three/flex – flexbox for react-three-fiber
@react-three/xr – VR/AR controllers and events
@react-three/cannon – physics based hooks
@react-three/a11y – real a11y for your scene
zustand – state management
react-spring – a spring-physics-based animation library
react-use-gesture – mouse/touch gestures
leva – create GUI controls in seconds

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.

Backers

Thank you to all our backers! 🙏

Contributors

This project exists thanks to all the people who contribute.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.7

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @react-three/fiber

Other packages similar to @react-three/fiber

@react-three/fiber

Installations

Developer Guide

Yes

CommonJS

24.1.0

11.2.0

Score

Pull Requests

15

792

133

644

Issues

80

1,114

1,034

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

150.90 kB

47.63 kB

Maintainers

Package Meta Information

Total Downloads

46,864,945

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

react-three-fiber

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?

Documentation, tutorials, examples

Fundamentals

Ecosystem

How to contribute

Backers

Contributors

10

10

10

10

3

0

0

0

0

0

0

0

0

3.7

/10