@react-three/fiber 10.0.0-alpha.5 → 10.0.0-alpha.6

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 (39) hide show
  1. package/dist/chunks/webgpu.cjs +37 -0
  2. package/dist/chunks/webgpu.mjs +21 -0
  3. package/dist/extension.cjs +13 -0
  4. package/dist/extension.d.cts +63 -0
  5. package/dist/extension.d.mts +63 -0
  6. package/dist/extension.d.ts +63 -0
  7. package/dist/extension.mjs +1 -0
  8. package/dist/index.cjs +98 -15369
  9. package/dist/index.d.cts +101 -3885
  10. package/dist/index.d.mts +101 -3885
  11. package/dist/index.d.ts +101 -3857
  12. package/dist/index.mjs +12 -15270
  13. package/dist/legacy.cjs +105 -15307
  14. package/dist/legacy.d.cts +115 -3874
  15. package/dist/legacy.d.mts +115 -3874
  16. package/dist/legacy.d.ts +116 -3849
  17. package/dist/legacy.mjs +21 -15224
  18. package/dist/shared/fiber.34TOMPo3.d.cts +2494 -0
  19. package/dist/shared/fiber.BFuGd7gN.d.cts +90 -0
  20. package/dist/shared/fiber.BO8-26r8.cjs +541 -0
  21. package/dist/shared/fiber.BSXtODQl.cjs +14 -0
  22. package/dist/shared/fiber.Bll9fqKA.d.mts +90 -0
  23. package/dist/shared/fiber.BuWl08aJ.mjs +16564 -0
  24. package/dist/shared/fiber.C-3TIsF8.mjs +500 -0
  25. package/dist/shared/fiber.CjMAAsJy.d.ts +2494 -0
  26. package/dist/shared/fiber.DEWBFQJe.mjs +9 -0
  27. package/dist/shared/fiber.DQTSZ24m.d.cts +1240 -0
  28. package/dist/shared/fiber.DQTSZ24m.d.mts +1240 -0
  29. package/dist/shared/fiber.DQTSZ24m.d.ts +1240 -0
  30. package/dist/shared/fiber.DuA4F8L5.d.ts +90 -0
  31. package/dist/shared/fiber.Dy7Uz273.d.mts +2494 -0
  32. package/dist/shared/fiber.TRm3lZ7I.cjs +16662 -0
  33. package/dist/webgpu/index.cjs +101 -16209
  34. package/dist/webgpu/index.d.cts +106 -4247
  35. package/dist/webgpu/index.d.mts +106 -4247
  36. package/dist/webgpu/index.d.ts +106 -4219
  37. package/dist/webgpu/index.mjs +15 -16092
  38. package/package.json +13 -10
  39. package/readme.md +11 -2
