@react-three/drei 10.0.0-rc.2 → 10.0.0

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.
Files changed (40) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +852 -852
  3. package/core/Billboard.js +8 -8
  4. package/core/Bounds.js +2 -2
  5. package/core/Bvh.js +2 -2
  6. package/core/Cloud.cjs.js +1 -1
  7. package/core/Cloud.js +1 -1
  8. package/core/ComputedAttribute.js +4 -4
  9. package/core/Example.js +2 -2
  10. package/core/Float.cjs.js +1 -1
  11. package/core/Float.js +1 -1
  12. package/core/Instances.js +3 -3
  13. package/core/MeshDistortMaterial.cjs.js +1 -1
  14. package/core/MeshDistortMaterial.js +1 -1
  15. package/core/MeshTransmissionMaterial.cjs.js +1 -1
  16. package/core/MeshTransmissionMaterial.js +1 -1
  17. package/core/MeshWobbleMaterial.cjs.js +1 -1
  18. package/core/MeshWobbleMaterial.js +1 -1
  19. package/core/MotionPathControls.cjs.js +1 -1
  20. package/core/MotionPathControls.d.ts +7 -13
  21. package/core/MotionPathControls.js +34 -25
  22. package/core/Points.js +4 -4
  23. package/core/ScreenSizer.js +12 -12
  24. package/core/ShadowAlpha.js +8 -8
  25. package/core/Stars.cjs.js +1 -1
  26. package/core/Stars.js +1 -1
  27. package/core/Text3D.js +3 -3
  28. package/core/index.cjs.js +1 -1
  29. package/core/index.js +2 -2
  30. package/core/softShadows.js +13 -13
  31. package/core/useContextBridge.js +4 -4
  32. package/helpers/deprecated.js +2 -2
  33. package/index.cjs.js +1 -1
  34. package/package.json +2 -2
  35. package/web/FaceControls.js +8 -8
  36. package/web/ScreenVideoTexture.js +2 -2
  37. package/web/WebcamVideoTexture.js +2 -2
  38. package/web/index.cjs.js +1 -1
  39. package/web/index.js +1 -1
  40. package/web/pivotControls/PlaneSlider.js +1 -1
