@gnsx/react-three-fiber 10.0.2 → 10.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/index.cjs +52 -8
- package/dist/index.d.cts +2742 -2742
- package/dist/index.d.mts +2742 -2742
- package/dist/index.d.ts +2742 -2742
- package/dist/index.mjs +52 -8
- package/dist/legacy.cjs +52 -8
- package/dist/legacy.d.cts +2742 -2742
- package/dist/legacy.d.mts +2742 -2742
- package/dist/legacy.d.ts +2742 -2742
- package/dist/legacy.mjs +52 -8
- package/dist/webgpu/index.cjs +52 -8
- package/dist/webgpu/index.d.cts +2789 -2789
- package/dist/webgpu/index.d.mts +2789 -2789
- package/dist/webgpu/index.d.ts +2789 -2789
- package/dist/webgpu/index.mjs +52 -8
- package/package.json +1 -1
- package/react-reconciler/constants.d.ts +7 -7
- package/react-reconciler/index.d.ts +1044 -1044
- package/readme.md +244 -244
package/readme.md
CHANGED
|
@@ -1,244 +1,244 @@
|
|
|
1
|
-
<h1>@react-three/fiber</h1>
|
|
2
|
-
|
|
3
|
-
[](https://npmjs.com/package/@react-three/fiber)
|
|
4
|
-
[](https://npmjs.com/package/@react-three/fiber)
|
|
5
|
-
[](https://twitter.com/pmndrs)
|
|
6
|
-
[](https://discord.gg/ZZjjNvJ)
|
|
7
|
-
[](https://opencollective.com/react-three-fiber)
|
|
8
|
-
[](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)
|
|
9
|
-
[](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)
|
|
10
|
-
|
|
11
|
-
<a href="https://docs.pmnd.rs/react-three-fiber/getting-started/examples"><img src="docs/banner-r3f.jpg" /></a>
|
|
12
|
-
|
|
13
|
-
react-three-fiber is a <a href="https://reactjs.org/docs/codebase-overview.html#renderers">React renderer</a> for threejs.
|
|
14
|
-
|
|
15
|
-
Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
yarn install three @types/three @react-three/fiber
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
> [!WARNING]
|
|
22
|
-
> Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three/fiber@8 pairs with react@18, @react-three/fiber@9+ pairs with react@19.
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
#### Does it have limitations?
|
|
27
|
-
|
|
28
|
-
None. Everything that works in Threejs will work here without exception.
|
|
29
|
-
|
|
30
|
-
#### Is it slower than plain Threejs?
|
|
31
|
-
|
|
32
|
-
No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.
|
|
33
|
-
|
|
34
|
-
#### Can it keep up with frequent feature updates to Threejs?
|
|
35
|
-
|
|
36
|
-
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.
|
|
37
|
-
|
|
38
|
-
#### Does it support WebGPU?
|
|
39
|
-
|
|
40
|
-
Yes. With minor changes in v9 and significant work in v10 WebGPU support is first class. We support all ThreeJS WebGPU features/Nodes and expand it with our own hooks and utilities.
|
|
41
|
-
|
|
42
|
-
### What does it look like?
|
|
43
|
-
|
|
44
|
-
<table>
|
|
45
|
-
<tbody>
|
|
46
|
-
<tr>
|
|
47
|
-
<td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
|
|
48
|
-
<td>
|
|
49
|
-
<a href="https://codesandbox.io/s/rrppl0y8l4">
|
|
50
|
-
<img src="/docs/basic-app.gif" />
|
|
51
|
-
</a>
|
|
52
|
-
</td>
|
|
53
|
-
</tr>
|
|
54
|
-
</tbody>
|
|
55
|
-
</table>
|
|
56
|
-
|
|
57
|
-
```jsx
|
|
58
|
-
import { createRoot } from 'react-dom/client'
|
|
59
|
-
import React, { useRef, useState } from 'react'
|
|
60
|
-
import { Canvas, useFrame } from '@react-three/fiber'
|
|
61
|
-
|
|
62
|
-
function Box(props) {
|
|
63
|
-
// This reference gives us direct access to the THREE.Mesh object
|
|
64
|
-
const ref = useRef()
|
|
65
|
-
// Hold state for hovered and clicked events
|
|
66
|
-
const [hovered, hover] = useState(false)
|
|
67
|
-
const [clicked, click] = useState(false)
|
|
68
|
-
// Subscribe this component to the render-loop, rotate the mesh every frame
|
|
69
|
-
useFrame(({ delta }) => (ref.current.rotation.x += delta))
|
|
70
|
-
// Return the view, these are regular Threejs elements expressed in JSX
|
|
71
|
-
return (
|
|
72
|
-
<mesh
|
|
73
|
-
{...props}
|
|
74
|
-
ref={ref}
|
|
75
|
-
scale={clicked ? 1.5 : 1}
|
|
76
|
-
onClick={(event) => click(!clicked)}
|
|
77
|
-
onPointerOver={(event) => hover(true)}
|
|
78
|
-
onPointerOut={(event) => hover(false)}>
|
|
79
|
-
<boxGeometry args={[1, 1, 1]} />
|
|
80
|
-
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
81
|
-
</mesh>
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
createRoot(document.getElementById('root')).render(
|
|
86
|
-
<Canvas>
|
|
87
|
-
<ambientLight intensity={Math.PI / 2} />
|
|
88
|
-
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
89
|
-
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
90
|
-
<Box position={[-1.2, 0, 0]} />
|
|
91
|
-
<Box position={[1.2, 0, 0]} />
|
|
92
|
-
</Canvas>,
|
|
93
|
-
)
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
<details>
|
|
97
|
-
<summary>Show TypeScript example</summary>
|
|
98
|
-
|
|
99
|
-
```bash
|
|
100
|
-
npm install @types/three
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
import * as THREE from 'three'
|
|
105
|
-
import { createRoot } from 'react-dom/client'
|
|
106
|
-
import React, { useRef, useState } from 'react'
|
|
107
|
-
import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
|
|
108
|
-
|
|
109
|
-
function Box(props: ThreeElements['mesh']) {
|
|
110
|
-
const ref = useRef<THREE.Mesh>(null!)
|
|
111
|
-
const [hovered, hover] = useState(false)
|
|
112
|
-
const [clicked, click] = useState(false)
|
|
113
|
-
useFrame((state, delta) => (ref.current.rotation.x += delta))
|
|
114
|
-
return (
|
|
115
|
-
<mesh
|
|
116
|
-
{...props}
|
|
117
|
-
ref={ref}
|
|
118
|
-
scale={clicked ? 1.5 : 1}
|
|
119
|
-
onClick={(event) => click(!clicked)}
|
|
120
|
-
onPointerOver={(event) => hover(true)}
|
|
121
|
-
onPointerOut={(event) => hover(false)}>
|
|
122
|
-
<boxGeometry args={[1, 1, 1]} />
|
|
123
|
-
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
124
|
-
</mesh>
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
createRoot(document.getElementById('root') as HTMLElement).render(
|
|
129
|
-
<Canvas>
|
|
130
|
-
<ambientLight intensity={Math.PI / 2} />
|
|
131
|
-
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
132
|
-
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
133
|
-
<Box position={[-1.2, 0, 0]} />
|
|
134
|
-
<Box position={[1.2, 0, 0]} />
|
|
135
|
-
</Canvas>,
|
|
136
|
-
)
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
TODO: Move this
|
|
140
|
-
Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
|
|
141
|
-
|
|
142
|
-
</details>
|
|
143
|
-
|
|
144
|
-
<details>
|
|
145
|
-
<summary>Show React Native example</summary>
|
|
146
|
-
|
|
147
|
-
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.
|
|
148
|
-
|
|
149
|
-
```bash
|
|
150
|
-
# Install expo-cli, this will create our app
|
|
151
|
-
npm install expo-cli -g
|
|
152
|
-
# Create app and cd into it
|
|
153
|
-
expo init my-app
|
|
154
|
-
cd my-app
|
|
155
|
-
# Install dependencies
|
|
156
|
-
npm install three @react-three/fiber@beta react@rc
|
|
157
|
-
# Start
|
|
158
|
-
expo start
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
Some configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:
|
|
162
|
-
|
|
163
|
-
```js
|
|
164
|
-
// metro.config.js
|
|
165
|
-
module.exports = {
|
|
166
|
-
resolver: {
|
|
167
|
-
sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
|
|
168
|
-
assetExts: ['glb', 'png', 'jpg'],
|
|
169
|
-
},
|
|
170
|
-
}
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
```tsx
|
|
174
|
-
import React, { useRef, useState } from 'react'
|
|
175
|
-
import { Canvas, useFrame } from '@react-three/fiber/native'
|
|
176
|
-
function Box(props) {
|
|
177
|
-
const mesh = useRef(null)
|
|
178
|
-
const [hovered, setHover] = useState(false)
|
|
179
|
-
const [active, setActive] = useState(false)
|
|
180
|
-
useFrame((state, delta) => (mesh.current.rotation.x += delta))
|
|
181
|
-
return (
|
|
182
|
-
<mesh
|
|
183
|
-
{...props}
|
|
184
|
-
ref={mesh}
|
|
185
|
-
scale={active ? 1.5 : 1}
|
|
186
|
-
onClick={(event) => setActive(!active)}
|
|
187
|
-
onPointerOver={(event) => setHover(true)}
|
|
188
|
-
onPointerOut={(event) => setHover(false)}>
|
|
189
|
-
<boxGeometry args={[1, 1, 1]} />
|
|
190
|
-
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
191
|
-
</mesh>
|
|
192
|
-
)
|
|
193
|
-
}
|
|
194
|
-
export default function App() {
|
|
195
|
-
return (
|
|
196
|
-
<Canvas>
|
|
197
|
-
<ambientLight intensity={Math.PI / 2} />
|
|
198
|
-
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
199
|
-
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
200
|
-
<Box position={[-1.2, 0, 0]} />
|
|
201
|
-
<Box position={[1.2, 0, 0]} />
|
|
202
|
-
</Canvas>
|
|
203
|
-
)
|
|
204
|
-
}
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
</details>
|
|
208
|
-
|
|
209
|
-
---
|
|
210
|
-
|
|
211
|
-
# Documentation, tutorials, examples
|
|
212
|
-
|
|
213
|
-
Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber) | [Awesome React Three Fiber](AwesomeR3F.md)
|
|
214
|
-
|
|
215
|
-
# First steps
|
|
216
|
-
|
|
217
|
-
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](https://react.dev/learn), especially [the section about hooks](https://react.dev/reference/react). As for Threejs, make sure you at least glance over the following links:
|
|
218
|
-
|
|
219
|
-
1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
|
|
220
|
-
2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
|
|
221
|
-
3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
|
|
222
|
-
4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber) to see what the various settings and hooks do.
|
|
223
|
-
|
|
224
|
-
# How to contribute
|
|
225
|
-
|
|
226
|
-
See the [Development Guide](docs/development/README.md) for setup, workflow, and [contributing standards](docs/development/CONTRIBUTING.md).
|
|
227
|
-
|
|
228
|
-
All contributions are welcome as well as donations to [Open Collective](https://opencollective.com/pmndrs).
|
|
229
|
-
|
|
230
|
-
#### Backers
|
|
231
|
-
|
|
232
|
-
Thank you to all our backers! 🙏
|
|
233
|
-
|
|
234
|
-
<a href="https://opencollective.com/pmndrsr#backers" target="_blank">
|
|
235
|
-
<img src="https://opencollective.com/pmndrs/backers.svg?width=890"/>
|
|
236
|
-
</a>
|
|
237
|
-
|
|
238
|
-
#### Contributors
|
|
239
|
-
|
|
240
|
-
This project exists thanks to all the people who contribute.
|
|
241
|
-
|
|
242
|
-
<a href="https://github.com/pmndrs/react-three-fiber/graphs/contributors">
|
|
243
|
-
<img src="https://opencollective.com/react-three-fiber/contributors.svg?width=890" />
|
|
244
|
-
</a>
|
|
1
|
+
<h1>@react-three/fiber</h1>
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.com/package/@react-three/fiber)
|
|
4
|
+
[](https://npmjs.com/package/@react-three/fiber)
|
|
5
|
+
[](https://twitter.com/pmndrs)
|
|
6
|
+
[](https://discord.gg/ZZjjNvJ)
|
|
7
|
+
[](https://opencollective.com/react-three-fiber)
|
|
8
|
+
[](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)
|
|
9
|
+
[](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)
|
|
10
|
+
|
|
11
|
+
<a href="https://docs.pmnd.rs/react-three-fiber/getting-started/examples"><img src="docs/banner-r3f.jpg" /></a>
|
|
12
|
+
|
|
13
|
+
react-three-fiber is a <a href="https://reactjs.org/docs/codebase-overview.html#renderers">React renderer</a> for threejs.
|
|
14
|
+
|
|
15
|
+
Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
yarn install three @types/three @react-three/fiber
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
> [!WARNING]
|
|
22
|
+
> Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three/fiber@8 pairs with react@18, @react-three/fiber@9+ pairs with react@19.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
#### Does it have limitations?
|
|
27
|
+
|
|
28
|
+
None. Everything that works in Threejs will work here without exception.
|
|
29
|
+
|
|
30
|
+
#### Is it slower than plain Threejs?
|
|
31
|
+
|
|
32
|
+
No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.
|
|
33
|
+
|
|
34
|
+
#### Can it keep up with frequent feature updates to Threejs?
|
|
35
|
+
|
|
36
|
+
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.
|
|
37
|
+
|
|
38
|
+
#### Does it support WebGPU?
|
|
39
|
+
|
|
40
|
+
Yes. With minor changes in v9 and significant work in v10 WebGPU support is first class. We support all ThreeJS WebGPU features/Nodes and expand it with our own hooks and utilities.
|
|
41
|
+
|
|
42
|
+
### What does it look like?
|
|
43
|
+
|
|
44
|
+
<table>
|
|
45
|
+
<tbody>
|
|
46
|
+
<tr>
|
|
47
|
+
<td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
|
|
48
|
+
<td>
|
|
49
|
+
<a href="https://codesandbox.io/s/rrppl0y8l4">
|
|
50
|
+
<img src="/docs/basic-app.gif" />
|
|
51
|
+
</a>
|
|
52
|
+
</td>
|
|
53
|
+
</tr>
|
|
54
|
+
</tbody>
|
|
55
|
+
</table>
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
import { createRoot } from 'react-dom/client'
|
|
59
|
+
import React, { useRef, useState } from 'react'
|
|
60
|
+
import { Canvas, useFrame } from '@react-three/fiber'
|
|
61
|
+
|
|
62
|
+
function Box(props) {
|
|
63
|
+
// This reference gives us direct access to the THREE.Mesh object
|
|
64
|
+
const ref = useRef()
|
|
65
|
+
// Hold state for hovered and clicked events
|
|
66
|
+
const [hovered, hover] = useState(false)
|
|
67
|
+
const [clicked, click] = useState(false)
|
|
68
|
+
// Subscribe this component to the render-loop, rotate the mesh every frame
|
|
69
|
+
useFrame(({ delta }) => (ref.current.rotation.x += delta))
|
|
70
|
+
// Return the view, these are regular Threejs elements expressed in JSX
|
|
71
|
+
return (
|
|
72
|
+
<mesh
|
|
73
|
+
{...props}
|
|
74
|
+
ref={ref}
|
|
75
|
+
scale={clicked ? 1.5 : 1}
|
|
76
|
+
onClick={(event) => click(!clicked)}
|
|
77
|
+
onPointerOver={(event) => hover(true)}
|
|
78
|
+
onPointerOut={(event) => hover(false)}>
|
|
79
|
+
<boxGeometry args={[1, 1, 1]} />
|
|
80
|
+
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
81
|
+
</mesh>
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
createRoot(document.getElementById('root')).render(
|
|
86
|
+
<Canvas>
|
|
87
|
+
<ambientLight intensity={Math.PI / 2} />
|
|
88
|
+
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
89
|
+
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
90
|
+
<Box position={[-1.2, 0, 0]} />
|
|
91
|
+
<Box position={[1.2, 0, 0]} />
|
|
92
|
+
</Canvas>,
|
|
93
|
+
)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
<details>
|
|
97
|
+
<summary>Show TypeScript example</summary>
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
npm install @types/three
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import * as THREE from 'three'
|
|
105
|
+
import { createRoot } from 'react-dom/client'
|
|
106
|
+
import React, { useRef, useState } from 'react'
|
|
107
|
+
import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
|
|
108
|
+
|
|
109
|
+
function Box(props: ThreeElements['mesh']) {
|
|
110
|
+
const ref = useRef<THREE.Mesh>(null!)
|
|
111
|
+
const [hovered, hover] = useState(false)
|
|
112
|
+
const [clicked, click] = useState(false)
|
|
113
|
+
useFrame((state, delta) => (ref.current.rotation.x += delta))
|
|
114
|
+
return (
|
|
115
|
+
<mesh
|
|
116
|
+
{...props}
|
|
117
|
+
ref={ref}
|
|
118
|
+
scale={clicked ? 1.5 : 1}
|
|
119
|
+
onClick={(event) => click(!clicked)}
|
|
120
|
+
onPointerOver={(event) => hover(true)}
|
|
121
|
+
onPointerOut={(event) => hover(false)}>
|
|
122
|
+
<boxGeometry args={[1, 1, 1]} />
|
|
123
|
+
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
124
|
+
</mesh>
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
createRoot(document.getElementById('root') as HTMLElement).render(
|
|
129
|
+
<Canvas>
|
|
130
|
+
<ambientLight intensity={Math.PI / 2} />
|
|
131
|
+
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
132
|
+
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
133
|
+
<Box position={[-1.2, 0, 0]} />
|
|
134
|
+
<Box position={[1.2, 0, 0]} />
|
|
135
|
+
</Canvas>,
|
|
136
|
+
)
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
TODO: Move this
|
|
140
|
+
Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
|
|
141
|
+
|
|
142
|
+
</details>
|
|
143
|
+
|
|
144
|
+
<details>
|
|
145
|
+
<summary>Show React Native example</summary>
|
|
146
|
+
|
|
147
|
+
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.
|
|
148
|
+
|
|
149
|
+
```bash
|
|
150
|
+
# Install expo-cli, this will create our app
|
|
151
|
+
npm install expo-cli -g
|
|
152
|
+
# Create app and cd into it
|
|
153
|
+
expo init my-app
|
|
154
|
+
cd my-app
|
|
155
|
+
# Install dependencies
|
|
156
|
+
npm install three @react-three/fiber@beta react@rc
|
|
157
|
+
# Start
|
|
158
|
+
expo start
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Some configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:
|
|
162
|
+
|
|
163
|
+
```js
|
|
164
|
+
// metro.config.js
|
|
165
|
+
module.exports = {
|
|
166
|
+
resolver: {
|
|
167
|
+
sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
|
|
168
|
+
assetExts: ['glb', 'png', 'jpg'],
|
|
169
|
+
},
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
import React, { useRef, useState } from 'react'
|
|
175
|
+
import { Canvas, useFrame } from '@react-three/fiber/native'
|
|
176
|
+
function Box(props) {
|
|
177
|
+
const mesh = useRef(null)
|
|
178
|
+
const [hovered, setHover] = useState(false)
|
|
179
|
+
const [active, setActive] = useState(false)
|
|
180
|
+
useFrame((state, delta) => (mesh.current.rotation.x += delta))
|
|
181
|
+
return (
|
|
182
|
+
<mesh
|
|
183
|
+
{...props}
|
|
184
|
+
ref={mesh}
|
|
185
|
+
scale={active ? 1.5 : 1}
|
|
186
|
+
onClick={(event) => setActive(!active)}
|
|
187
|
+
onPointerOver={(event) => setHover(true)}
|
|
188
|
+
onPointerOut={(event) => setHover(false)}>
|
|
189
|
+
<boxGeometry args={[1, 1, 1]} />
|
|
190
|
+
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
191
|
+
</mesh>
|
|
192
|
+
)
|
|
193
|
+
}
|
|
194
|
+
export default function App() {
|
|
195
|
+
return (
|
|
196
|
+
<Canvas>
|
|
197
|
+
<ambientLight intensity={Math.PI / 2} />
|
|
198
|
+
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
|
|
199
|
+
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
|
200
|
+
<Box position={[-1.2, 0, 0]} />
|
|
201
|
+
<Box position={[1.2, 0, 0]} />
|
|
202
|
+
</Canvas>
|
|
203
|
+
)
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
</details>
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
# Documentation, tutorials, examples
|
|
212
|
+
|
|
213
|
+
Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber) | [Awesome React Three Fiber](AwesomeR3F.md)
|
|
214
|
+
|
|
215
|
+
# First steps
|
|
216
|
+
|
|
217
|
+
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](https://react.dev/learn), especially [the section about hooks](https://react.dev/reference/react). As for Threejs, make sure you at least glance over the following links:
|
|
218
|
+
|
|
219
|
+
1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
|
|
220
|
+
2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
|
|
221
|
+
3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
|
|
222
|
+
4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber) to see what the various settings and hooks do.
|
|
223
|
+
|
|
224
|
+
# How to contribute
|
|
225
|
+
|
|
226
|
+
See the [Development Guide](docs/development/README.md) for setup, workflow, and [contributing standards](docs/development/CONTRIBUTING.md).
|
|
227
|
+
|
|
228
|
+
All contributions are welcome as well as donations to [Open Collective](https://opencollective.com/pmndrs).
|
|
229
|
+
|
|
230
|
+
#### Backers
|
|
231
|
+
|
|
232
|
+
Thank you to all our backers! 🙏
|
|
233
|
+
|
|
234
|
+
<a href="https://opencollective.com/pmndrsr#backers" target="_blank">
|
|
235
|
+
<img src="https://opencollective.com/pmndrs/backers.svg?width=890"/>
|
|
236
|
+
</a>
|
|
237
|
+
|
|
238
|
+
#### Contributors
|
|
239
|
+
|
|
240
|
+
This project exists thanks to all the people who contribute.
|
|
241
|
+
|
|
242
|
+
<a href="https://github.com/pmndrs/react-three-fiber/graphs/contributors">
|
|
243
|
+
<img src="https://opencollective.com/react-three-fiber/contributors.svg?width=890" />
|
|
244
|
+
</a>
|