@@ -0,0 +1,1240 @@
1
+ import { FrameTimingState, FrameCallback as FrameCallback$1, SchedulerApi } from '@pmndrs/scheduler';
2
+ import * as THREE from 'three';
3
+ import { WebGLRenderer, WebGLRenderTarget, Color as Color$1, ColorRepresentation } from 'three';
4
+ import * as ThreeWebGPU from 'three/webgpu';
5
+ import { WebGPURenderer, RenderTarget, CanvasTarget, WebGPURendererParameters } from 'three/webgpu';
6
+ import * as React$1 from 'react';
7
+ import { ReactNode } from 'react';
8
+ import { StoreApi } from 'zustand';
9
+ import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
10
+ import { uniform, nodeObject } from 'three/tsl';
11
+
12
+ //* Utility Types ==============================
13
+
14
+ type NonFunctionKeys<P> = { [K in keyof P]-?: P[K] extends Function ? never : K }[keyof P]
15
+ type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O
16
+ type Properties<T> = Pick<T, NonFunctionKeys<T>>
17
+ type Mutable<P> = { -readonly [K in keyof P]: P[K] }
18
+ type IsOptional<T> = undefined extends T ? true : false
19
+ type IsAllOptional<T extends any[]> = T extends [infer First, ...infer Rest]
20
+ ? IsOptional<First> extends true
21
+ ? IsAllOptional<Rest>
22
+ : false
23
+ : true
24
+
25
+ //* Camera Types ==============================
26
+
27
+ type ThreeCamera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & { manual?: boolean }
28
+
29
+ //* Act Type ==============================
30
+
31
+ type Act = <T = any>(cb: () => Promise<T>) => Promise<T>
32
+
33
+ //* Bridge & Block Types ==============================
34
+
35
+ type Bridge = React$1.FC<{ children?: React$1.ReactNode }>
36
+
37
+ type SetBlock = false | Promise<null> | null
38
+ type UnblockProps = { set: React$1.Dispatch<React$1.SetStateAction<SetBlock>>; children: React$1.ReactNode }
39
+
40
+ //* Object Map Type ==============================
41
+
42
+ /* Original version
43
+ export interface ObjectMap {
44
+ nodes: { [name: string]: THREE.Object3D }
45
+ materials: { [name: string]: THREE.Material }
46
+ meshes: { [name: string]: THREE.Mesh }
47
+ }
48
+ */
49
+ /* This version is an expansion found in a PR by itsdouges that seems abandoned but looks useful.
50
+ It allows expansion but falls back to the original shape. (deleted due to stale, but If it doesnt conflict
51
+ I will keep the use here)
52
+ https://github.com/pmndrs/react-three-fiber/commits/generic-object-map/
53
+ His description is:
54
+ The object map type is now generic and can optionally declare the available properties for nodes, materials, and meshes.
55
+ */
56
+ interface ObjectMap<
57
+ T extends { nodes?: string; materials?: string; meshes?: string } = {
58
+ nodes: string
59
+ materials: string
60
+ meshes: string
61
+ },
62
+ > {
63
+ nodes: Record<T['nodes'] extends string ? T['nodes'] : string, THREE.Object3D>
64
+ materials: Record<T['materials'] extends string ? T['materials'] : string, THREE.Material>
65
+ meshes: Record<T['meshes'] extends string ? T['meshes'] : string, THREE.Mesh>
66
+ }
67
+
68
+ //* Equality Config ==============================
69
+
70
+ interface EquConfig {
71
+ /** Compare arrays by reference equality a === b (default), or by shallow equality */
72
+ arrays?: 'reference' | 'shallow'
73
+ /** Compare objects by reference equality a === b (default), or by shallow equality */
74
+ objects?: 'reference' | 'shallow'
75
+ /** If true the keys in both a and b must match 1:1 (default), if false a's keys must intersect b's */
76
+ strict?: boolean
77
+ }
78
+
79
+ //* Disposable Type ==============================
80
+
81
+ interface Disposable {
82
+ type?: string
83
+ dispose?: () => void
84
+ }
85
+
86
+ //* Event-related Types =====================================
87
+
88
+ interface Intersection extends THREE.Intersection {
89
+ /** The event source (the object which registered the handler) */
90
+ eventObject: THREE.Object3D
91
+ }
92
+
93
+ type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera
94
+
95
+ interface IntersectionEvent<TSourceEvent> extends Intersection {
96
+ /** The event source (the object which registered the handler) */
97
+ eventObject: THREE.Object3D
98
+ /** An array of intersections */
99
+ intersections: Intersection[]
100
+ /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
101
+ unprojectedPoint: THREE.Vector3
102
+ /** Normalized event coordinates */
103
+ pointer: THREE.Vector2
104
+ /** pointerId of the original event for multiple pointer events */
105
+ pointerId: number
106
+ /** Delta between first click and this event */
107
+ delta: number
108
+ /** The ray that pierced it */
109
+ ray: THREE.Ray
110
+ /** The camera that was used by the raycaster */
111
+ camera: Camera
112
+ /** stopPropagation will stop underlying handlers from firing */
113
+ stopPropagation: () => void
114
+ /** The original host event */
115
+ nativeEvent: TSourceEvent
116
+ /** If the event was stopped by calling stopPropagation */
117
+ stopped: boolean
118
+ }
119
+
120
+ type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>
121
+ type DomEvent = PointerEvent | MouseEvent | WheelEvent
122
+
123
+ /** DOM event handlers registered on the canvas element */
124
+ interface Events {
125
+ onClick: EventListener
126
+ onContextMenu: EventListener
127
+ onDoubleClick: EventListener
128
+ onWheel: EventListener
129
+ onPointerDown: EventListener
130
+ onPointerUp: EventListener
131
+ onPointerLeave: EventListener
132
+ onPointerMove: EventListener
133
+ onPointerCancel: EventListener
134
+ onLostPointerCapture: EventListener
135
+ onDragEnter: EventListener
136
+ onDragLeave: EventListener
137
+ onDragOver: EventListener
138
+ onDrop: EventListener
139
+ }
140
+
141
+ /** Event handlers that can be attached to R3F objects (meshes, groups, etc.) */
142
+ interface EventHandlers {
143
+ onClick?: (event: ThreeEvent<MouseEvent>) => void
144
+ onContextMenu?: (event: ThreeEvent<MouseEvent>) => void
145
+ onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void
146
+ /** Fires continuously while dragging over the object */
147
+ onDragOver?: (event: ThreeEvent<DragEvent>) => void
148
+ /** Fires once when drag enters the object */
149
+ onDragOverEnter?: (event: ThreeEvent<DragEvent>) => void
150
+ /** Fires once when drag leaves the object */
151
+ onDragOverLeave?: (event: ThreeEvent<DragEvent>) => void
152
+ /** Fires when drag misses this object (for objects that have drag handlers) */
153
+ onDragOverMissed?: (event: DragEvent) => void
154
+ /** Fires when a drop occurs on this object */
155
+ onDrop?: (event: ThreeEvent<DragEvent>) => void
156
+ /** Fires when a drop misses this object (for objects that have drop handlers) */
157
+ onDropMissed?: (event: DragEvent) => void
158
+ onPointerUp?: (event: ThreeEvent<PointerEvent>) => void
159
+ onPointerDown?: (event: ThreeEvent<PointerEvent>) => void
160
+ onPointerOver?: (event: ThreeEvent<PointerEvent>) => void
161
+ onPointerOut?: (event: ThreeEvent<PointerEvent>) => void
162
+ onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void
163
+ onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void
164
+ onPointerMove?: (event: ThreeEvent<PointerEvent>) => void
165
+ onPointerMissed?: (event: MouseEvent) => void
166
+ onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void
167
+ onWheel?: (event: ThreeEvent<WheelEvent>) => void
168
+ onLostPointerCapture?: (event: ThreeEvent<PointerEvent>) => void
169
+
170
+ //* Visibility Events --------------------------------
171
+ /** Fires when object enters/exits camera frustum. Receives true when in view, false when out. */
172
+ onFramed?: (inView: boolean) => void
173
+ /** Fires when object occlusion state changes (WebGPU only, requires occlusionTest=true on object) */
174
+ onOccluded?: (occluded: boolean) => void
175
+ /** Fires when combined visibility changes (frustum + occlusion + visible prop) */
176
+ onVisible?: (visible: boolean) => void
177
+ }
178
+
179
+ type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[]
180
+ type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void
181
+
182
+ /** Configuration for XR pointer registration (controllers/hands) */
183
+ interface XRPointerConfig {
184
+ /** Ray origin (updated each frame by XR system) */
185
+ ray: THREE.Ray
186
+ /** Optional: custom compute function for this pointer */
187
+ compute?: (state: RootState) => void
188
+ /** Pointer type identifier */
189
+ type: 'controller' | 'hand' | 'gaze'
190
+ /** Which hand (for controller/hand types) */
191
+ handedness?: 'left' | 'right'
192
+ }
193
+
194
+ interface EventManager<TTarget> {
195
+ /** Determines if the event layer is active */
196
+ enabled: boolean
197
+ /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer */
198
+ priority: number
199
+ /** The compute function needs to set up the raycaster and an xy- pointer */
200
+ compute?: ComputeFunction
201
+ /** The filter can re-order or re-structure the intersections */
202
+ filter?: FilterFunction
203
+ /** The target node the event layer is tied to */
204
+ connected?: TTarget
205
+ /** All the pointer event handlers through which the host forwards native events */
206
+ handlers?: Events
207
+ /** Allows re-connecting to another target */
208
+ connect?: (target: TTarget) => void
209
+ /** Removes all existing events handlers from the target */
210
+ disconnect?: () => void
211
+ /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
212
+ * explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
213
+ * @param pointerId - Optional pointer ID to update specific pointer only
214
+ */
215
+ update?: (pointerId?: number) => void
216
+ /** Defer pointer move raycasting to frame start (default: true) */
217
+ frameTimedRaycasts?: boolean
218
+ /** Always fire raycaster immediately on scroll events (default: true) */
219
+ alwaysFireOnScroll?: boolean
220
+ /** Automatically re-raycast every frame to detect hover changes from moving objects/camera (default: false) */
221
+ updateOnFrame?: boolean
222
+ /** Flush deferred pointer raycasts. Called by scheduler at frame start (input phase). */
223
+ flush?: () => void
224
+ /** Register an XR pointer (controller/hand). Returns assigned pointerId */
225
+ registerPointer?: (config: XRPointerConfig) => number
226
+ /** Unregister an XR pointer */
227
+ unregisterPointer?: (pointerId: number) => void
228
+ }
229
+
230
+ interface PointerCaptureTarget {
231
+ intersection: Intersection
232
+ target: Element
233
+ }
234
+
235
+ //* Visibility System Types =====================================
236
+
237
+ /** Entry in the visibility registry for tracking object visibility state */
238
+ interface VisibilityEntry {
239
+ object: THREE.Object3D
240
+ handlers: Pick<EventHandlers, 'onFramed' | 'onOccluded' | 'onVisible'>
241
+ lastFramedState: boolean | null
242
+ lastOccludedState: boolean | null
243
+ lastVisibleState: boolean | null
244
+ }
245
+
246
+ //* Scheduler Types (useFrame) ==============================
247
+ //
248
+ // The generic, framework-agnostic scheduler types now live in @pmndrs/scheduler.
249
+ // This file re-exports them and layers r3f's RootState-aware frame state on top,
250
+ // so existing `#types` imports across the codebase keep resolving unchanged.
251
+
252
+
253
+
254
+ // Frame State (r3f-specific) --------------------------------
255
+
256
+ /**
257
+ * State passed to useFrame callbacks (extends RootState with timing).
258
+ */
259
+ interface FrameNextState extends RootState, FrameTimingState {}
260
+
261
+ /** Alias for FrameNextState */
262
+ type FrameState = FrameNextState
263
+
264
+ // Callback Types (r3f-specific) --------------------------------
265
+
266
+ /**
267
+ * Callback function for useFrame. Receives the full r3f RootState plus timing.
268
+ */
269
+ type FrameNextCallback = FrameCallback$1<RootState>
270
+
271
+ /** Alias for FrameNextCallback */
272
+ type FrameCallback = FrameNextCallback
273
+
274
+ //* Renderer Support ==============================
275
+ // Core has no static imports from `three` or `three/webgpu`. Both are separate bundles built on one
276
+ // shared `three.core.js`, and there is no import that gives you the core alone -- so a core that
277
+ // statically imported either one would put that renderer into every app's eager graph. Instead each
278
+ // renderer is described by a *support* object, loaded when a root needs it, that carries the three
279
+ // namespace of its flavour plus the handful of renderer-specific classes core touches by name.
280
+
281
+ /** The Three.js namespace of either flavour. Classes in three's shared core are the same objects in both. */
282
+ type ThreeNamespace = typeof THREE | typeof ThreeWebGPU
283
+
284
+ /**
285
+ * Three's shared core: every export `three` and `three/webgpu` have in common (`Vector3`, `Scene`,
286
+ * `Mesh`, the constants, ...). This is what core code reads from `getThree()`. The renderer-specific
287
+ * exports are reached through the flavour's support object, never by name from here.
288
+ */
289
+ type ThreeCore = Pick<typeof THREE, Extract<keyof typeof THREE, keyof typeof ThreeWebGPU>>
290
+
291
+ /** Node classes and TSL functions the occlusion observer is built from (WebGPU only). */
292
+ interface OcclusionSupport {
293
+ Node: typeof ThreeWebGPU.Node
294
+ NodeUpdateType: typeof ThreeWebGPU.NodeUpdateType
295
+ MeshBasicNodeMaterial: typeof ThreeWebGPU.MeshBasicNodeMaterial
296
+ uniform: typeof uniform
297
+ nodeObject: typeof nodeObject
298
+ }
299
+
300
+ /** WebGL renderer support: the `three` namespace and the classes only it exports. */
301
+ interface WebGLSupport {
302
+ kind: 'webgl'
303
+ /** `import * as THREE from 'three'`: JSX constructors for roots on this renderer, and core's classes. */
304
+ three: typeof THREE
305
+ Renderer: typeof THREE.WebGLRenderer
306
+ /** Render target for `useRenderTarget`. */
307
+ RenderTarget: typeof THREE.WebGLRenderTarget
308
+ /** Cube render target for `<Environment>`. */
309
+ CubeRenderTarget: typeof THREE.WebGLCubeRenderTarget
310
+ }
311
+
312
+ /** WebGPU renderer support: the `three/webgpu` namespace and the classes only it exports. */
313
+ interface WebGPUSupport {
314
+ kind: 'webgpu'
315
+ /** `import * as THREE from 'three/webgpu'`: JSX constructors (node materials included) and core's classes. */
316
+ three: typeof ThreeWebGPU
317
+ Renderer: typeof ThreeWebGPU.WebGPURenderer
318
+ /** Render target for `useRenderTarget`. */
319
+ RenderTarget: typeof ThreeWebGPU.RenderTarget
320
+ /** Cube render target for `<Environment>`. */
321
+ CubeRenderTarget: typeof ThreeWebGPU.CubeRenderTarget
322
+ /** Canvas target for secondary canvases sharing a primary's renderer. */
323
+ CanvasTarget: typeof ThreeWebGPU.CanvasTarget
324
+ occlusion: OcclusionSupport
325
+ }
326
+
327
+ /** Support for the renderer a root ended up with. Selected by `configure()`, kept on `state.internal.support`. */
328
+ type RendererSupport = WebGLSupport | WebGPUSupport
329
+
330
+ /**
331
+ * What an entry point hands to `createRoot`/`Canvas`: a loader per renderer it can construct.
332
+ *
333
+ * The root entry provides both as dynamic imports, so an app downloads only the renderer its
334
+ * Canvas asks for. `/legacy` and `/webgpu` provide one each, statically, for apps that would rather
335
+ * have no extra request than the choice.
336
+ */
337
+ interface RendererProvider {
338
+ webgl?: () => WebGLSupport | Promise<WebGLSupport>
339
+ webgpu?: () => WebGPUSupport | Promise<WebGPUSupport>
340
+ }
341
+
342
+ //* Register ==============================
343
+ // The base RootState is typed for both renderers, so by default `state.renderer` is the union and a
344
+ // WebGPU-only member (`renderer.compute`, `renderer.backend`) needs a narrow. That base is what
345
+ // `@react-three/fiber/extension` (the entry for libraries) and the `RootState` type expose, so a
346
+ // library compiles for apps on either renderer.
347
+ //
348
+ // Apps rarely need this: each entry's hooks are already typed for the renderer it renders with
349
+ // (`@react-three/fiber` WebGPU, `/legacy` WebGL). Registering narrows the base types too, for code
350
+ // that goes through them (`/extension` hooks in an app, `RootState` annotations):
351
+ //
352
+ // declare module '@react-three/fiber' {
353
+ // interface Register {
354
+ // renderer: 'webgpu'
355
+ // }
356
+ // }
357
+ //
358
+ // Same pattern as `Register` in @react-three/tsl (and TanStack Router). Nothing registered means
359
+ // the union, unchanged.
360
+
361
+ /**
362
+ * Augment this to type `RootState` for the renderer your app uses. Recognised keys:
363
+ * - `renderer`: `'webgpu'` or `'webgl'`
364
+ */
365
+ interface Register {}
366
+
367
+ /** The registered renderer, or `'any'` when nothing is registered. */
368
+ type RegisteredRenderer = Register extends { renderer: infer R extends 'webgl' | 'webgpu' } ? R : 'any'
369
+
370
+ /** Pick the type for the registered renderer: WebGPU, WebGL, or both when nothing is registered. */
371
+ type ForRegisteredRenderer<WebGPU, WebGL, Either = WebGPU | WebGL> = RegisteredRenderer extends 'webgpu'
372
+ ? WebGPU
373
+ : RegisteredRenderer extends 'webgl'
374
+ ? WebGL
375
+ : Either
376
+
377
+ /** The renderer type of `state.renderer`: a union of both unless one is registered. */
378
+ type R3FRenderer = ForRegisteredRenderer<WebGPURenderer, WebGLRenderer>
379
+
380
+ /** What `useRenderTarget` returns: a union of both target classes unless a renderer is registered. */
381
+ type R3FRenderTarget = ForRegisteredRenderer<RenderTarget, WebGLRenderTarget>
382
+
383
+ /** The renderer support on `state.internal.support`, narrowed to the registered renderer. */
384
+ type R3FRendererSupport = ForRegisteredRenderer<WebGPUSupport, WebGLSupport, RendererSupport>
385
+
386
+ //* Core Store Types ========================================
387
+
388
+ type Subscription = {
389
+ ref: React$1.RefObject<RenderCallback>
390
+ priority: number
391
+ store: RootStore
392
+ }
393
+
394
+ /** Per-pointer state for multi-touch and XR support */
395
+ type PointerState = {
396
+ /** Objects currently hovered by this pointer */
397
+ hovered: Map<string, ThreeEvent<DomEvent>>
398
+ /** Objects capturing this pointer */
399
+ captured: Map<THREE.Object3D, PointerCaptureTarget>
400
+ /** Initial click position [x, y] */
401
+ initialClick: [x: number, y: number]
402
+ /** Objects hit on initial click */
403
+ initialHits: THREE.Object3D[]
404
+ }
405
+
406
+ type Dpr = number | [min: number, max: number]
407
+
408
+ interface Size {
409
+ width: number
410
+ height: number
411
+ top: number
412
+ left: number
413
+ }
414
+
415
+ type Frameloop = 'always' | 'demand' | 'never'
416
+
417
+ interface Viewport extends Size {
418
+ /** The initial pixel ratio */
419
+ initialDpr: number
420
+ /** Current pixel ratio */
421
+ dpr: number
422
+ /** size.width / viewport.width */
423
+ factor: number
424
+ /** Camera distance */
425
+ distance: number
426
+ /** Camera aspect ratio: width / height */
427
+ aspect: number
428
+ }
429
+
430
+ type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void
431
+
432
+ interface Performance {
433
+ /** Current performance normal, between min and max */
434
+ current: number
435
+ /** How low the performance can go, between 0 and max */
436
+ min: number
437
+ /** How high the performance can go, between min and max */
438
+ max: number
439
+ /** Time until current returns to max in ms */
440
+ debounce: number
441
+ /** Sets current to min, puts the system in regression */
442
+ regress: () => void
443
+ }
444
+
445
+ interface InternalState {
446
+ interaction: THREE.Object3D[]
447
+ subscribers: Subscription[]
448
+ /** Per-pointer state (hover, capture, click tracking) - replaces hovered, capturedMap, initialClick, initialHits */
449
+ pointerMap: Map<number, PointerState>
450
+ /** Pointers needing raycast this frame (used with frameTimedRaycasts) */
451
+ pointerDirty: Map<number, DomEvent>
452
+ /** Last event received (for events.update() compatibility) */
453
+ lastEvent: React$1.RefObject<DomEvent | null>
454
+ /** @deprecated Use pointerMap.get(pointerId).hovered instead */
455
+ hovered: Map<string, ThreeEvent<DomEvent>>
456
+ /** @deprecated Use pointerMap.get(pointerId).captured instead */
457
+ capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>
458
+ /** @deprecated Use pointerMap.get(pointerId).initialClick instead */
459
+ initialClick: [x: number, y: number]
460
+ /** @deprecated Use pointerMap.get(pointerId).initialHits instead */
461
+ initialHits: THREE.Object3D[]
462
+ /** Visibility event registry (onFramed, onOccluded, onVisible) */
463
+ visibilityRegistry: Map<string, VisibilityEntry>
464
+ /** Whether occlusion queries are enabled (WebGPU only) */
465
+ occlusionEnabled: boolean
466
+ /** Reference to the invisible occlusion observer mesh */
467
+ occlusionObserver: THREE.Mesh | null
468
+ /** Cached occlusion results from render pass - keyed by Object3D */
469
+ occlusionCache: Map<THREE.Object3D, boolean | null>
470
+ /** Internal helper group for R3F system objects (occlusion observer, etc.) */
471
+ helperGroup: THREE.Group | null
472
+ active: boolean
473
+ priority: number
474
+ frames: number
475
+ subscribe: (callback: React$1.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
476
+ /** Internal renderer storage - use state.renderer or state.gl to access */
477
+ actualRenderer: R3FRenderer
478
+ /**
479
+ * The renderer support `configure()` loaded for this root: the three namespace of that flavour
480
+ * (JSX constructors, core's classes) and the renderer-specific classes core needs by name.
481
+ * Selected once, from the entry's provider, and copied into portals with the rest of `internal`.
482
+ */
483
+ support: R3FRendererSupport
484
+ /**
485
+ * Releases this root's lease on its renderer. The last release disposes a renderer R3F created;
486
+ * a renderer passed in as an instance is never disposed by R3F.
487
+ */
488
+ releaseRenderer?: () => void | Promise<void>
489
+ /** Global scheduler reference (for useFrame hook) */
490
+ scheduler: SchedulerApi | null
491
+ /**
492
+ * Replaces `renderer.render(scene, camera)` in the default render job when set. Set it with
493
+ * `setRenderOverride(store, fn)`; the job keeps its fps throttle, error handling and user
494
+ * render-phase takeover. Used by `useRenderPipeline`.
495
+ */
496
+ renderOverride?: (() => void) | null
497
+ /** This root's unique ID in the global scheduler */
498
+ rootId?: string
499
+ /** Scheduler id reserved when a primary publishes its renderer, before root jobs are installed. */
500
+ pendingRootId?: string
501
+ /** Default scheduler predecessor when borrowing a primary renderer. */
502
+ sharedAfter?: string
503
+ /** Function to unregister this root from the global scheduler */
504
+ unregisterRoot?: () => void
505
+ /** Function to stop following devicePixelRatio changes */
506
+ unwatchDpr?: () => void
507
+ /** Container for child attachment (scene for root, original container for portals) */
508
+ container?: THREE.Object3D
509
+ /**
510
+ * The CanvasTarget this root sizes and renders through.
511
+ *
512
+ * A primary (`<Canvas id>`) owns the renderer's default target -- the one three itself built
513
+ * around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
514
+ * R3F created for its own element. Either way there is exactly one target per canvas element,
515
+ * and the canvas-target job makes it the renderer's active one before this root renders.
516
+ * Absent on WebGL and on a WebGPU canvas that is neither a primary nor sharing, where the renderer
517
+ * is sized directly.
518
+ * @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
519
+ */
520
+ canvasTarget?: CanvasTarget
521
+ /**
522
+ * Set when this root's canvas target has been resized and the backend's cached render pass
523
+ * descriptor (which holds a depth-stencil view built once per canvas) is therefore stale.
524
+ *
525
+ * Flushed by the canvas-target job in the `start` phase, which is the only place this root's
526
+ * target is guaranteed to be the renderer's active one — `backend.updateSize()` operates on
527
+ * whatever `getCanvasTarget()` returns, so calling it from the resize subscription would
528
+ * invalidate some other canvas's descriptor instead.
529
+ *
530
+ * @see https://github.com/pmndrs/react-three-fiber/issues/3847
531
+ */
532
+ canvasTargetSizeDirty?: boolean
533
+ /**
534
+ * Whether multi-canvas rendering is active.
535
+ * True on a `<Canvas primary>` once another canvas shares its renderer, and on that canvas.
536
+ * When true, setCanvasTarget is called before each render.
537
+ */
538
+ isMultiCanvas?: boolean
539
+ /**
540
+ * Whether this canvas is a secondary canvas sharing another's renderer: it found a
541
+ * `<Canvas primary>` (automatically, or through `share="id"`) and borrows its renderer.
542
+ */
543
+ isSecondary?: boolean
544
+ /**
545
+ * The id of the primary canvas this secondary canvas shares.
546
+ * Only set when isSecondary is true and the primary has an `id`.
547
+ */
548
+ targetId?: string
549
+ /**
550
+ * This secondary stopped sharing because the primary's renderer fell back to its
551
+ * WebGL2 backend (#3965): it owns the renderer it constructed, so it is not
552
+ * `isSecondary` (which marks a canvas borrowing another's renderer).
553
+ */
554
+ sharedRendererFallback?: boolean
555
+ /**
556
+ * Function to withdraw this primary canvas from the registry.
557
+ * Only set on a `<Canvas primary>`.
558
+ */
559
+ unregisterPrimary?: () => void
560
+ /**
561
+ * Function to stop tracking this canvas as one that built its own WebGPU renderer while no primary
562
+ * existed (for the late-primary warning).
563
+ */
564
+ untrackStandalone?: () => void
565
+ /** Whether canvas dimensions are forced to even numbers */
566
+ forceEven?: boolean
567
+ }
568
+
569
+ interface XRManager {
570
+ connect: () => void
571
+ disconnect: () => void
572
+ }
573
+
574
+ //* Root State Interface ====================================
575
+
576
+ interface RootState {
577
+ /** Set current state */
578
+ set: StoreApi<RootState>['setState']
579
+ /** Get current state */
580
+ get: StoreApi<RootState>['getState']
581
+ /**
582
+ * The store of the canvas that owns this root's renderer.
583
+ * - For primary/independent canvases: points to its own store (self-reference)
584
+ * - For secondary canvases: points to the primary canvas's store
585
+ * - Portals copy it from their parent
586
+ *
587
+ * Anything shared per renderer rather than per canvas (e.g. @react-three/tsl's resources)
588
+ * resolves through it.
589
+ */
590
+ primaryStore: RootStore
591
+ /** @deprecated Use `renderer` instead. The instance of the renderer (typed as WebGLRenderer for backwards compat) */
592
+ gl: ForRegisteredRenderer<WebGPURenderer, THREE.WebGLRenderer, THREE.WebGLRenderer>
593
+ /**
594
+ * The renderer instance. Both renderers unless the app registered one
595
+ * (`declare module '@react-three/fiber' { interface Register { renderer: 'webgpu' } }`), or the
596
+ * entry decides it (`/webgpu`, `/legacy`).
597
+ */
598
+ renderer: R3FRenderer
599
+ /** Inspector of the webGPU Renderer. Init in the canvas */
600
+ inspector: any // Inspector type from three/webgpu
601
+
602
+ /** Default camera */
603
+ camera: ThreeCamera
604
+ /** Camera frustum for visibility checks - auto-updated each frame when autoUpdateFrustum is true */
605
+ frustum: THREE.Frustum
606
+ /** Whether to automatically update the frustum each frame (default: true) */
607
+ autoUpdateFrustum: boolean
608
+ /** Default scene (may be overridden in portals to point to the portal container) */
609
+ scene: THREE.Scene
610
+ /** The actual root THREE.Scene - always points to the true scene, even inside portals */
611
+ rootScene: THREE.Scene
612
+ /** Default raycaster */
613
+ raycaster: THREE.Raycaster
614
+ /** Event layer interface, contains the event handler and the node they're connected to */
615
+ events: EventManager<any>
616
+ /** XR interface */
617
+ xr: XRManager
618
+ /** Currently used controls */
619
+ controls: THREE.EventDispatcher | null
620
+ /** Normalized event coordinates */
621
+ pointer: THREE.Vector2
622
+ /** @deprecated Normalized event coordinates, use "pointer" instead! */
623
+ mouse: THREE.Vector2
624
+ /** Color space assigned to 8-bit input textures (color maps). Most textures are authored in sRGB. */
625
+ textureColorSpace: THREE.ColorSpace
626
+ /** Render loop flags */
627
+ frameloop: Frameloop
628
+ performance: Performance
629
+ /** Reactive pixel-size of the canvas */
630
+ size: Size
631
+ /** Reactive size of the viewport in threejs units */
632
+ viewport: Viewport & {
633
+ getCurrentViewport: (
634
+ camera?: ThreeCamera,
635
+ target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>,
636
+ size?: Size,
637
+ ) => Omit<Viewport, 'dpr' | 'initialDpr'>
638
+ }
639
+ /** Flags the canvas for render, but doesn't render in itself */
640
+ invalidate: (frames?: number, stackFrames?: boolean) => void
641
+ /** Advance (render) one step */
642
+ advance: (timestamp: number, runGlobalEffects?: boolean) => void
643
+ /** Shortcut to setting the event layer */
644
+ setEvents: (events: Partial<EventManager<any>>) => void
645
+ /** Shortcut to manual sizing. No args resets to props/container. Single arg creates square. */
646
+ setSize: (width?: number, height?: number, top?: number, left?: number) => void
647
+ /** Shortcut to manual setting the pixel ratio */
648
+ setDpr: (dpr: Dpr) => void
649
+ /** Shortcut to setting frameloop flags. No args resets to 'always'. */
650
+ setFrameloop: (frameloop?: Frameloop) => void
651
+ /** Set error state to propagate to error boundary */
652
+ setError: (error: Error | null) => void
653
+ /** Current error state (null when no error) */
654
+ error: Error | null
655
+ /** Global Texture registry (key → Texture, usually keyed by URL) - use useTextures() hook for access + lifecycle */
656
+ textures: Map<string, THREE.Texture>
657
+ /** Internal: refcount per texture key, driven by mounted useTexture consumers (registry enrollment is on by default) */
658
+ _textureRefs: Map<string, number>
659
+ /** Internal: whether setSize() has taken ownership of canvas dimensions */
660
+ _sizeImperative: boolean
661
+ /** Internal: stored size props from Canvas for reset functionality */
662
+ _sizeProps: { width?: number; height?: number } | null
663
+ /** When the canvas was clicked but nothing was hit */
664
+ onPointerMissed?: (event: MouseEvent) => void
665
+ /** When a dragover event has missed any target */
666
+ onDragOverMissed?: (event: DragEvent) => void
667
+ /** When a drop event has missed any target */
668
+ onDropMissed?: (event: DragEvent) => void
669
+ /** If this state model is layered (via createPortal) then this contains the previous layer */
670
+ previousRoot?: RootStore
671
+ /** Internals */
672
+ internal: InternalState
673
+ // flags for triggers
674
+ // if we are using the webGl renderer, this will be true
675
+ isLegacy: ForRegisteredRenderer<false, true, boolean>
676
+ // regardless of renderer, if the system supports webGpu, this will be true
677
+ webGPUSupported: boolean
678
+ //if we are on native
679
+ isNative: boolean
680
+ }
681
+
682
+ type RootStore = UseBoundStoreWithEqualityFn<StoreApi<RootState>>
683
+
684
+ //* Reconciler Types ==============================
685
+
686
+ // FiberRoot is an opaque internal React type - we define it locally
687
+ // to avoid bundling @types/react-reconciler which causes absolute path issues
688
+ type FiberRoot = any
689
+
690
+ /** A promise tagged with its state, the protocol React's `use` reads */
691
+ type TrackedPromise<T> = Promise<T> &
692
+ ({ status: 'pending' } | { status: 'fulfilled'; value: T } | { status: 'rejected'; reason: unknown })
693
+
694
+ interface Root {
695
+ fiber: FiberRoot
696
+ store: RootStore
697
+ state:
698
+ | { status: 'open' }
699
+ | { status: 'closing'; token: symbol; settled: Promise<void>; settle: () => void }
700
+ | { status: 'disposed' }
701
+ configuration: {
702
+ previous?: RenderProps<HTMLCanvasElement | OffscreenCanvas>
703
+ apply: (props: RenderProps<HTMLCanvasElement | OffscreenCanvas>) => void
704
+ }
705
+ /** Settles once all accepted configuration has been applied */
706
+ ready: TrackedPromise<unknown>
707
+ }
708
+
709
+ type AttachFnType<O = any> = (parent: any, self: O) => () => void
710
+ type AttachType<O = any> = string | AttachFnType<O>
711
+
712
+ type ConstructorRepresentation<T = any> = new (...args: any[]) => T
713
+
714
+ interface Catalogue {
715
+ [name: string]: ConstructorRepresentation
716
+ }
717
+
718
+ // TODO: handle constructor overloads
719
+ // https://github.com/pmndrs/react-three-fiber/pull/2931
720
+ // https://github.com/microsoft/TypeScript/issues/37079
721
+ type Args<T> = T extends ConstructorRepresentation
722
+ ? T extends typeof Color$1
723
+ ? [r: number, g: number, b: number] | [color: ColorRepresentation]
724
+ : ConstructorParameters<T>
725
+ : any[]
726
+
727
+ type ArgsProp<P> = P extends ConstructorRepresentation
728
+ ? IsAllOptional<ConstructorParameters<P>> extends true
729
+ ? { args?: Args<P> }
730
+ : { args: Args<P> }
731
+ : { args: unknown[] }
732
+
733
+ type InstanceProps<T = any, P = any> = ArgsProp<P> & {
734
+ object?: T
735
+ dispose?: null
736
+ attach?: AttachType<T>
737
+ }
738
+
739
+ interface Instance<O = any> {
740
+ root: RootStore
741
+ type: string
742
+ parent: Instance | null
743
+ children: Instance[]
744
+ props: InstanceProps<O> & Record<string, unknown>
745
+ object: O & { __r3f?: Instance<O> }
746
+ eventCount: number
747
+ handlers: Partial<EventHandlers>
748
+ attach?: AttachType<O>
749
+ previousAttach?: any
750
+ previousVisible: boolean | undefined
751
+ isHidden: boolean
752
+ /** Set of props that have been applied via once() */
753
+ appliedOnce?: Set<string>
754
+ }
755
+
756
+ interface HostConfig {
757
+ type: string
758
+ props: Instance['props']
759
+ container: RootStore
760
+ instance: Instance
761
+ textInstance: void
762
+ suspenseInstance: Instance
763
+ hydratableInstance: never
764
+ formInstance: never
765
+ publicInstance: Instance['object']
766
+ hostContext: {}
767
+ childSet: never
768
+ timeoutHandle: number | undefined
769
+ noTimeout: -1
770
+ TransitionStatus: null
771
+ }
772
+ declare global {
773
+ var IS_REACT_ACT_ENVIRONMENT: boolean | undefined
774
+ }
775
+
776
+ //* Base Renderer Types =====================================
777
+
778
+ // Shim for OffscreenCanvas since it was removed from DOM types
779
+ interface OffscreenCanvas$1 extends EventTarget {}
780
+
781
+ interface BaseRendererProps {
782
+ canvas: HTMLCanvasElement | OffscreenCanvas$1
783
+ powerPreference?: 'high-performance' | 'low-power' | 'default'
784
+ antialias?: boolean
785
+ alpha?: boolean
786
+ }
787
+
788
+ type RendererFactory<TRenderer, TParams> =
789
+ | TRenderer
790
+ | ((defaultProps: TParams) => TRenderer)
791
+ | ((defaultProps: TParams) => Promise<TRenderer>)
792
+
793
+ interface Renderer {
794
+ render: (scene: THREE.Scene, camera: THREE.Camera) => any
795
+ }
796
+
797
+ //* Color Management Config ==============================
798
+
799
+ /**
800
+ * Color management configuration shared by both WebGL and WebGPU renderers.
801
+ */
802
+ interface ColorManagementConfig {
803
+ /**
804
+ * Color space assigned to 8-bit input textures (color maps).
805
+ * Defaults to sRGB. Most textures are authored in sRGB.
806
+ * @default THREE.SRGBColorSpace
807
+ */
808
+ textureColorSpace?: THREE.ColorSpace
809
+ }
810
+
811
+ //* Renderer Settings ==============================
812
+
813
+ /**
814
+ * Shadow map setting: `true` uses `THREE.PCFShadowMap`, a string picks a type, an object is assigned
815
+ * to `renderer.shadowMap`.
816
+ *
817
+ * `'soft'` is a deprecated alias of `'percentage'`: both map to `THREE.PCFShadowMap`, because three.js
818
+ * deprecated `PCFSoftShadowMap` and made `PCFShadowMap` soft. Using `'soft'` logs a deprecation notice.
819
+ * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
820
+ */
821
+ type ShadowsConfig = boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>
822
+
823
+ /**
824
+ * Renderer-wide settings R3F reads from the `renderer` / `gl` props bag. They are not renderer
825
+ * properties: R3F applies them itself, and only on the canvas that owns its renderer.
826
+ */
827
+ interface RendererSettingsConfig extends ColorManagementConfig {
828
+ /**
829
+ * Enables shadows. Only on a renderer R3F builds from a props bag: a renderer instance or factory
830
+ * keeps the `shadowMap` you give it.
831
+ * @example <Canvas renderer={{ shadows: 'variance' }} />
832
+ */
833
+ shadows?: ShadowsConfig
834
+ }
835
+
836
+ //* WebGL Renderer Props ==============================
837
+
838
+ type DefaultGLProps = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
839
+ canvas: HTMLCanvasElement | OffscreenCanvas$1
840
+ }
841
+
842
+ type GLProps =
843
+ | Renderer
844
+ | ((defaultProps: DefaultGLProps) => Renderer)
845
+ | ((defaultProps: DefaultGLProps) => Promise<Renderer>)
846
+ | (Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> & RendererSettingsConfig)
847
+
848
+ //* WebGPU Renderer Props ==============================
849
+
850
+ type DefaultRendererProps = {
851
+ canvas: HTMLCanvasElement | OffscreenCanvas$1
852
+ [key: string]: any
853
+ }
854
+
855
+ /**
856
+ * Canvas-level scheduler configuration.
857
+ * Controls render timing relative to other canvases.
858
+ */
859
+ interface CanvasSchedulerConfig {
860
+ /**
861
+ * Run this Canvas root before the referenced Canvas root id(s).
862
+ */
863
+ before?: string | string[]
864
+ /**
865
+ * Run this Canvas root after the referenced Canvas root id(s).
866
+ */
867
+ after?: string | string[]
868
+ /**
869
+ * Numeric root order. Lower values run first.
870
+ */
871
+ order?: number
872
+ /**
873
+ * Limit this Canvas's default render job (frames per second).
874
+ */
875
+ fps?: number
876
+ }
877
+
878
+ /**
879
+ * The config keys the `renderer` props bag accepts besides the renderer's own parameters and
880
+ * properties. Multi-canvas and scheduling are Canvas props (`primary`, `share`, `scheduler`).
881
+ */
882
+ type RendererConfigExtended = RendererSettingsConfig
883
+
884
+ /**
885
+ * The `renderer` prop: opt into three's WebGPU renderer.
886
+ * - `true` (the `<Canvas renderer>` shorthand) or `{}`: a default `WebGPURenderer`
887
+ * - a props bag: constructor parameters (`antialias`, `forceWebGL`, ...) and renderer properties
888
+ * (`toneMapping`, ...), plus `shadows` and `textureColorSpace`
889
+ * - a renderer instance, or a sync/async factory receiving the default props. Structural, like
890
+ * the `gl` prop: anything with `render()`, so a wrapped or mocked renderer is accepted.
891
+ *
892
+ * Everything here configures a renderer this canvas owns. A canvas sharing a primary's renderer
893
+ * ignores a props bag (with a dev warning): renderer-wide settings come from the `<Canvas primary>`.
894
+ */
895
+ type RendererProps =
896
+ | boolean
897
+ | Renderer
898
+ | ((defaultProps: DefaultRendererProps) => Renderer)
899
+ | ((defaultProps: DefaultRendererProps) => Promise<Renderer>)
900
+ | (Partial<Properties<WebGPURenderer> & WebGPURendererParameters> & RendererConfigExtended)
901
+
902
+ //* Camera Props ==============================
903
+
904
+ type CameraProps = (
905
+ | THREE.Camera
906
+ | Partial<
907
+ ThreeElement<typeof THREE.Camera> &
908
+ ThreeElement<typeof THREE.PerspectiveCamera> &
909
+ ThreeElement<typeof THREE.OrthographicCamera>
910
+ >
911
+ ) & {
912
+ /** Flags the camera as manual, putting projection into your own hands */
913
+ manual?: boolean
914
+ }
915
+
916
+ //* Render Props ==============================
917
+
918
+ interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
919
+ /**
920
+ * Canvas id. Sets the HTML `id` attribute on the canvas element and the canvas's scheduler root
921
+ * id (so `scheduler={{ after: 'main' }}` can order against it). On a `<Canvas primary>` it is the
922
+ * name other canvases pass to `share="id"`.
923
+ * @example <Canvas id="main-viewer">...</Canvas>
924
+ */
925
+ id?: string
926
+ /**
927
+ * Make this canvas the owner of a WebGPU renderer that other canvases share. Every other WebGPU
928
+ * canvas mounted with or after it borrows its renderer (drawing into its own element through a
929
+ * `CanvasTarget`) unless it passes `share={false}` or its own renderer instance/factory.
930
+ * Renderer-wide settings (`renderer={{ shadows, toneMapping, ... }}`) belong on the primary.
931
+ *
932
+ * WebGPU only: on the root entry `primary` selects WebGPU like the `renderer` prop does. Several
933
+ * primaries need distinct `id`s, and the other canvases then pick one with `share="id"`.
934
+ * Read when the renderer is created; changing it later needs a remount.
935
+ * @example <Canvas primary renderer={{ shadows: true }}>...</Canvas>
936
+ */
937
+ primary?: boolean
938
+ /**
939
+ * Renderer sharing for a non-primary canvas (WebGPU only).
940
+ * - omitted: share the primary's renderer when exactly one `<Canvas primary>` is mounted, else
941
+ * own a renderer as usual
942
+ * - `"id"`: share the renderer of `<Canvas id="id" primary>`, waiting for it to mount
943
+ * - `false`: always own a renderer, even while a primary exists
944
+ *
945
+ * Read when the renderer is created; changing it later needs a remount.
946
+ * @example <Canvas share="main">...</Canvas>
947
+ */
948
+ share?: string | false
949
+ /**
950
+ * Canvas-level scheduler options: this canvas's order relative to other canvases, and an fps cap
951
+ * for its default render. A canvas sharing a primary's renderer runs after the primary unless
952
+ * `before`/`after` are given here.
953
+ * @example <Canvas scheduler={{ after: 'main', fps: 30 }}>...</Canvas>
954
+ */
955
+ scheduler?: CanvasSchedulerConfig
956
+ /** A threejs renderer instance or props that go into the default renderer */
957
+ gl?: GLProps
958
+ /** A WebGPU renderer instance or props that go into the default renderer */
959
+ renderer?: RendererProps
960
+ /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
961
+ size?: Size
962
+ /** Creates an orthographic camera */
963
+ orthographic?: boolean
964
+ /**
965
+ * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
966
+ * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
967
+ */
968
+ frameloop?: Frameloop
969
+ /**
970
+ * R3F performance options for adaptive performance.
971
+ * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
972
+ */
973
+ performance?: Partial<Omit<Performance, 'regress'>>
974
+ /** Target pixel ratio. Can clamp between a range: `[min, max]` */
975
+ dpr?: Dpr
976
+ /**
977
+ * Props that go into the default raycaster. `params` is merged into the raycaster's defaults,
978
+ * so a single threshold can be set: `raycaster={{ params: { Points: { threshold: 0.2 } } }}`.
979
+ */
980
+ raycaster?: Partial<Omit<THREE.Raycaster, 'params'>> & { params?: Partial<THREE.RaycasterParameters> }
981
+ /** A `THREE.Scene` instance or props that go into the default scene */
982
+ scene?: THREE.Scene | Partial<THREE.Scene>
983
+ /** A `THREE.Camera` instance or props that go into the default camera */
984
+ camera?: CameraProps
985
+ /** An R3F event manager to manage elements' pointer events */
986
+ events?: (store: RootStore) => EventManager<Element>
987
+ /** Callback after the canvas has rendered (but not yet committed) */
988
+ onCreated?: (state: RootState) => void
989
+ /** Response for pointer clicks that have missed any target */
990
+ onPointerMissed?: (event: MouseEvent) => void
991
+ /** Response for dragover events that have missed any target */
992
+ onDragOverMissed?: (event: DragEvent) => void
993
+ /** Response for drop events that have missed any target */
994
+ onDropMissed?: (event: DragEvent) => void
995
+ /** Whether to automatically update the frustum each frame (default: true) */
996
+ autoUpdateFrustum?: boolean
997
+ /**
998
+ * Enable WebGPU occlusion queries for onOccluded/onVisible events.
999
+ * Auto-enabled when any object uses onOccluded or onVisible handlers.
1000
+ * Only works with WebGPU renderer - WebGL will log a warning.
1001
+ */
1002
+ occlusion?: boolean
1003
+ /** Internal: stored size props from Canvas for reset functionality */
1004
+ _sizeProps?: { width?: number; height?: number } | null
1005
+ /**
1006
+ * Internal: the token a Canvas announced `primary` with before this root existed, so configure
1007
+ * continues that announcement instead of starting a second one.
1008
+ * @internal
1009
+ */
1010
+ _primaryToken?: object
1011
+ /** Force canvas dimensions to even numbers (fixes Safari rendering issues with odd/fractional sizes) */
1012
+ forceEven?: boolean
1013
+ }
1014
+
1015
+ //* Reconciler Root ==============================
1016
+
1017
+ interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
1018
+ ready: TrackedPromise<unknown>
1019
+ configure: (config?: RenderProps<TCanvas>) => TrackedPromise<ReconcilerRoot<TCanvas>>
1020
+ render: (element: ReactNode) => RootStore
1021
+ unmount: () => void
1022
+ }
1023
+
1024
+ //* Inject State ==============================
1025
+
1026
+ type InjectState = Partial<
1027
+ Omit<RootState, 'events'> & {
1028
+ events?: {
1029
+ enabled?: boolean
1030
+ priority?: number
1031
+ compute?: ComputeFunction
1032
+ connected?: any
1033
+ }
1034
+ /**
1035
+ * When true (default), injects a THREE.Scene between container and children if container isn't already a Scene.
1036
+ * This ensures state.scene is always a real THREE.Scene with proper properties (background, environment, fog).
1037
+ * Set to false to use the container directly as scene (anti-pattern, but supported for edge cases).
1038
+ */
1039
+ injectScene?: boolean
1040
+ }
1041
+ >
1042
+
1043
+ type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
1044
+
1045
+ interface MathRepresentation {
1046
+ set(...args: number[]): any
1047
+ }
1048
+ interface VectorRepresentation extends MathRepresentation {
1049
+ setScalar(value: number): any
1050
+ }
1051
+ type MathTypes = MathRepresentation | THREE.Euler | THREE.Color
1052
+
1053
+ type MathType<T extends MathTypes> = T extends THREE.Color
1054
+ ? Args<typeof THREE.Color> | THREE.ColorRepresentation
1055
+ : T extends VectorRepresentation | THREE.Layers | THREE.Euler
1056
+ ? T | MutableOrReadonlyParameters<T['set']> | number
1057
+ : T | MutableOrReadonlyParameters<T['set']>
1058
+
1059
+ type MathProps<P> = {
1060
+ [K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never
1061
+ }
1062
+
1063
+ type Vector2 = MathType<THREE.Vector2>
1064
+ type Vector3 = MathType<THREE.Vector3>
1065
+ type Vector4 = MathType<THREE.Vector4>
1066
+ type Color = MathType<THREE.Color>
1067
+ type Layers = MathType<THREE.Layers>
1068
+ type Quaternion = MathType<THREE.Quaternion>
1069
+ type Euler = MathType<THREE.Euler>
1070
+ type Matrix3 = MathType<THREE.Matrix3>
1071
+ type Matrix4 = MathType<THREE.Matrix4>
1072
+
1073
+ interface RaycastableRepresentation {
1074
+ raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void
1075
+ }
1076
+ type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {}
1077
+
1078
+ /**
1079
+ * Props for geometry transform methods that can be called with `once()`.
1080
+ * These methods modify the geometry in-place and only make sense to call once on mount.
1081
+ *
1082
+ * @example
1083
+ * import { once } from '@react-three/fiber'
1084
+ *
1085
+ * <boxGeometry args={[1, 1, 1]} rotateX={once(Math.PI / 2)} />
1086
+ * <planeGeometry args={[10, 10]} translate={once(0, 0, 5)} />
1087
+ * <bufferGeometry applyMatrix4={once(matrix)} center={once()} />
1088
+ */
1089
+ interface GeometryTransformProps {
1090
+ /** Rotate the geometry about the X axis (radians). Use with once(). */
1091
+ rotateX?: number
1092
+ /** Rotate the geometry about the Y axis (radians). Use with once(). */
1093
+ rotateY?: number
1094
+ /** Rotate the geometry about the Z axis (radians). Use with once(). */
1095
+ rotateZ?: number
1096
+ /** Translate the geometry (x, y, z). Use with once(). */
1097
+ translate?: [x: number, y: number, z: number]
1098
+ /** Scale the geometry (x, y, z). Use with once(). */
1099
+ scale?: [x: number, y: number, z: number]
1100
+ /** Center the geometry based on bounding box. Use with once(). */
1101
+ center?: true
1102
+ /** Apply a Matrix4 transformation. Use with once(). */
1103
+ applyMatrix4?: THREE.Matrix4
1104
+ /** Apply a Quaternion rotation. Use with once(). */
1105
+ applyQuaternion?: THREE.Quaternion
1106
+ }
1107
+
1108
+ type GeometryProps<P> = P extends THREE.BufferGeometry ? GeometryTransformProps : {}
1109
+
1110
+ /**
1111
+ * Workaround for @types/three TSL node type issues.
1112
+ * The Node base class has properties that subclasses (OperatorNode, ConstNode, etc.) don't inherit.
1113
+ * This transforms `Node | null` properties to accept any object with node-like shape.
1114
+ */
1115
+ type TSLNodeInput = { nodeType?: string | null; uuid?: string } | null
1116
+
1117
+ /**
1118
+ * For node material properties (colorNode, positionNode, etc.), accept broader types
1119
+ * since @types/three has broken inheritance for TSL node subclasses. NodeClass requires
1120
+ * `nodeType`, so this structural key test remains neutral to the selected Three entry.
1121
+ */
1122
+ type NodeProps<P> = {
1123
+ [K in keyof P as NonNullable<P[K]> extends { nodeType: string | null } ? K : never]?: TSLNodeInput
1124
+ }
1125
+
1126
+ interface ReactProps<P> {
1127
+ children?: React.ReactNode
1128
+ ref?: React.Ref<P>
1129
+ key?: React.Key
1130
+ }
1131
+
1132
+ type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<
1133
+ Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P> & GeometryProps<P> & NodeProps<P>>
1134
+ >
1135
+
1136
+ type ThreeElement<T extends ConstructorRepresentation> = Mutable<
1137
+ Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>
1138
+ >
1139
+
1140
+ /**
1141
+ * Every constructor export of a three namespace as an uncapitalized JSX element. Non-constructor
1142
+ * exports (constants, functions, nested namespaces) are dropped from the keys rather than mapped
1143
+ * to `never`: a single `never`-valued key in `JSX.IntrinsicElements` collapses the props of any
1144
+ * tag typed `React.ElementType` (#3898).
1145
+ */
1146
+ type ThreeToJSXElements<T extends Record<string, any>> = {
1147
+ [K in keyof T & string as T[K] extends ConstructorRepresentation ? Uncapitalize<K> : never]: ThreeElement<T[K]>
1148
+ }
1149
+
1150
+ /** Method names of Object3D, excluded from the `primitive` element's typed props. */
1151
+ type Object3DMethod = NonNullable<
1152
+ {
1153
+ [K in keyof THREE.Object3D]-?: THREE.Object3D[K] extends (...args: any[]) => any ? K : never
1154
+ }[keyof THREE.Object3D]
1155
+ >
1156
+
1157
+ /** Look up a key present in a generic element map. */
1158
+ type ElementOf<E, K extends string> = E[Extract<keyof E, K>]
1159
+
1160
+ /**
1161
+ * The JSX element map derived from an entry's Three.js exports. Each entry declares its own
1162
+ * `ThreeElements` from this (`src/index.tsx`, `src/legacy.tsx`, `src/webgpu/index.tsx`) and augments
1163
+ * react's `IntrinsicElements` with it, so `/legacy` never advertises node materials and `/webgpu`
1164
+ * never advertises a `<webGLRenderer>`.
1165
+ */
1166
+ type ThreeElementsOf<T extends Record<string, any>> = Omit<
1167
+ ThreeToJSXElements<T>,
1168
+ 'audio' | 'source' | 'line' | 'path'
1169
+ > & {
1170
+ /**
1171
+ * `primitive` wraps a pre-existing object, so its props cannot be derived from one class.
1172
+ * Events are typed from `EventHandlers` (`onClick={(e) => ...}` infers `e`), the ref is
1173
+ * untyped, and any other prop is accepted and applied to the object by name. Object3D's own
1174
+ * methods are left out of the typed surface: they return `this`, so a subclass element's
1175
+ * props (`ThreeElements['group']`) could not be spread onto a primitive otherwise.
1176
+ */
1177
+ primitive: Omit<ThreeElement<typeof THREE.Object3D>, 'args' | 'object' | 'ref' | Object3DMethod> & {
1178
+ object: object
1179
+ ref?: React.Ref<any>
1180
+ [prop: string]: unknown
1181
+ }
1182
+ // Conflicts with DOM types can be accessed through a three* prefix
1183
+ threeAudio: ElementOf<ThreeToJSXElements<T>, 'audio'>
1184
+ threeSource: ElementOf<ThreeToJSXElements<T>, 'source'>
1185
+ threeLine: ElementOf<ThreeToJSXElements<T>, 'line'>
1186
+ threePath: ElementOf<ThreeToJSXElements<T>, 'path'>
1187
+ }
1188
+
1189
+ interface RootExtension {
1190
+ /** Unique name. Registering the same name again replaces the entry (HMR-safe); roots it already
1191
+ * set up are not set up a second time, but get the new entry's dispose and hmr. */
1192
+ name: string;
1193
+ /**
1194
+ * Called once per root, after its renderer exists and before `onCreated` and the first frame.
1195
+ * `isLegacy` and `primaryStore` are known by then, so an extension can skip WebGL roots or defer
1196
+ * to the primary canvas. Return fields to merge into the root's state, or nothing.
1197
+ */
1198
+ setup?(store: RootStore): Partial<RootState> | void;
1199
+ /** Called when a root this extension set up unmounts. */
1200
+ dispose?(store: RootStore): void;
1201
+ /** Called when `<Canvas>` detects hot module replacement (skipped with `hmr={false}`). */
1202
+ hmr?(store: RootStore): void;
1203
+ }
1204
+ /**
1205
+ * Register an extension. It is set up on every live root immediately, and on every root created
1206
+ * afterwards. Returns a function that unregisters it: new roots are no longer set up, while roots
1207
+ * it already set up keep its state and still get its dispose when they unmount.
1208
+ */
1209
+ declare function registerRootExtension(extension: RootExtension): () => void;
1210
+ /**
1211
+ * Point a root's default render job at a different render function, or back at
1212
+ * `renderer.render(scene, camera)` with `null`.
1213
+ *
1214
+ * The default job keeps everything else: the Canvas `fps` throttle, error propagation to the error
1215
+ * boundary, and backing off when a user `useFrame(..., { phase: 'render' })` job takes over.
1216
+ */
1217
+ declare function setRenderOverride(store: RootStore, render: (() => void) | null): void;
1218
+
1219
+ /**
1220
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1221
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1222
+ */
1223
+ declare function useStore(): RootStore;
1224
+ /**
1225
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1226
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1227
+ */
1228
+ declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
1229
+
1230
+ /**
1231
+ * React context that carries the current root's {@link RootStore}. Each root provides its store and
1232
+ * each portal provides its own scoped one; `useStore`, and every hook built on it, reads it.
1233
+ *
1234
+ * Stored on `globalThis` under `Symbol.for('@react-three/fiber.context')`, so every copy and entry
1235
+ * of fiber shares a single context.
1236
+ */
1237
+ declare const context: React$1.Context<RootStore>;
1238
+
1239
+ export { useStore as a$, useThree as b0, registerRootExtension as t, setRenderOverride as u, context as w };
1240
+ export type { EventHandlers as $, RenderCallback as A, Performance as B, Color as C, Dpr as D, Euler as E, Frameloop as F, GeometryTransformProps as G, RootState as H, InternalState as I, RootStore as J, Intersection as K, Layers as L, MutableOrReadonlyParameters as M, NodeProps as N, Object3DMethod as O, PointerState as P, Quaternion as Q, RaycastableRepresentation as R, Subscription as S, TSLNodeInput as T, Camera as U, VectorRepresentation as V, IntersectionEvent as W, XRManager as X, ThreeEvent as Y, DomEvent as Z, Events as _, MathRepresentation as a, FilterFunction as a0, ComputeFunction as a1, XRPointerConfig as a2, EventManager as a3, PointerCaptureTarget as a4, VisibilityEntry as a5, OffscreenCanvas$1 as a6, BaseRendererProps as a7, RendererFactory as a8, Renderer as a9, Mutable as aA, IsOptional as aB, IsAllOptional as aC, ThreeCamera as aD, Act as aE, Bridge as aF, SetBlock as aG, UnblockProps as aH, ObjectMap as aI, EquConfig as aJ, Disposable as aK, FrameNextState as aL, FrameState as aM, FrameNextCallback as aN, FrameCallback as aO, ThreeNamespace as aP, ThreeCore as aQ, OcclusionSupport as aR, WebGLSupport as aS, WebGPUSupport as aT, RendererSupport as aU, RendererProvider as aV, Register as aW, RegisteredRenderer as aX, ForRegisteredRenderer as aY, R3FRenderTarget as aZ, R3FRendererSupport as a_, ColorManagementConfig as aa, ShadowsConfig as ab, RendererSettingsConfig as ac, DefaultGLProps as ad, GLProps as ae, DefaultRendererProps as af, CanvasSchedulerConfig as ag, RendererConfigExtended as ah, RendererProps as ai, CameraProps as aj, RenderProps as ak, InjectState as al, FiberRoot as am, TrackedPromise as an, Root as ao, AttachFnType as ap, AttachType as aq, Catalogue as ar, Args as as, ArgsProp as at, InstanceProps as au, Instance as av, HostConfig as aw, NonFunctionKeys as ax, Overwrite as ay, Properties as az, MathTypes as b, MathType as c, MathProps as d, Vector2 as e, Vector3 as f, Vector4 as g, Matrix3 as h, Matrix4 as i, EventProps as j, GeometryProps as k, ReactProps as l, ConstructorRepresentation as m, ElementProps as n, ThreeElement as o, ThreeToJSXElements as p, ThreeElementsOf as q, ElementOf as r, ReconcilerRoot as s, RootExtension as v, R3FRenderer as x, Size as y, Viewport as z };