package/README.md CHANGED
@@ -1,852 +1,852 @@
1
- [![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://drei.pmnd.rs/)
2
- [![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
3
- [![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
4
- [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)
5
- [![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei)
6
-
7
- [![logo](docs/logo.jpg)](https://codesandbox.io/s/bfplr)
8
-
9
- A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
10
-
11
- If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)!
12
-
13
- ```bash
14
- npm install @react-three/drei
15
- ```
16
-
17
- > [!IMPORTANT]
18
- > this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm).
19
-
20
- ## Basic usage
21
-
22
- ```jsx
23
- import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
24
- ```
25
-
26
- ## React-native
27
-
28
- ```jsx
29
- import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'
30
- ```
31
-
32
- The `native` route of the library **does not** export `Html` or `Loader`. The default export of the library is `web` which **does** export `Html` and `Loader`.
33
-
34
- ## Documentation
35
-
36
- https://pmndrs.github.io/drei
37
-
38
- <details>
39
- <summary>Old doc</summary>
40
-
41
- > [!WARNING]
42
- > Below is an archive of the anchors links with their new respective locations to the documentation website.
43
- > Do not update the links below, they are for reference only.
44
-
45
- <!-- <table>
46
- <tr>
47
- <td valign="top">
48
- <ul>
49
- <li><a href="#cameras">Cameras</a></li>
50
- <ul>
51
- <li><a href="#perspectivecamera">PerspectiveCamera</a></li>
52
- <li><a href="#orthographiccamera">OrthographicCamera</a></li>
53
- <li><a href="#cubecamera">CubeCamera</a></li>
54
- </ul>
55
- <li><a href="#controls">Controls</a></li>
56
- <ul>
57
- <li><a href="#cameracontrols">CameraControls</a></li>
58
- <li><a href="#controls">FlyControls</a></li>
59
- <li><a href="#controls">MapControls</a></li>
60
- <li><a href="#controls">DeviceOrientationControls</a></li>
61
- <li><a href="#controls">TrackballControls</a></li>
62
- <li><a href="#controls">ArcballControls</a></li>
63
- <li><a href="#controls">PointerLockControls</a></li>
64
- <li><a href="#controls">FirstPersonControls</a></li>
65
- <li><a href="#scrollcontrols">ScrollControls</a></li>
66
- <li><a href="#presentationcontrols">PresentationControls</a></li>
67
- <li><a href="#keyboardcontrols">KeyboardControls</a></li>
68
- <li><a href="#FaceControls">FaceControls</a></li>
69
- <li><a href="#motionpathcontrols">MotionPathControls</a></li>
70
- </ul>
71
- <li><a href="#gizmos">Gizmos</a></li>
72
- <ul>
73
- <li><a href="#gizmohelper">GizmoHelper</a></li>
74
- <li><a href="#pivotcontrols">PivotControls</a></li>
75
- <li><a href="#dragcontrols">DragControls</a></li>
76
- <li><a href="#transformcontrols">TransformControls</a></li>
77
- <li><a href="#grid">Grid</a></li>
78
- <li><a href="#helper--usehelper">Helper / useHelper</a></li>
79
- <li><a href="#helper">Helper</a></li>
80
- </ul>
81
- <li><a href="#abstractions">Abstractions</a></li>
82
- <ul>
83
- <li><a href="#image">Image</a></li>
84
- <li><a href="#text">Text</a></li>
85
- <li><a href="#text3d">Text3D</a></li>
86
- <li><a href="#positionalaudio">PositionalAudio</a></li>
87
- <li><a href="#billboard">Billboard</a></li>
88
- <li><a href="#screenspace">ScreenSpace</a></li>
89
- <li><a href="#screensizer">ScreenSizer</a></li>
90
- <li><a href="#effects">Effects</a></li>
91
- <li><a href="#gradienttexture">GradientTexture</a></li>
92
- <li><a href="#edges">Edges</a></li>
93
- <li><a href="#outlines">Outlines</a></li>
94
- <li><a href="#trail">Trail</a></li>
95
- <li><a href="#sampler">Sampler</a></li>
96
- <li><a href="#computedattribute">ComputedAttribute</a></li>
97
- <li><a href="#clone">Clone</a></li>
98
- <li><a href="#useanimations">useAnimations</a></li>
99
- <li><a href="#marchingcubes">MarchingCubes</a></li>
100
- <li><a href="#decal">Decal</a></li>
101
- <li><a href="#svg">Svg</a></li>
102
- <li><a href="#gltf">Gltf</a></li>
103
- <li><a href="#asciirenderer">AsciiRenderer</a></li>
104
- <li><a href="#splat">Splat</a></li>
105
- </ul>
106
- <li><a href="#shaders">Shaders</a></li>
107
- <ul>
108
- <li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li>
109
- <li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li>
110
- <li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li>
111
- <li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li>
112
- <li><a href="#meshtransmissionmaterial">MeshTransmissionMaterial</a></li>
113
- <li><a href="#meshdiscardmaterial">MeshDiscardMaterial</a></li>
114
- <li><a href="#pointmaterial">PointMaterial</a></li>
115
- <li><a href="#softshadows">SoftShadows</a></li>
116
- <li><a href="#shadermaterial">shaderMaterial</a></li>
117
- </ul>
118
- </ul>
119
- </td>
120
- <td valign="top">
121
- <ul>
122
- <li><a href="#misc">Misc</a></li>
123
- <ul>
124
- <li><a href="#example">Example</a></li>
125
- <li><a href="#html">Html</a></li>
126
- <li><a href="#cycleraycast">CycleRaycast</a></li>
127
- <li><a href="#select">Select</a></li>
128
- <li><a href="#sprite-animator">Sprite Animator</a></li>
129
- <li><a href="#stats">Stats</a></li>
130
- <li><a href="#stats-gl">StatsGl</a></li>
131
- <li><a href="#wireframe">Wireframe</a></li>
132
- <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
133
- <li><a href="#usecontextbridge">useContextBridge</a></li>
134
- <li><a href="#fbo--usefbo">Fbo / useFBO</a></li>
135
- <li><a href="#usecamera">useCamera</a></li>
136
- <li><a href="#cubecamera--usecubecamera">CubeCamera / useCubeCamera</a></li>
137
- <li><a href="#detectgpu--usedetectgpu">DetectGPU / useDetectGPU</a></li>
138
- <li><a href="#useaspect">useAspect</a></li>
139
- <li><a href="#usecursor">useCursor</a></li>
140
- <li><a href="#useintersect">useIntersect</a></li>
141
- <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
142
- <li><a href="#trail--useTrail">Trail / useTrail</a></li>
143
- <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li>
144
- <li><a href="#facelandmarker">FaceLandmarker</a></li>
145
- </ul>
146
- <li><a href="#loading">Loaders</a></li>
147
- <ul>
148
- <li><a href="#loader">Loader</a></li>
149
- <li><a href="#progress--useprogress">Progress / useProgress</a></li>
150
- <li><a href="#gltf--usegltf">Gltf / useGLTF</a></li>
151
- <li><a href="#fbx--usefbx">FBX / useFBX</a></li>
152
- <li><a href="#texture--usetexture">Texture / useTexture</a></li>
153
- <li><a href="#ktx2--usektx2">Ktx2 / useKTX2</a></li>
154
- <li><a href="#cubetexture--usecubetexture">CubeTexture / useCubeTexture</a></li>
155
- <li><a href="#videotexture--usevideotexture">VideoTexture / useVideoTexture</a></li>
156
- <li><a href="#trailtexture--usetrailtexture">TrailTexture / useTrailTexture</a></li>
157
- <li><a href="#usefont">useFont</a></li>
158
- <li><a href="#usespriteloader">useSpriteLoader</a></li>
159
- </ul>
160
- <li><a href="#performance">Performance</a></li>
161
- <ul>
162
- <li><a href="#instances">Instances</a></li>
163
- <li><a href="#merged">Merged</a></li>
164
- <li><a href="#points">Points</a></li>
165
- <li><a href="#segments">Segments</a></li>
166
- <li><a href="#detailed">Detailed</a></li>
167
- <li><a href="#preload">Preload</a></li>
168
- <li><a href="#bakeshadows">BakeShadows</a></li>
169
- <li><a href="#meshbounds">meshBounds</a></li>
170
- <li><a href="#adaptivedpr">AdaptiveDpr</a></li>
171
- <li><a href="#adaptiveevents">AdaptiveEvents</a></li>
172
- <li><a href="#bvh">Bvh</a></li>
173
- <li><a href="#performancemonitor">PerformanceMonitor</a></li>
174
- </ul>
175
- <li><a href="#portals">Portals</a></li>
176
- <ul>
177
- <li><a href="#hud">Hud</a></li>
178
- <li><a href="#view">View</a></li>
179
- <li><a href="#rendertexture">RenderTexture</a></li>
180
- <li><a href="#rendercubetexture">RenderCubeTexture</a></li>
181
- <li><a href="#fisheye">Fisheye</a></li>
182
- <li><a href="#mask">Mask</a></li>
183
- <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li>
184
- </ul>
185
- <li><a href="#modifiers">Modifiers</a></li>
186
- <ul>
187
- <li><a href="#curvemodifier">CurveModifier</a></li>
188
- </ul>
189
- </ul>
190
- </td>
191
- <td valign="top">
192
- <ul>
193
- <li><a href="#shapes">Shapes</a></li>
194
- <ul>
195
- <li><a href="#shapes">Plane</a></li>
196
- <li><a href="#shapes">Box</a></li>
197
- <li><a href="#shapes">Sphere</a></li>
198
- <li><a href="#shapes">Circle</a></li>
199
- <li><a href="#shapes">Cone</a></li>
200
- <li><a href="#shapes">Cylinder</a></li>
201
- <li><a href="#shapes">Tube</a></li>
202
- <li><a href="#shapes">Torus</a></li>
203
- <li><a href="#shapes">TorusKnot</a></li>
204
- <li><a href="#shapes">Ring</a></li>
205
- <li><a href="#shapes">Tetrahedron</a></li>
206
- <li><a href="#shapes">Polyhedron</a></li>
207
- <li><a href="#shapes">Icosahedron</a></li>
208
- <li><a href="#shapes">Octahedron</a></li>
209
- <li><a href="#shapes">Dodecahedron</a></li>
210
- <li><a href="#shapes">Extrude</a></li>
211
- <li><a href="#shapes">Lathe</a></li>
212
- <li><a href="#shapes">Shape</a></li>
213
- <li><a href="#roundedbox">RoundedBox</a></li>
214
- <li><a href="#screenquad">Screenquad</a></li>
215
- <li><a href="#line">Line</a></li>
216
- <li><a href="#quadraticbezierline">QuadraticBezierLine</a></li>
217
- <li><a href="#cubicbezierline">CubicBezierLine</a></li>
218
- <li><a href="#catmullromline">CatmullRomLine</a></li>
219
- <li><a href="#facemesh">Facemesh</a></li>
220
- </ul>
221
- <li><a href="#staging">Staging</a></li>
222
- <ul>
223
- <li><a href="#center">Center</a></li>
224
- <li><a href="#resize">Resize</a></li>
225
- <li><a href="#BBAnchor">BBAnchor</a></li>
226
- <li><a href="#bounds">Bounds</a></li>
227
- <li><a href="#camerashake">CameraShake</a></li>
228
- <li><a href="#float">Float</a></li>
229
- <li><a href="#stage">Stage</a></li>
230
- <li><a href="#backdrop">Backdrop</a></li>
231
- <li><a href="#environment">Environment</a></li>
232
- <li><a href="#lightformer">Lightformer</a></li>
233
- <li><a href="#spotlight">SpotLight</a></li>
234
- <li><a href="#spotlightshadow">SpotLightShadow</a></li>
235
- <li><a href="#shadow">Shadow</a></li>
236
- <li><a href="#caustics">Caustics</a></li>
237
- <li><a href="#contactshadows">ContactShadows</a></li>
238
- <li><a href="#randomizedlight">RandomizedLight</a></li>
239
- <li><a href="#accumulativeshadows">AccumulativeShadows</a></li>
240
- <li><a href="#sky">Sky</a></li>
241
- <li><a href="#stars">Stars</a></li>
242
- <li><a href="#sparkles">Sparkles</a></li>
243
- <li><a href="#cloud">Cloud</a></li>
244
- <li><a href="#useenvironment">useEnvironment</a></li>
245
- <li><a href="#matcaptexture--usematcaptexture">MatcapTexture / useMatcapTexture</a></li>
246
- <li><a href="#normaltexture--usenormaltexture">NormalTexture / useNormalTexture</a></li>
247
- <li><a href="#shadowalpha">ShadowAlpha</a></li>
248
- </ul>
249
- </ul>
250
- </td>
251
- </tr>
252
- </table> -->
253
-
254
- ### Cameras
255
-
256
- #### PerspectiveCamera
257
-
258
- [Documentation has moved here](https://pmndrs.github.io/drei/cameras/perspective-camera)
259
-
260
- #### OrthographicCamera
261
-
262
- [Documentation has moved here](https://pmndrs.github.io/drei/cameras/orthographic-camera)
263
-
264
- #### CubeCamera
265
-
266
- [Documentation has moved here](https://pmndrs.github.io/drei/cameras/cube-camera)
267
-
268
- ### Controls
269
-
270
- #### CameraControls
271
-
272
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/camera-controls)
273
-
274
- #### ScrollControls
275
-
276
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/scroll-controls)
277
-
278
- #### PresentationControls
279
-
280
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/presentation-controls)
281
-
282
- #### KeyboardControls
283
-
284
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/keyboard-controls)
285
-
286
- #### FaceControls
287
-
288
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/face-controls)
289
-
290
- #### MotionPathControls
291
-
292
- [Documentation has moved here](https://pmndrs.github.io/drei/controls/motion-path-controls)
293
-
294
- ### Gizmos
295
-
296
- #### GizmoHelper
297
-
298
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/gizmo-helper)
299
-
300
- #### PivotControls
301
-
302
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/pivot-controls)
303
-
304
- #### DragControls
305
-
306
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/drag-controls)
307
-
308
- #### TransformControls
309
-
310
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/transform-controls)
311
-
312
- #### Grid
313
-
314
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/grid)
315
-
316
- #### Helper / useHelper
317
-
318
- [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/helper-use-helper)
319
-
320
- ### Shapes
321
-
322
- #### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape
323
-
324
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/mesh)
325
-
326
- #### RoundedBox
327
-
328
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/rounded-box)
329
-
330
- #### ScreenQuad
331
-
332
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/screen-quad)
333
-
334
- #### Line
335
-
336
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/line)
337
-
338
- #### QuadraticBezierLine
339
-
340
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/quadratic-bezier-line)
341
-
342
- #### CubicBezierLine
343
-
344
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/cubic-bezier-line)
345
-
346
- #### CatmullRomLine
347
-
348
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/catmull-rom-line)
349
-
350
- #### Facemesh
351
-
352
- [Documentation has moved here](https://pmndrs.github.io/drei/shapes/facemesh)
353
-
354
- ### Abstractions
355
-
356
- #### Image
357
-
358
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/image)
359
-
360
- #### Text
361
-
362
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text)
363
-
364
- #### Text3D
365
-
366
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text3d)
367
-
368
- #### Effects
369
-
370
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/effects)
371
-
372
- #### PositionalAudio
373
-
374
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/positional-audio)
375
-
376
- #### Billboard
377
-
378
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/billboard)
379
-
380
- #### ScreenSpace
381
-
382
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-space)
383
-
384
- #### ScreenSizer
385
-
386
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-sizer)
387
-
388
- #### GradientTexture
389
-
390
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/gradient-texture)
391
-
392
- #### Edges
393
-
394
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/edges)
395
-
396
- #### Outlines
397
-
398
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/outlines)
399
-
400
- #### Trail
401
-
402
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/trail)
403
-
404
- #### Sampler
405
-
406
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/sampler)
407
-
408
- #### ComputedAttribute
409
-
410
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/computed-attribute)
411
-
412
- #### Clone
413
-
414
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/clone)
415
-
416
- #### useAnimations
417
-
418
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/use-animations)
419
-
420
- #### MarchingCubes
421
-
422
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/marching-cubes)
423
-
424
- #### Decal
425
-
426
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/decal)
427
-
428
- #### Svg
429
-
430
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/svg)
431
-
432
- #### AsciiRenderer
433
-
434
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/ascii-renderer)
435
-
436
- #### Splat
437
-
438
- [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/splat)
439
-
440
- ### Shaders
441
-
442
- #### MeshReflectorMaterial
443
-
444
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-reflector-material)
445
-
446
- #### MeshWobbleMaterial
447
-
448
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-wobble-material)
449
-
450
- #### MeshDistortMaterial
451
-
452
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-distort-material)
453
-
454
- #### MeshRefractionMaterial
455
-
456
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-refraction-material)
457
-
458
- #### MeshTransmissionMaterial
459
-
460
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-transmission-material)
461
-
462
- #### MeshDiscardMaterial
463
-
464
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-discard-material)
465
-
466
- #### PointMaterial
467
-
468
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/point-material)
469
-
470
- #### SoftShadows
471
-
472
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/soft-shadows)
473
-
474
- #### shaderMaterial
475
-
476
- [Documentation has moved here](https://pmndrs.github.io/drei/shaders/shader-material)
477
-
478
- ### Modifiers
479
-
480
- #### CurveModifier
481
-
482
- [Documentation has moved here](https://pmndrs.github.io/drei/modifiers/curve-modifier)
483
-
484
- ### Misc
485
-
486
- #### useContextBridge
487
-
488
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-context-bridge)
489
-
490
- #### Example
491
-
492
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/example)
493
-
494
- #### Html
495
-
496
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/html)
497
-
498
- #### CycleRaycast
499
-
500
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/cycle-raycast)
501
-
502
- #### Select
503
-
504
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/select)
505
-
506
- #### Sprite Animator
507
-
508
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/sprite-animator)
509
-
510
- #### Stats
511
-
512
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats)
513
-
514
- #### StatsGl
515
-
516
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats-gl)
517
-
518
- #### Wireframe
519
-
520
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/wireframe)
521
-
522
- #### useDepthBuffer
523
-
524
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-depth-buffer)
525
-
526
- #### Fbo / useFBO
527
-
528
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/fbo-use-fbo)
529
-
530
- #### useCamera
531
-
532
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-camera)
533
-
534
- #### CubeCamera / useCubeCamera
535
-
536
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/cube-camera-use-cube-camera)
537
-
538
- #### DetectGPU / useDetectGPU
539
-
540
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/detect-gpu-use-detect-gpu)
541
-
542
- #### useAspect
543
-
544
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-aspect)
545
-
546
- #### useCursor
547
-
548
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-cursor)
549
-
550
- #### useIntersect
551
-
552
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-intersect)
553
-
554
- #### useBoxProjectedEnv
555
-
556
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-box-projected-env)
557
-
558
- #### Trail / useTrail
559
-
560
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/trail-use-trail)
561
-
562
- #### useSurfaceSampler
563
-
564
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-surface-sampler)
565
-
566
- #### FaceLandmarker
567
-
568
- [Documentation has moved here](https://pmndrs.github.io/drei/misc/face-landmarker)
569
-
570
- ### Loading
571
-
572
- #### Loader
573
-
574
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/loader)
575
-
576
- #### Progress / useProgress
577
-
578
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/progress-use-progress)
579
-
580
- #### Gltf / useGLTF
581
-
582
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/gltf-use-gltf)
583
-
584
- #### Fbx / useFBX
585
-
586
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/fbx-use-fbx)
587
-
588
- #### Texture / useTexture
589
-
590
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/texture-use-texture)
591
-
592
- #### Ktx2 / useKTX2
593
-
594
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/ktx2-use-ktx2)
595
-
596
- #### CubeTexture / useCubeTexture
597
-
598
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/cube-texture-use-cube-texture)
599
-
600
- #### VideoTexture / useVideoTexture
601
-
602
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/video-texture-use-video-texture)
603
-
604
- #### TrailTexture / useTrailTexture
605
-
606
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/trail-texture-use-trail-texture)
607
-
608
- #### useFont
609
-
610
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-font)
611
-
612
- #### useSpriteLoader
613
-
614
- [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-sprite-loader)
615
-
616
- ### Performance
617
-
618
- #### Instances
619
-
620
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/instances)
621
-
622
- #### Merged
623
-
624
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/merged)
625
-
626
- #### Points
627
-
628
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/points)
629
-
630
- #### Segments
631
-
632
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/segments)
633
-
634
- #### Detailed
635
-
636
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/detailed)
637
-
638
- #### Preload
639
-
640
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/preload)
641
-
642
- #### BakeShadows
643
-
644
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/bake-shadows)
645
-
646
- #### meshBounds
647
-
648
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/mesh-bounds)
649
-
650
- #### AdaptiveDpr
651
-
652
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-dpr)
653
-
654
- #### AdaptiveEvents
655
-
656
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-events)
657
-
658
- #### Bvh
659
-
660
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/bvh)
661
-
662
- #### PerformanceMonitor
663
-
664
- [Documentation has moved here](https://pmndrs.github.io/drei/performances/performance-monitor)
665
-
666
- ### Portals
667
-
668
- #### Hud
669
-
670
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/hud)
671
-
672
- #### View
673
-
674
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/view)
675
-
676
- #### RenderTexture
677
-
678
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-texture)
679
-
680
- #### RenderCubeTexture
681
-
682
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-cube-texture)
683
-
684
- #### Fisheye
685
-
686
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/fisheye)
687
-
688
- #### Mask
689
-
690
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/mask)
691
-
692
- #### MeshPortalMaterial
693
-
694
- [Documentation has moved here](https://pmndrs.github.io/drei/portals/mesh-portal-material)
695
-
696
- ### Staging
697
-
698
- #### Center
699
-
700
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/center)
701
-
702
- #### Resize
703
-
704
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/resize)
705
-
706
- #### BBAnchor
707
-
708
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/bb-anchor)
709
-
710
- #### Bounds
711
-
712
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/bounds)
713
-
714
- #### CameraShake
715
-
716
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/camera-shake)
717
-
718
- #### Float
719
-
720
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/float)
721
-
722
- #### Stage
723
-
724
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/stage)
725
-
726
- #### Backdrop
727
-
728
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/backdrop)
729
-
730
- #### Shadow
731
-
732
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow)
733
-
734
- #### Caustics
735
-
736
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/caustics)
737
-
738
- #### ContactShadows
739
-
740
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/contact-shadows)
741
-
742
- #### RandomizedLight
743
-
744
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/randomized-light)
745
-
746
- #### AccumulativeShadows
747
-
748
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/accumulative-shadows)
749
-
750
- #### SpotLight
751
-
752
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light)
753
-
754
- #### SpotLightShadow
755
-
756
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light-shadow)
757
-
758
- #### Environment
759
-
760
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/environment)
761
-
762
- #### Lightformer
763
-
764
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/lightformer)
765
-
766
- #### Sky
767
-
768
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/sky)
769
-
770
- #### Stars
771
-
772
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/stars)
773
-
774
- #### Sparkles
775
-
776
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/sparkles)
777
-
778
- #### Cloud
779
-
780
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/cloud)
781
-
782
- #### useEnvironment
783
-
784
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/use-environment)
785
-
786
- #### MatcapTexture / useMatcapTexture
787
-
788
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/matcap-texture-use-matcap-texture)
789
-
790
- #### NormalTexture / useNormalTexture
791
-
792
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/normal-texture-use-normal-texture)
793
-
794
- #### ShadowAlpha
795
-
796
- [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
797
-
798
- </details>
799
-
800
- ## Dev
801
-
802
- ### INSTALL
803
-
804
- ```sh
805
- $ corepack enable
806
- $ yarn install
807
- ```
808
-
809
- ### Test
810
-
811
- #### Local
812
-
813
- Pre-requisites:
814
-
815
- - ```sh
816
- $ npx playwright install
817
- ```
818
-
819
- To run visual tests locally:
820
-
821
- ```sh
822
- $ yarn build
823
- $ yarn test
824
- ```
825
-
826
- To update a snapshot:
827
-
828
- ```sh
829
- $ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
830
- ```
831
-
832
- #### Docker
833
-
834
- > [!IMPORTANT]
835
- > Snapshots are system-dependent, so to run playwright in the same environment as the CI:
836
-
837
- ```sh
838
- $ docker run --init --rm \
839
- -v $(pwd):/app -w /app \
840
- ghcr.io/pmndrs/playwright:drei \
841
- sh -c "corepack enable && yarn install && yarn build && yarn test"
842
- ```
843
-
844
- To update a snapshot:
845
-
846
- ```sh
847
- $ docker run --init --rm \
848
- -v $(pwd):/app -w /app \
849
- -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
850
- ghcr.io/pmndrs/playwright:drei \
851
- sh -c "corepack enable && yarn install && yarn build && yarn test"
852
- ```
1
+ [![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://drei.pmnd.rs/)
2
+ [![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
3
+ [![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
4
+ [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)
5
+ [![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei)
6
+
7
+ [![logo](docs/logo.jpg)](https://codesandbox.io/s/bfplr)
8
+
9
+ A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
10
+
11
+ If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)!
12
+
13
+ ```bash
14
+ npm install @react-three/drei
15
+ ```
16
+
17
+ > [!IMPORTANT]
18
+ > this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm).
19
+
20
+ ## Basic usage
21
+
22
+ ```jsx
23
+ import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
24
+ ```
25
+
26
+ ## React-native
27
+
28
+ ```jsx
29
+ import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'
30
+ ```
31
+
32
+ The `native` route of the library **does not** export `Html` or `Loader`. The default export of the library is `web` which **does** export `Html` and `Loader`.
33
+
34
+ ## Documentation
35
+
36
+ https://pmndrs.github.io/drei
37
+
38
+ <details>
39
+ <summary>Old doc</summary>
40
+
41
+ > [!WARNING]
42
+ > Below is an archive of the anchors links with their new respective locations to the documentation website.
43
+ > Do not update the links below, they are for reference only.
44
+
45
+ <!-- <table>
46
+ <tr>
47
+ <td valign="top">
48
+ <ul>
49
+ <li><a href="#cameras">Cameras</a></li>
50
+ <ul>
51
+ <li><a href="#perspectivecamera">PerspectiveCamera</a></li>
52
+ <li><a href="#orthographiccamera">OrthographicCamera</a></li>
53
+ <li><a href="#cubecamera">CubeCamera</a></li>
54
+ </ul>
55
+ <li><a href="#controls">Controls</a></li>
56
+ <ul>
57
+ <li><a href="#cameracontrols">CameraControls</a></li>
58
+ <li><a href="#controls">FlyControls</a></li>
59
+ <li><a href="#controls">MapControls</a></li>
60
+ <li><a href="#controls">DeviceOrientationControls</a></li>
61
+ <li><a href="#controls">TrackballControls</a></li>
62
+ <li><a href="#controls">ArcballControls</a></li>
63
+ <li><a href="#controls">PointerLockControls</a></li>
64
+ <li><a href="#controls">FirstPersonControls</a></li>
65
+ <li><a href="#scrollcontrols">ScrollControls</a></li>
66
+ <li><a href="#presentationcontrols">PresentationControls</a></li>
67
+ <li><a href="#keyboardcontrols">KeyboardControls</a></li>
68
+ <li><a href="#FaceControls">FaceControls</a></li>
69
+ <li><a href="#motionpathcontrols">MotionPathControls</a></li>
70
+ </ul>
71
+ <li><a href="#gizmos">Gizmos</a></li>
72
+ <ul>
73
+ <li><a href="#gizmohelper">GizmoHelper</a></li>
74
+ <li><a href="#pivotcontrols">PivotControls</a></li>
75
+ <li><a href="#dragcontrols">DragControls</a></li>
76
+ <li><a href="#transformcontrols">TransformControls</a></li>
77
+ <li><a href="#grid">Grid</a></li>
78
+ <li><a href="#helper--usehelper">Helper / useHelper</a></li>
79
+ <li><a href="#helper">Helper</a></li>
80
+ </ul>
81
+ <li><a href="#abstractions">Abstractions</a></li>
82
+ <ul>
83
+ <li><a href="#image">Image</a></li>
84
+ <li><a href="#text">Text</a></li>
85
+ <li><a href="#text3d">Text3D</a></li>
86
+ <li><a href="#positionalaudio">PositionalAudio</a></li>
87
+ <li><a href="#billboard">Billboard</a></li>
88
+ <li><a href="#screenspace">ScreenSpace</a></li>
89
+ <li><a href="#screensizer">ScreenSizer</a></li>
90
+ <li><a href="#effects">Effects</a></li>
91
+ <li><a href="#gradienttexture">GradientTexture</a></li>
92
+ <li><a href="#edges">Edges</a></li>
93
+ <li><a href="#outlines">Outlines</a></li>
94
+ <li><a href="#trail">Trail</a></li>
95
+ <li><a href="#sampler">Sampler</a></li>
96
+ <li><a href="#computedattribute">ComputedAttribute</a></li>
97
+ <li><a href="#clone">Clone</a></li>
98
+ <li><a href="#useanimations">useAnimations</a></li>
99
+ <li><a href="#marchingcubes">MarchingCubes</a></li>
100
+ <li><a href="#decal">Decal</a></li>
101
+ <li><a href="#svg">Svg</a></li>
102
+ <li><a href="#gltf">Gltf</a></li>
103
+ <li><a href="#asciirenderer">AsciiRenderer</a></li>
104
+ <li><a href="#splat">Splat</a></li>
105
+ </ul>
106
+ <li><a href="#shaders">Shaders</a></li>
107
+ <ul>
108
+ <li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li>
109
+ <li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li>
110
+ <li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li>
111
+ <li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li>
112
+ <li><a href="#meshtransmissionmaterial">MeshTransmissionMaterial</a></li>
113
+ <li><a href="#meshdiscardmaterial">MeshDiscardMaterial</a></li>
114
+ <li><a href="#pointmaterial">PointMaterial</a></li>
115
+ <li><a href="#softshadows">SoftShadows</a></li>
116
+ <li><a href="#shadermaterial">shaderMaterial</a></li>
117
+ </ul>
118
+ </ul>
119
+ </td>
120
+ <td valign="top">
121
+ <ul>
122
+ <li><a href="#misc">Misc</a></li>
123
+ <ul>
124
+ <li><a href="#example">Example</a></li>
125
+ <li><a href="#html">Html</a></li>
126
+ <li><a href="#cycleraycast">CycleRaycast</a></li>
127
+ <li><a href="#select">Select</a></li>
128
+ <li><a href="#sprite-animator">Sprite Animator</a></li>
129
+ <li><a href="#stats">Stats</a></li>
130
+ <li><a href="#stats-gl">StatsGl</a></li>
131
+ <li><a href="#wireframe">Wireframe</a></li>
132
+ <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
133
+ <li><a href="#usecontextbridge">useContextBridge</a></li>
134
+ <li><a href="#fbo--usefbo">Fbo / useFBO</a></li>
135
+ <li><a href="#usecamera">useCamera</a></li>
136
+ <li><a href="#cubecamera--usecubecamera">CubeCamera / useCubeCamera</a></li>
137
+ <li><a href="#detectgpu--usedetectgpu">DetectGPU / useDetectGPU</a></li>
138
+ <li><a href="#useaspect">useAspect</a></li>
139
+ <li><a href="#usecursor">useCursor</a></li>
140
+ <li><a href="#useintersect">useIntersect</a></li>
141
+ <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
142
+ <li><a href="#trail--useTrail">Trail / useTrail</a></li>
143
+ <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li>
144
+ <li><a href="#facelandmarker">FaceLandmarker</a></li>
145
+ </ul>
146
+ <li><a href="#loading">Loaders</a></li>
147
+ <ul>
148
+ <li><a href="#loader">Loader</a></li>
149
+ <li><a href="#progress--useprogress">Progress / useProgress</a></li>
150
+ <li><a href="#gltf--usegltf">Gltf / useGLTF</a></li>
151
+ <li><a href="#fbx--usefbx">FBX / useFBX</a></li>
152
+ <li><a href="#texture--usetexture">Texture / useTexture</a></li>
153
+ <li><a href="#ktx2--usektx2">Ktx2 / useKTX2</a></li>
154
+ <li><a href="#cubetexture--usecubetexture">CubeTexture / useCubeTexture</a></li>
155
+ <li><a href="#videotexture--usevideotexture">VideoTexture / useVideoTexture</a></li>
156
+ <li><a href="#trailtexture--usetrailtexture">TrailTexture / useTrailTexture</a></li>
157
+ <li><a href="#usefont">useFont</a></li>
158
+ <li><a href="#usespriteloader">useSpriteLoader</a></li>
159
+ </ul>
160
+ <li><a href="#performance">Performance</a></li>
161
+ <ul>
162
+ <li><a href="#instances">Instances</a></li>
163
+ <li><a href="#merged">Merged</a></li>
164
+ <li><a href="#points">Points</a></li>
165
+ <li><a href="#segments">Segments</a></li>
166
+ <li><a href="#detailed">Detailed</a></li>
167
+ <li><a href="#preload">Preload</a></li>
168
+ <li><a href="#bakeshadows">BakeShadows</a></li>
169
+ <li><a href="#meshbounds">meshBounds</a></li>
170
+ <li><a href="#adaptivedpr">AdaptiveDpr</a></li>
171
+ <li><a href="#adaptiveevents">AdaptiveEvents</a></li>
172
+ <li><a href="#bvh">Bvh</a></li>
173
+ <li><a href="#performancemonitor">PerformanceMonitor</a></li>
174
+ </ul>
175
+ <li><a href="#portals">Portals</a></li>
176
+ <ul>
177
+ <li><a href="#hud">Hud</a></li>
178
+ <li><a href="#view">View</a></li>
179
+ <li><a href="#rendertexture">RenderTexture</a></li>
180
+ <li><a href="#rendercubetexture">RenderCubeTexture</a></li>
181
+ <li><a href="#fisheye">Fisheye</a></li>
182
+ <li><a href="#mask">Mask</a></li>
183
+ <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li>
184
+ </ul>
185
+ <li><a href="#modifiers">Modifiers</a></li>
186
+ <ul>
187
+ <li><a href="#curvemodifier">CurveModifier</a></li>
188
+ </ul>
189
+ </ul>
190
+ </td>
191
+ <td valign="top">
192
+ <ul>
193
+ <li><a href="#shapes">Shapes</a></li>
194
+ <ul>
195
+ <li><a href="#shapes">Plane</a></li>
196
+ <li><a href="#shapes">Box</a></li>
197
+ <li><a href="#shapes">Sphere</a></li>
198
+ <li><a href="#shapes">Circle</a></li>
199
+ <li><a href="#shapes">Cone</a></li>
200
+ <li><a href="#shapes">Cylinder</a></li>
201
+ <li><a href="#shapes">Tube</a></li>
202
+ <li><a href="#shapes">Torus</a></li>
203
+ <li><a href="#shapes">TorusKnot</a></li>
204
+ <li><a href="#shapes">Ring</a></li>
205
+ <li><a href="#shapes">Tetrahedron</a></li>
206
+ <li><a href="#shapes">Polyhedron</a></li>
207
+ <li><a href="#shapes">Icosahedron</a></li>
208
+ <li><a href="#shapes">Octahedron</a></li>
209
+ <li><a href="#shapes">Dodecahedron</a></li>
210
+ <li><a href="#shapes">Extrude</a></li>
211
+ <li><a href="#shapes">Lathe</a></li>
212
+ <li><a href="#shapes">Shape</a></li>
213
+ <li><a href="#roundedbox">RoundedBox</a></li>
214
+ <li><a href="#screenquad">Screenquad</a></li>
215
+ <li><a href="#line">Line</a></li>
216
+ <li><a href="#quadraticbezierline">QuadraticBezierLine</a></li>
217
+ <li><a href="#cubicbezierline">CubicBezierLine</a></li>
218
+ <li><a href="#catmullromline">CatmullRomLine</a></li>
219
+ <li><a href="#facemesh">Facemesh</a></li>
220
+ </ul>
221
+ <li><a href="#staging">Staging</a></li>
222
+ <ul>
223
+ <li><a href="#center">Center</a></li>
224
+ <li><a href="#resize">Resize</a></li>
225
+ <li><a href="#BBAnchor">BBAnchor</a></li>
226
+ <li><a href="#bounds">Bounds</a></li>
227
+ <li><a href="#camerashake">CameraShake</a></li>
228
+ <li><a href="#float">Float</a></li>
229
+ <li><a href="#stage">Stage</a></li>
230
+ <li><a href="#backdrop">Backdrop</a></li>
231
+ <li><a href="#environment">Environment</a></li>
232
+ <li><a href="#lightformer">Lightformer</a></li>
233
+ <li><a href="#spotlight">SpotLight</a></li>
234
+ <li><a href="#spotlightshadow">SpotLightShadow</a></li>
235
+ <li><a href="#shadow">Shadow</a></li>
236
+ <li><a href="#caustics">Caustics</a></li>
237
+ <li><a href="#contactshadows">ContactShadows</a></li>
238
+ <li><a href="#randomizedlight">RandomizedLight</a></li>
239
+ <li><a href="#accumulativeshadows">AccumulativeShadows</a></li>
240
+ <li><a href="#sky">Sky</a></li>
241
+ <li><a href="#stars">Stars</a></li>
242
+ <li><a href="#sparkles">Sparkles</a></li>
243
+ <li><a href="#cloud">Cloud</a></li>
244
+ <li><a href="#useenvironment">useEnvironment</a></li>
245
+ <li><a href="#matcaptexture--usematcaptexture">MatcapTexture / useMatcapTexture</a></li>
246
+ <li><a href="#normaltexture--usenormaltexture">NormalTexture / useNormalTexture</a></li>
247
+ <li><a href="#shadowalpha">ShadowAlpha</a></li>
248
+ </ul>
249
+ </ul>
250
+ </td>
251
+ </tr>
252
+ </table> -->
253
+
254
+ ### Cameras
255
+
256
+ #### PerspectiveCamera
257
+
258
+ [Documentation has moved here](https://pmndrs.github.io/drei/cameras/perspective-camera)
259
+
260
+ #### OrthographicCamera
261
+
262
+ [Documentation has moved here](https://pmndrs.github.io/drei/cameras/orthographic-camera)
263
+
264
+ #### CubeCamera
265
+
266
+ [Documentation has moved here](https://pmndrs.github.io/drei/cameras/cube-camera)
267
+
268
+ ### Controls
269
+
270
+ #### CameraControls
271
+
272
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/camera-controls)
273
+
274
+ #### ScrollControls
275
+
276
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/scroll-controls)
277
+
278
+ #### PresentationControls
279
+
280
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/presentation-controls)
281
+
282
+ #### KeyboardControls
283
+
284
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/keyboard-controls)
285
+
286
+ #### FaceControls
287
+
288
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/face-controls)
289
+
290
+ #### MotionPathControls
291
+
292
+ [Documentation has moved here](https://pmndrs.github.io/drei/controls/motion-path-controls)
293
+
294
+ ### Gizmos
295
+
296
+ #### GizmoHelper
297
+
298
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/gizmo-helper)
299
+
300
+ #### PivotControls
301
+
302
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/pivot-controls)
303
+
304
+ #### DragControls
305
+
306
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/drag-controls)
307
+
308
+ #### TransformControls
309
+
310
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/transform-controls)
311
+
312
+ #### Grid
313
+
314
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/grid)
315
+
316
+ #### Helper / useHelper
317
+
318
+ [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/helper-use-helper)
319
+
320
+ ### Shapes
321
+
322
+ #### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape
323
+
324
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/mesh)
325
+
326
+ #### RoundedBox
327
+
328
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/rounded-box)
329
+
330
+ #### ScreenQuad
331
+
332
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/screen-quad)
333
+
334
+ #### Line
335
+
336
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/line)
337
+
338
+ #### QuadraticBezierLine
339
+
340
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/quadratic-bezier-line)
341
+
342
+ #### CubicBezierLine
343
+
344
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/cubic-bezier-line)
345
+
346
+ #### CatmullRomLine
347
+
348
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/catmull-rom-line)
349
+
350
+ #### Facemesh
351
+
352
+ [Documentation has moved here](https://pmndrs.github.io/drei/shapes/facemesh)
353
+
354
+ ### Abstractions
355
+
356
+ #### Image
357
+
358
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/image)
359
+
360
+ #### Text
361
+
362
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text)
363
+
364
+ #### Text3D
365
+
366
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text3d)
367
+
368
+ #### Effects
369
+
370
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/effects)
371
+
372
+ #### PositionalAudio
373
+
374
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/positional-audio)
375
+
376
+ #### Billboard
377
+
378
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/billboard)
379
+
380
+ #### ScreenSpace
381
+
382
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-space)
383
+
384
+ #### ScreenSizer
385
+
386
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-sizer)
387
+
388
+ #### GradientTexture
389
+
390
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/gradient-texture)
391
+
392
+ #### Edges
393
+
394
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/edges)
395
+
396
+ #### Outlines
397
+
398
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/outlines)
399
+
400
+ #### Trail
401
+
402
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/trail)
403
+
404
+ #### Sampler
405
+
406
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/sampler)
407
+
408
+ #### ComputedAttribute
409
+
410
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/computed-attribute)
411
+
412
+ #### Clone
413
+
414
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/clone)
415
+
416
+ #### useAnimations
417
+
418
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/use-animations)
419
+
420
+ #### MarchingCubes
421
+
422
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/marching-cubes)
423
+
424
+ #### Decal
425
+
426
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/decal)
427
+
428
+ #### Svg
429
+
430
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/svg)
431
+
432
+ #### AsciiRenderer
433
+
434
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/ascii-renderer)
435
+
436
+ #### Splat
437
+
438
+ [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/splat)
439
+
440
+ ### Shaders
441
+
442
+ #### MeshReflectorMaterial
443
+
444
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-reflector-material)
445
+
446
+ #### MeshWobbleMaterial
447
+
448
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-wobble-material)
449
+
450
+ #### MeshDistortMaterial
451
+
452
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-distort-material)
453
+
454
+ #### MeshRefractionMaterial
455
+
456
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-refraction-material)
457
+
458
+ #### MeshTransmissionMaterial
459
+
460
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-transmission-material)
461
+
462
+ #### MeshDiscardMaterial
463
+
464
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-discard-material)
465
+
466
+ #### PointMaterial
467
+
468
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/point-material)
469
+
470
+ #### SoftShadows
471
+
472
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/soft-shadows)
473
+
474
+ #### shaderMaterial
475
+
476
+ [Documentation has moved here](https://pmndrs.github.io/drei/shaders/shader-material)
477
+
478
+ ### Modifiers
479
+
480
+ #### CurveModifier
481
+
482
+ [Documentation has moved here](https://pmndrs.github.io/drei/modifiers/curve-modifier)
483
+
484
+ ### Misc
485
+
486
+ #### useContextBridge
487
+
488
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-context-bridge)
489
+
490
+ #### Example
491
+
492
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/example)
493
+
494
+ #### Html
495
+
496
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/html)
497
+
498
+ #### CycleRaycast
499
+
500
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/cycle-raycast)
501
+
502
+ #### Select
503
+
504
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/select)
505
+
506
+ #### Sprite Animator
507
+
508
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/sprite-animator)
509
+
510
+ #### Stats
511
+
512
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats)
513
+
514
+ #### StatsGl
515
+
516
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats-gl)
517
+
518
+ #### Wireframe
519
+
520
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/wireframe)
521
+
522
+ #### useDepthBuffer
523
+
524
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-depth-buffer)
525
+
526
+ #### Fbo / useFBO
527
+
528
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/fbo-use-fbo)
529
+
530
+ #### useCamera
531
+
532
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-camera)
533
+
534
+ #### CubeCamera / useCubeCamera
535
+
536
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/cube-camera-use-cube-camera)
537
+
538
+ #### DetectGPU / useDetectGPU
539
+
540
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/detect-gpu-use-detect-gpu)
541
+
542
+ #### useAspect
543
+
544
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-aspect)
545
+
546
+ #### useCursor
547
+
548
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-cursor)
549
+
550
+ #### useIntersect
551
+
552
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-intersect)
553
+
554
+ #### useBoxProjectedEnv
555
+
556
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-box-projected-env)
557
+
558
+ #### Trail / useTrail
559
+
560
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/trail-use-trail)
561
+
562
+ #### useSurfaceSampler
563
+
564
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-surface-sampler)
565
+
566
+ #### FaceLandmarker
567
+
568
+ [Documentation has moved here](https://pmndrs.github.io/drei/misc/face-landmarker)
569
+
570
+ ### Loading
571
+
572
+ #### Loader
573
+
574
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/loader)
575
+
576
+ #### Progress / useProgress
577
+
578
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/progress-use-progress)
579
+
580
+ #### Gltf / useGLTF
581
+
582
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/gltf-use-gltf)
583
+
584
+ #### Fbx / useFBX
585
+
586
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/fbx-use-fbx)
587
+
588
+ #### Texture / useTexture
589
+
590
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/texture-use-texture)
591
+
592
+ #### Ktx2 / useKTX2
593
+
594
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/ktx2-use-ktx2)
595
+
596
+ #### CubeTexture / useCubeTexture
597
+
598
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/cube-texture-use-cube-texture)
599
+
600
+ #### VideoTexture / useVideoTexture
601
+
602
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/video-texture-use-video-texture)
603
+
604
+ #### TrailTexture / useTrailTexture
605
+
606
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/trail-texture-use-trail-texture)
607
+
608
+ #### useFont
609
+
610
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-font)
611
+
612
+ #### useSpriteLoader
613
+
614
+ [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-sprite-loader)
615
+
616
+ ### Performance
617
+
618
+ #### Instances
619
+
620
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/instances)
621
+
622
+ #### Merged
623
+
624
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/merged)
625
+
626
+ #### Points
627
+
628
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/points)
629
+
630
+ #### Segments
631
+
632
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/segments)
633
+
634
+ #### Detailed
635
+
636
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/detailed)
637
+
638
+ #### Preload
639
+
640
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/preload)
641
+
642
+ #### BakeShadows
643
+
644
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/bake-shadows)
645
+
646
+ #### meshBounds
647
+
648
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/mesh-bounds)
649
+
650
+ #### AdaptiveDpr
651
+
652
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-dpr)
653
+
654
+ #### AdaptiveEvents
655
+
656
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-events)
657
+
658
+ #### Bvh
659
+
660
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/bvh)
661
+
662
+ #### PerformanceMonitor
663
+
664
+ [Documentation has moved here](https://pmndrs.github.io/drei/performances/performance-monitor)
665
+
666
+ ### Portals
667
+
668
+ #### Hud
669
+
670
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/hud)
671
+
672
+ #### View
673
+
674
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/view)
675
+
676
+ #### RenderTexture
677
+
678
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-texture)
679
+
680
+ #### RenderCubeTexture
681
+
682
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-cube-texture)
683
+
684
+ #### Fisheye
685
+
686
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/fisheye)
687
+
688
+ #### Mask
689
+
690
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/mask)
691
+
692
+ #### MeshPortalMaterial
693
+
694
+ [Documentation has moved here](https://pmndrs.github.io/drei/portals/mesh-portal-material)
695
+
696
+ ### Staging
697
+
698
+ #### Center
699
+
700
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/center)
701
+
702
+ #### Resize
703
+
704
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/resize)
705
+
706
+ #### BBAnchor
707
+
708
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/bb-anchor)
709
+
710
+ #### Bounds
711
+
712
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/bounds)
713
+
714
+ #### CameraShake
715
+
716
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/camera-shake)
717
+
718
+ #### Float
719
+
720
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/float)
721
+
722
+ #### Stage
723
+
724
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/stage)
725
+
726
+ #### Backdrop
727
+
728
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/backdrop)
729
+
730
+ #### Shadow
731
+
732
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow)
733
+
734
+ #### Caustics
735
+
736
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/caustics)
737
+
738
+ #### ContactShadows
739
+
740
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/contact-shadows)
741
+
742
+ #### RandomizedLight
743
+
744
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/randomized-light)
745
+
746
+ #### AccumulativeShadows
747
+
748
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/accumulative-shadows)
749
+
750
+ #### SpotLight
751
+
752
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light)
753
+
754
+ #### SpotLightShadow
755
+
756
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light-shadow)
757
+
758
+ #### Environment
759
+
760
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/environment)
761
+
762
+ #### Lightformer
763
+
764
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/lightformer)
765
+
766
+ #### Sky
767
+
768
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/sky)
769
+
770
+ #### Stars
771
+
772
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/stars)
773
+
774
+ #### Sparkles
775
+
776
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/sparkles)
777
+
778
+ #### Cloud
779
+
780
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/cloud)
781
+
782
+ #### useEnvironment
783
+
784
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/use-environment)
785
+
786
+ #### MatcapTexture / useMatcapTexture
787
+
788
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/matcap-texture-use-matcap-texture)
789
+
790
+ #### NormalTexture / useNormalTexture
791
+
792
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/normal-texture-use-normal-texture)
793
+
794
+ #### ShadowAlpha
795
+
796
+ [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
797
+
798
+ </details>
799
+
800
+ ## Dev
801
+
802
+ ### INSTALL
803
+
804
+ ```sh
805
+ $ corepack enable
806
+ $ yarn install
807
+ ```
808
+
809
+ ### Test
810
+
811
+ #### Local
812
+
813
+ Pre-requisites:
814
+
815
+ - ```sh
816
+ $ npx playwright install
817
+ ```
818
+
819
+ To run visual tests locally:
820
+
821
+ ```sh
822
+ $ yarn build
823
+ $ yarn test
824
+ ```
825
+
826
+ To update a snapshot:
827
+
828
+ ```sh
829
+ $ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
830
+ ```
831
+
832
+ #### Docker
833
+
834
+ > [!IMPORTANT]
835
+ > Snapshots are system-dependent, so to run playwright in the same environment as the CI:
836
+
837
+ ```sh
838
+ $ docker run --init --rm \
839
+ -v $(pwd):/app -w /app \
840
+ ghcr.io/pmndrs/playwright:drei \
841
+ sh -c "corepack enable && yarn install && yarn build && yarn test"
842
+ ```
843
+
844
+ To update a snapshot:
845
+
846
+ ```sh
847
+ $ docker run --init --rm \
848
+ -v $(pwd):/app -w /app \
849
+ -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
850
+ ghcr.io/pmndrs/playwright:drei \
851
+ sh -c "corepack enable && yarn install && yarn build && yarn test"
852
+ ```