@react-three/fiber 10.0.0-canary.dc0ec15 → 10.0.0-canary.de17310

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.
@@ -1,18 +1,10 @@
1
- import * as React$1 from 'react';
2
- import { ReactNode } from 'react';
3
- import * as THREE$1 from 'three';
4
- import { WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer, Color as Color$2, ColorRepresentation as ColorRepresentation$1, Euler as Euler$2, Loader, RenderTargetOptions as RenderTargetOptions$1 } from 'three';
5
- import * as three_webgpu from 'three/webgpu';
6
- import { WebGPURenderer, Node, StorageTexture, Storage3DTexture, StorageArrayTexture, Data3DTexture, CanvasTarget, CubeRenderTarget, RenderTarget, Euler as Euler$1, Color as Color$1, ColorRepresentation, Layers as Layers$1, Raycaster, Intersection as Intersection$1, BufferGeometry, Matrix4 as Matrix4$1, Quaternion as Quaternion$1, Object3D, Vector2 as Vector2$1, Vector3 as Vector3$1, Vector4 as Vector4$1, Matrix3 as Matrix3$1 } from 'three/webgpu';
1
+ import * as React from 'react';
2
+ import * as THREE from 'three';
3
+ import { WebGPURenderer, CanvasTarget } from 'three/webgpu';
7
4
  import { StoreApi } from 'zustand';
8
5
  import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
9
6
  import { FrameCallback as FrameCallback$1, FrameTimingState, SchedulerApi, UseFrameNextOptions, FrameNextControls } from '@pmndrs/scheduler';
10
7
  export { AddPhaseOptions, FrameControls, FrameNextControls, FrameTimingState, RootOptions, SchedulerApi, UseFrameNextOptions, UseFrameOptions } from '@pmndrs/scheduler';
11
- import * as three_examples_jsm_inspector_Inspector_js from 'three/examples/jsm/inspector/Inspector.js';
12
- import { WebGLRendererParameters } from 'three/src/renderers/WebGLRenderer.js';
13
- import { Inspector } from 'three/addons/inspector/Inspector.js';
14
- import { Options } from 'react-use-measure';
15
-
16
8
 
17
9
  //* Utility Types ==============================
18
10
 
@@ -29,7 +21,7 @@ type IsAllOptional<T extends any[]> = T extends [infer First, ...infer Rest]
29
21
 
30
22
  //* Camera Types ==============================
31
23
 
32
- type ThreeCamera = (THREE$1.OrthographicCamera | THREE$1.PerspectiveCamera) & { manual?: boolean }
24
+ type ThreeCamera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & { manual?: boolean }
33
25
 
34
26
  //* Act Type ==============================
35
27
 
@@ -37,10 +29,10 @@ type Act = <T = any>(cb: () => Promise<T>) => Promise<T>
37
29
 
38
30
  //* Bridge & Block Types ==============================
39
31
 
40
- type Bridge = React$1.FC<{ children?: React$1.ReactNode }>
32
+ type Bridge = React.FC<{ children?: React.ReactNode }>
41
33
 
42
34
  type SetBlock = false | Promise<null> | null
43
- type UnblockProps = { set: React$1.Dispatch<React$1.SetStateAction<SetBlock>>; children: React$1.ReactNode }
35
+ type UnblockProps = { set: React.Dispatch<React.SetStateAction<SetBlock>>; children: React.ReactNode }
44
36
 
45
37
  //* Object Map Type ==============================
46
38
 
@@ -65,9 +57,9 @@ interface ObjectMap<
65
57
  meshes: string
66
58
  },
67
59
  > {
68
- nodes: Record<T['nodes'] extends string ? T['nodes'] : string, THREE$1.Object3D>
69
- materials: Record<T['materials'] extends string ? T['materials'] : string, THREE$1.Material>
70
- meshes: Record<T['meshes'] extends string ? T['meshes'] : string, THREE$1.Mesh>
60
+ nodes: Record<T['nodes'] extends string ? T['nodes'] : string, THREE.Object3D>
61
+ materials: Record<T['materials'] extends string ? T['materials'] : string, THREE.Material>
62
+ meshes: Record<T['meshes'] extends string ? T['meshes'] : string, THREE.Mesh>
71
63
  }
72
64
 
73
65
  //* Equality Config ==============================
@@ -90,28 +82,28 @@ interface Disposable {
90
82
 
91
83
  //* Event-related Types =====================================
92
84
 
93
- interface Intersection extends THREE$1.Intersection {
85
+ interface Intersection extends THREE.Intersection {
94
86
  /** The event source (the object which registered the handler) */
95
- eventObject: THREE$1.Object3D
87
+ eventObject: THREE.Object3D
96
88
  }
97
89
 
98
- type Camera = THREE$1.OrthographicCamera | THREE$1.PerspectiveCamera
90
+ type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera
99
91
 
100
92
  interface IntersectionEvent<TSourceEvent> extends Intersection {
101
93
  /** The event source (the object which registered the handler) */
102
- eventObject: THREE$1.Object3D
94
+ eventObject: THREE.Object3D
103
95
  /** An array of intersections */
104
96
  intersections: Intersection[]
105
97
  /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
106
- unprojectedPoint: THREE$1.Vector3
98
+ unprojectedPoint: THREE.Vector3
107
99
  /** Normalized event coordinates */
108
- pointer: THREE$1.Vector2
100
+ pointer: THREE.Vector2
109
101
  /** pointerId of the original event for multiple pointer events */
110
102
  pointerId: number
111
103
  /** Delta between first click and this event */
112
104
  delta: number
113
105
  /** The ray that pierced it */
114
- ray: THREE$1.Ray
106
+ ray: THREE.Ray
115
107
  /** The camera that was used by the raycaster */
116
108
  camera: Camera
117
109
  /** stopPropagation will stop underlying handlers from firing */
@@ -181,13 +173,13 @@ interface EventHandlers {
181
173
  onVisible?: (visible: boolean) => void
182
174
  }
183
175
 
184
- type FilterFunction = (items: THREE$1.Intersection[], state: RootState) => THREE$1.Intersection[]
176
+ type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[]
185
177
  type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void
186
178
 
187
179
  /** Configuration for XR pointer registration (controllers/hands) */
188
180
  interface XRPointerConfig {
189
181
  /** Ray origin (updated each frame by XR system) */
190
- ray: THREE$1.Ray
182
+ ray: THREE.Ray
191
183
  /** Optional: custom compute function for this pointer */
192
184
  compute?: (state: RootState) => void
193
185
  /** Pointer type identifier */
@@ -241,7 +233,7 @@ interface PointerCaptureTarget {
241
233
 
242
234
  /** Entry in the visibility registry for tracking object visibility state */
243
235
  interface VisibilityEntry {
244
- object: THREE$1.Object3D
236
+ object: THREE.Object3D
245
237
  handlers: Pick<EventHandlers, 'onFramed' | 'onOccluded' | 'onVisible'>
246
238
  lastFramedState: boolean | null
247
239
  lastOccludedState: boolean | null
@@ -276,99 +268,15 @@ type FrameNextCallback = FrameCallback$1<RootState>
276
268
  /** Alias for FrameNextCallback */
277
269
  type FrameCallback = FrameNextCallback
278
270
 
279
- //* Buffer Types (useBuffers) ========================================
280
-
281
- /**
282
- * Buffer-like types for GPU compute and storage operations.
283
- * Includes raw CPU arrays, Three.js buffer attributes, and TSL buffer nodes.
284
- *
285
- * @example
286
- * ```tsx
287
- * const { positions, velocities } = useBuffers(() => ({
288
- * positions: instancedArray(count, 'vec3'), // StorageBufferNode
289
- * velocities: new Float32Array(count * 3), // TypedArray
290
- * }), 'particles')
291
- * ```
292
- */
293
- type BufferLike =
294
- | Float32Array
295
- | Uint32Array
296
- | Int32Array
297
- | Float64Array
298
- | Uint8Array
299
- | Int8Array
300
- | Uint16Array
301
- | Int16Array
302
- | THREE$1.BufferAttribute // Base class for all buffer attributes
303
- | THREE$1.InterleavedBufferAttribute
304
- | Node // TSL buffer nodes (instancedArray, storage)
305
-
306
- /** Flat record of buffer-like values (no nested scopes) */
307
- type BufferRecord = Record<string, BufferLike>
308
-
309
- /**
310
- * Buffer store that can contain both root-level buffers and scoped buffer objects.
311
- * Structure: { positions: Float32Array, particles: { vel: StorageBufferNode } }
312
- */
313
- type BufferStore = Record<string, BufferLike | BufferRecord>
314
-
315
- //* Node Types (useNodes) ========================================
316
-
317
- /**
318
- * Every node representation `useNodes` accepts and `state.nodes` holds: three's real `Node`,
319
- * the callable proxy `Fn()` returns, and the legacy structural shape (`uuid`/`nodeType`) older
320
- * code passes through. Creators are constrained to this same type, so the shape a creator returns
321
- * and the shape the store holds are one type by construction.
322
- */
323
- type NodeLike = TSLNodeType | LegacyTSLNodeLike
324
-
325
- /** Flat record of TSL nodes (no nested scopes) */
326
- type NodeRecord<T extends NodeLike = NodeLike> = Record<string, T>
327
-
328
- /**
329
- * Node store that can contain both root-level nodes and scoped node objects.
330
- * Structure: { wobble: OperatorNode, fx: { blur: ShaderCallable } }
331
- */
332
- type NodeStore = Record<string, NodeLike | NodeRecord>
333
-
334
- //* Storage Types (useGPUStorage) ========================================
335
-
336
- /**
337
- * GPU storage types for texture-based storage operations.
338
- * Includes Three.js storage textures and TSL storage texture nodes.
339
- *
340
- * @example
341
- * ```tsx
342
- * const { heightMap } = useGPUStorage(() => ({
343
- * heightMap: new StorageTexture(512, 512),
344
- * }), 'terrain')
345
- * ```
346
- */
347
- type StorageLike =
348
- | StorageTexture // 2D GPU storage texture
349
- | Storage3DTexture // 3D GPU storage texture (volumes, fluid grids)
350
- | StorageArrayTexture // 2D-array GPU storage texture
351
- | Data3DTexture // 3D texture (can be used as storage)
352
- | Node // TSL storage texture nodes (storageTexture)
353
-
354
- /** Flat record of storage-like values (no nested scopes) */
355
- type StorageRecord = Record<string, StorageLike>
356
-
357
- /**
358
- * Storage store that can contain both root-level storage and scoped storage objects.
359
- * Structure: { heightMap: StorageTexture, terrain: { normal: StorageTextureNode } }
360
- */
361
- type StorageStore = Record<string, StorageLike | StorageRecord>
362
-
363
271
  //* Renderer Types ========================================
364
272
 
365
273
  /** Default renderer type - union of WebGL and WebGPU renderers */
366
- type R3FRenderer = THREE$1.WebGLRenderer | WebGPURenderer
274
+ type R3FRenderer = THREE.WebGLRenderer | WebGPURenderer
367
275
 
368
276
  //* Core Store Types ========================================
369
277
 
370
278
  type Subscription = {
371
- ref: React$1.RefObject<RenderCallback>
279
+ ref: React.RefObject<RenderCallback>
372
280
  priority: number
373
281
  store: RootStore
374
282
  }
@@ -378,11 +286,11 @@ type PointerState = {
378
286
  /** Objects currently hovered by this pointer */
379
287
  hovered: Map<string, ThreeEvent<DomEvent>>
380
288
  /** Objects capturing this pointer */
381
- captured: Map<THREE$1.Object3D, PointerCaptureTarget>
289
+ captured: Map<THREE.Object3D, PointerCaptureTarget>
382
290
  /** Initial click position [x, y] */
383
291
  initialClick: [x: number, y: number]
384
292
  /** Objects hit on initial click */
385
- initialHits: THREE$1.Object3D[]
293
+ initialHits: THREE.Object3D[]
386
294
  }
387
295
 
388
296
  type Dpr = number | [min: number, max: number]
@@ -425,36 +333,36 @@ interface Performance {
425
333
  }
426
334
 
427
335
  interface InternalState {
428
- interaction: THREE$1.Object3D[]
336
+ interaction: THREE.Object3D[]
429
337
  subscribers: Subscription[]
430
338
  /** Per-pointer state (hover, capture, click tracking) - replaces hovered, capturedMap, initialClick, initialHits */
431
339
  pointerMap: Map<number, PointerState>
432
340
  /** Pointers needing raycast this frame (used with frameTimedRaycasts) */
433
341
  pointerDirty: Map<number, DomEvent>
434
342
  /** Last event received (for events.update() compatibility) */
435
- lastEvent: React$1.RefObject<DomEvent | null>
343
+ lastEvent: React.RefObject<DomEvent | null>
436
344
  /** @deprecated Use pointerMap.get(pointerId).hovered instead */
437
345
  hovered: Map<string, ThreeEvent<DomEvent>>
438
346
  /** @deprecated Use pointerMap.get(pointerId).captured instead */
439
- capturedMap: Map<number, Map<THREE$1.Object3D, PointerCaptureTarget>>
347
+ capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>
440
348
  /** @deprecated Use pointerMap.get(pointerId).initialClick instead */
441
349
  initialClick: [x: number, y: number]
442
350
  /** @deprecated Use pointerMap.get(pointerId).initialHits instead */
443
- initialHits: THREE$1.Object3D[]
351
+ initialHits: THREE.Object3D[]
444
352
  /** Visibility event registry (onFramed, onOccluded, onVisible) */
445
353
  visibilityRegistry: Map<string, VisibilityEntry>
446
354
  /** Whether occlusion queries are enabled (WebGPU only) */
447
355
  occlusionEnabled: boolean
448
356
  /** Reference to the invisible occlusion observer mesh */
449
- occlusionObserver: THREE$1.Mesh | null
357
+ occlusionObserver: THREE.Mesh | null
450
358
  /** Cached occlusion results from render pass - keyed by Object3D */
451
- occlusionCache: Map<THREE$1.Object3D, boolean | null>
359
+ occlusionCache: Map<THREE.Object3D, boolean | null>
452
360
  /** Internal helper group for R3F system objects (occlusion observer, etc.) */
453
- helperGroup: THREE$1.Group | null
361
+ helperGroup: THREE.Group | null
454
362
  active: boolean
455
363
  priority: number
456
364
  frames: number
457
- subscribe: (callback: React$1.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
365
+ subscribe: (callback: React.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
458
366
  /** Internal renderer storage - use state.renderer or state.gl to access */
459
367
  actualRenderer: R3FRenderer
460
368
  /** Global scheduler reference (for useFrame hook) */
@@ -470,7 +378,7 @@ interface InternalState {
470
378
  /** Function to unregister this root from the global scheduler */
471
379
  unregisterRoot?: () => void
472
380
  /** Container for child attachment (scene for root, original container for portals) */
473
- container?: THREE$1.Object3D
381
+ container?: THREE.Object3D
474
382
  /**
475
383
  * The CanvasTarget this root sizes and renders through.
476
384
  *
@@ -532,16 +440,17 @@ interface RootState {
532
440
  /** Get current state */
533
441
  get: StoreApi<RootState>['getState']
534
442
  /**
535
- * Reference to the authoritative store for shared TSL resources (uniforms, nodes, etc).
443
+ * The store of the canvas that owns this root's renderer.
536
444
  * - For primary/independent canvases: points to its own store (self-reference)
537
445
  * - For secondary canvases: points to the primary canvas's store
446
+ * - Portals copy it from their parent
538
447
  *
539
- * Hooks like useNodes/useUniforms should read from primaryStore to ensure
540
- * consistent shared state across all canvases sharing a renderer.
448
+ * Anything shared per renderer rather than per canvas (e.g. @react-three/tsl's resources)
449
+ * resolves through it.
541
450
  */
542
451
  primaryStore: RootStore
543
452
  /** @deprecated Use `renderer` instead. The instance of the renderer (typed as WebGLRenderer for backwards compat) */
544
- gl: THREE$1.WebGLRenderer
453
+ gl: THREE.WebGLRenderer
545
454
  /** The renderer instance - type depends on entry point (WebGPU, Legacy, or union for default) */
546
455
  renderer: R3FRenderer
547
456
  /** Inspector of the webGPU Renderer. Init in the canvas */
@@ -550,27 +459,27 @@ interface RootState {
550
459
  /** Default camera */
551
460
  camera: ThreeCamera
552
461
  /** Camera frustum for visibility checks - auto-updated each frame when autoUpdateFrustum is true */
553
- frustum: THREE$1.Frustum
462
+ frustum: THREE.Frustum
554
463
  /** Whether to automatically update the frustum each frame (default: true) */
555
464
  autoUpdateFrustum: boolean
556
465
  /** Default scene (may be overridden in portals to point to the portal container) */
557
- scene: THREE$1.Scene
466
+ scene: THREE.Scene
558
467
  /** The actual root THREE.Scene - always points to the true scene, even inside portals */
559
- rootScene: THREE$1.Scene
468
+ rootScene: THREE.Scene
560
469
  /** Default raycaster */
561
- raycaster: THREE$1.Raycaster
470
+ raycaster: THREE.Raycaster
562
471
  /** Event layer interface, contains the event handler and the node they're connected to */
563
472
  events: EventManager<any>
564
473
  /** XR interface */
565
474
  xr: XRManager
566
475
  /** Currently used controls */
567
- controls: THREE$1.EventDispatcher | null
476
+ controls: THREE.EventDispatcher | null
568
477
  /** Normalized event coordinates */
569
- pointer: THREE$1.Vector2
478
+ pointer: THREE.Vector2
570
479
  /** @deprecated Normalized event coordinates, use "pointer" instead! */
571
- mouse: THREE$1.Vector2
480
+ mouse: THREE.Vector2
572
481
  /** Color space assigned to 8-bit input textures (color maps). Most textures are authored in sRGB. */
573
- textureColorSpace: THREE$1.ColorSpace
482
+ textureColorSpace: THREE.ColorSpace
574
483
  /** Render loop flags */
575
484
  frameloop: Frameloop
576
485
  performance: Performance
@@ -580,7 +489,7 @@ interface RootState {
580
489
  viewport: Viewport & {
581
490
  getCurrentViewport: (
582
491
  camera?: ThreeCamera,
583
- target?: THREE$1.Vector3 | Parameters<THREE$1.Vector3['set']>,
492
+ target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>,
584
493
  size?: Size,
585
494
  ) => Omit<Viewport, 'dpr' | 'initialDpr'>
586
495
  }
@@ -600,24 +509,10 @@ interface RootState {
600
509
  setError: (error: Error | null) => void
601
510
  /** Current error state (null when no error) */
602
511
  error: Error | null
603
- /** Global TSL uniform nodes - root-level uniforms + scoped sub-objects. Use useUniforms() hook */
604
- uniforms: UniformStore
605
- /** Global TSL nodes - root-level nodes + scoped sub-objects. Use useNodes() hook */
606
- nodes: NodeStore
607
- /** Global TSL buffer nodes - root-level buffers + scoped sub-objects. Use useBuffers() hook */
608
- buffers: BufferStore
609
- /** Global GPU storage (textures, etc.) - root-level storage + scoped sub-objects. Use useGPUStorage() hook */
610
- gpuStorage: StorageStore
611
512
  /** Global Texture registry (key → Texture, usually keyed by URL) - use useTextures() hook for access + lifecycle */
612
- textures: Map<string, THREE$1.Texture>
513
+ textures: Map<string, THREE.Texture>
613
514
  /** Internal: refcount per texture key, driven by mounted useTexture consumers (registry enrollment is on by default) */
614
515
  _textureRefs: Map<string, number>
615
- /** WebGPU RenderPipeline instance - use useRenderPipeline() hook */
616
- renderPipeline: ThreeRenderPipeline | null
617
- /** Global TSL pass nodes for render pipeline - use useRenderPipeline() hook */
618
- passes: PassRecord
619
- /** Internal version counter for HMR - incremented by rebuildNodes/rebuildUniforms to bust memoization */
620
- _hmrVersion: number
621
516
  /** Internal: whether setSize() has taken ownership of canvas dimensions */
622
517
  _sizeImperative: boolean
623
518
  /** Internal: stored size props from Canvas for reset functionality */
@@ -643,920 +538,7 @@ interface RootState {
643
538
 
644
539
  type RootStore = UseBoundStoreWithEqualityFn<StoreApi<RootState>>
645
540
 
646
- /**
647
- * @fileoverview Internal Three.js re-exports - DEFAULT ENTRY
648
- *
649
- * This is the single source of truth for Three.js imports within R3F.
650
- * All internal code should import from '#three' (or '../three' relative).
651
- *
652
- * DEFAULT behavior (root import):
653
- * - Exports from three/webgpu (the new standard)
654
- * - Also exports WebGLRenderer for backwards compatibility (with deprecation)
655
- * - Both renderer types available, runtime decides which to use
656
- *
657
- * For explicit legacy or webgpu-only builds, use:
658
- * - #three/legacy - WebGL only, no WebGPU
659
- * - #three/webgpu - WebGPU only, no WebGL legacy
660
- */
661
- declare const R3F_BUILD_LEGACY = true;
662
- declare const R3F_BUILD_WEBGPU = true;
663
-
664
- /** Lazily load the three Inspector. Keeps it out of the eager module graph — see note above. */
665
- declare function loadInspector(): Promise<typeof three_examples_jsm_inspector_Inspector_js.Inspector>;
666
-
667
-
668
- type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
669
-
670
- interface MathRepresentation {
671
- set(...args: number[]): any
672
- }
673
- interface VectorRepresentation extends MathRepresentation {
674
- setScalar(value: number): any
675
- }
676
- type MathTypes = MathRepresentation | Euler$1 | Color$1
677
-
678
- type MathType<T extends MathTypes> = T extends Color$1
679
- ? Args<typeof Color$1> | ColorRepresentation
680
- : T extends VectorRepresentation | Layers$1 | Euler$1
681
- ? T | MutableOrReadonlyParameters<T['set']> | number
682
- : T | MutableOrReadonlyParameters<T['set']>
683
-
684
- type MathProps<P> = {
685
- [K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never
686
- }
687
-
688
- type Vector2 = MathType<Vector2$1>
689
- type Vector3 = MathType<Vector3$1>
690
- type Vector4 = MathType<Vector4$1>
691
- type Color = MathType<Color$1>
692
- type Layers = MathType<Layers$1>
693
- type Quaternion = MathType<Quaternion$1>
694
- type Euler = MathType<Euler$1>
695
- type Matrix3 = MathType<Matrix3$1>
696
- type Matrix4 = MathType<Matrix4$1>
697
-
698
- interface RaycastableRepresentation {
699
- raycast(raycaster: Raycaster, intersects: Intersection$1[]): void
700
- }
701
- type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {}
702
-
703
- /**
704
- * Props for geometry transform methods that can be called with `once()`.
705
- * These methods modify the geometry in-place and only make sense to call once on mount.
706
- *
707
- * @example
708
- * import { once } from '@react-three/fiber'
709
- *
710
- * <boxGeometry args={[1, 1, 1]} rotateX={once(Math.PI / 2)} />
711
- * <planeGeometry args={[10, 10]} translate={once(0, 0, 5)} />
712
- * <bufferGeometry applyMatrix4={once(matrix)} center={once()} />
713
- */
714
- interface GeometryTransformProps {
715
- /** Rotate the geometry about the X axis (radians). Use with once(). */
716
- rotateX?: number
717
- /** Rotate the geometry about the Y axis (radians). Use with once(). */
718
- rotateY?: number
719
- /** Rotate the geometry about the Z axis (radians). Use with once(). */
720
- rotateZ?: number
721
- /** Translate the geometry (x, y, z). Use with once(). */
722
- translate?: [x: number, y: number, z: number]
723
- /** Scale the geometry (x, y, z). Use with once(). */
724
- scale?: [x: number, y: number, z: number]
725
- /** Center the geometry based on bounding box. Use with once(). */
726
- center?: true
727
- /** Apply a Matrix4 transformation. Use with once(). */
728
- applyMatrix4?: Matrix4$1
729
- /** Apply a Quaternion rotation. Use with once(). */
730
- applyQuaternion?: Quaternion$1
731
- }
732
-
733
- type GeometryProps<P> = P extends BufferGeometry ? GeometryTransformProps : {}
734
-
735
- /**
736
- * Workaround for @types/three TSL node type issues.
737
- * The Node base class has properties that subclasses (OperatorNode, ConstNode, etc.) don't inherit.
738
- * This transforms `Node | null` properties to accept any object with node-like shape.
739
- */
740
- type TSLNodeInput = { nodeType?: string | null; uuid?: string } | null
741
-
742
- /**
743
- * For node material properties (colorNode, positionNode, etc.), accept broader types
744
- * since @types/three has broken inheritance for TSL node subclasses. NodeClass requires
745
- * `nodeType`, so this structural key test remains neutral to the selected Three entry.
746
- */
747
- type NodeProps<P> = {
748
- [K in keyof P as NonNullable<P[K]> extends { nodeType: string | null } ? K : never]?: TSLNodeInput
749
- }
750
-
751
- interface ReactProps<P> {
752
- children?: React.ReactNode
753
- ref?: React.Ref<P>
754
- key?: React.Key
755
- }
756
-
757
- type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<
758
- Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P> & GeometryProps<P> & NodeProps<P>>
759
- >
760
-
761
- type ThreeElement<T extends ConstructorRepresentation> = Mutable<
762
- Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>
763
- >
764
-
765
- type ThreeToJSXElements<T extends Record<string, any>> = {
766
- [K in keyof T & string as Uncapitalize<K>]: T[K] extends ConstructorRepresentation ? ThreeElement<T[K]> : never
767
- }
768
-
769
- /** Method names of Object3D, excluded from the `primitive` element's typed props. */
770
- type Object3DMethod = NonNullable<
771
- {
772
- [K in keyof Object3D]-?: Object3D[K] extends (...args: any[]) => any ? K : never
773
- }[keyof Object3D]
774
- >
775
-
776
- type ThreeExports = typeof import('three') & typeof import('three/webgpu')
777
- type ThreeElementsImpl = ThreeToJSXElements<ThreeExports>
778
-
779
- interface ThreeElements extends Omit<ThreeElementsImpl, 'audio' | 'source' | 'line' | 'path'> {
780
- /**
781
- * `primitive` wraps a pre-existing object, so its props cannot be derived from one class.
782
- * Events are typed from `EventHandlers` (`onClick={(e) => ...}` infers `e`), the ref is
783
- * untyped, and any other prop is accepted and applied to the object by name. Object3D's own
784
- * methods are left out of the typed surface: they return `this`, so a subclass element's
785
- * props (`ThreeElements['group']`) could not be spread onto a primitive otherwise.
786
- */
787
- primitive: Omit<ThreeElement<typeof Object3D>, 'args' | 'object' | 'ref' | Object3DMethod> & {
788
- object: object
789
- ref?: React.Ref<any>
790
- [prop: string]: unknown
791
- }
792
- // Conflicts with DOM types can be accessed through a three* prefix
793
- threeAudio: ThreeElementsImpl['audio']
794
- threeSource: ThreeElementsImpl['source']
795
- threeLine: ThreeElementsImpl['line']
796
- threePath: ThreeElementsImpl['path']
797
- }
798
-
799
- declare module 'react' {
800
- namespace JSX {
801
- interface IntrinsicElements extends ThreeElements {}
802
- }
803
- }
804
-
805
- declare module 'react/jsx-runtime' {
806
- namespace JSX {
807
- interface IntrinsicElements extends ThreeElements {}
808
- }
809
- }
810
-
811
- declare module 'react/jsx-dev-runtime' {
812
- namespace JSX {
813
- interface IntrinsicElements extends ThreeElements {}
814
- }
815
- }
816
-
817
- //* Base Renderer Types =====================================
818
-
819
- // Shim for OffscreenCanvas since it was removed from DOM types
820
- interface OffscreenCanvas extends EventTarget {}
821
-
822
- interface BaseRendererProps {
823
- canvas: HTMLCanvasElement | OffscreenCanvas
824
- powerPreference?: 'high-performance' | 'low-power' | 'default'
825
- antialias?: boolean
826
- alpha?: boolean
827
- }
828
-
829
- type RendererFactory<TRenderer, TParams> =
830
- | TRenderer
831
- | ((defaultProps: TParams) => TRenderer)
832
- | ((defaultProps: TParams) => Promise<TRenderer>)
833
-
834
- interface Renderer {
835
- render: (scene: THREE$1.Scene, camera: THREE$1.Camera) => any
836
- }
837
-
838
- //* Color Management Config ==============================
839
-
840
- /**
841
- * Color management configuration shared by both WebGL and WebGPU renderers.
842
- */
843
- interface ColorManagementConfig {
844
- /**
845
- * Color space assigned to 8-bit input textures (color maps).
846
- * Defaults to sRGB. Most textures are authored in sRGB.
847
- * @default THREE.SRGBColorSpace
848
- */
849
- textureColorSpace?: THREE$1.ColorSpace
850
- }
851
-
852
- //* WebGL Renderer Props ==============================
853
-
854
- type DefaultGLProps = Omit<THREE$1.WebGLRendererParameters, 'canvas'> & {
855
- canvas: HTMLCanvasElement | OffscreenCanvas
856
- }
857
-
858
- type GLProps =
859
- | Renderer
860
- | ((defaultProps: DefaultGLProps) => Renderer)
861
- | ((defaultProps: DefaultGLProps) => Promise<Renderer>)
862
- | (Partial<Properties<THREE$1.WebGLRenderer> | THREE$1.WebGLRendererParameters> & ColorManagementConfig)
863
-
864
- //* WebGPU Renderer Props ==============================
865
-
866
- type DefaultRendererProps = {
867
- canvas: HTMLCanvasElement | OffscreenCanvas
868
- [key: string]: any
869
- }
870
-
871
- /**
872
- * Canvas-level scheduler configuration.
873
- * Controls render timing relative to other canvases.
874
- */
875
- interface CanvasSchedulerConfig {
876
- /**
877
- * Run this Canvas root before the referenced Canvas root id(s).
878
- */
879
- before?: string | string[]
880
- /**
881
- * Run this Canvas root after the referenced Canvas root id(s).
882
- */
883
- after?: string | string[]
884
- /**
885
- * Numeric root order. Lower values run first.
886
- */
887
- order?: number
888
- /**
889
- * Limit this Canvas's default render job (frames per second).
890
- */
891
- fps?: number
892
- }
893
-
894
- /**
895
- * Extended renderer configuration for multi-canvas support and color management.
896
- */
897
- interface RendererConfigExtended extends ColorManagementConfig {
898
- /** Share renderer from another canvas (WebGPU only) */
899
- primaryCanvas?: string
900
- /** Canvas-level scheduler options */
901
- scheduler?: CanvasSchedulerConfig
902
- }
903
-
904
- type RendererProps =
905
- | any // WebGPURenderer
906
- | ((defaultProps: DefaultRendererProps) => any)
907
- | ((defaultProps: DefaultRendererProps) => Promise<any>)
908
- | (Partial<Properties<any> | Record<string, any>> & RendererConfigExtended)
909
-
910
- //* Camera Props ==============================
911
-
912
- type CameraProps = (
913
- | THREE$1.Camera
914
- | Partial<
915
- ThreeElement<typeof THREE$1.Camera> &
916
- ThreeElement<typeof THREE$1.PerspectiveCamera> &
917
- ThreeElement<typeof THREE$1.OrthographicCamera>
918
- >
919
- ) & {
920
- /** Flags the camera as manual, putting projection into your own hands */
921
- manual?: boolean
922
- }
923
-
924
- //* Render Props ==============================
925
-
926
- interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
927
- /**
928
- * Unique identifier for multi-canvas renderer sharing.
929
- * Makes this canvas targetable by other canvases using the `primaryCanvas` prop.
930
- * Also sets the HTML `id` attribute on the canvas element.
931
- * @example <Canvas id="main-viewer">...</Canvas>
932
- */
933
- id?: string
934
- /**
935
- * Share the renderer from another canvas instead of creating a new one.
936
- * Pass the `id` of the primary canvas to share its WebGPURenderer.
937
- * Only available with WebGPU (not legacy WebGL).
938
- *
939
- * Note: This is extracted from `renderer={{ primaryCanvas: "id" }}` by Canvas.
940
- * @internal
941
- */
942
- primaryCanvas?: string
943
- /**
944
- * Canvas-level scheduler options. Controls render timing relative to other canvases.
945
- *
946
- * Note: This is extracted from `renderer={{ scheduler: {...} }}` by Canvas.
947
- * @internal
948
- */
949
- scheduler?: CanvasSchedulerConfig
950
- /** A threejs renderer instance or props that go into the default renderer */
951
- gl?: GLProps
952
- /** A WebGPU renderer instance or props that go into the default renderer */
953
- renderer?: RendererProps
954
- /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
955
- size?: Size
956
- /**
957
- * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
958
- * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
959
- * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
960
- */
961
- shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE$1.WebGLShadowMap>
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$1.Raycaster, 'params'>> & { params?: Partial<THREE$1.RaycasterParameters> }
981
- /** A `THREE.Scene` instance or props that go into the default scene */
982
- scene?: THREE$1.Scene | Partial<THREE$1.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
- /** Force canvas dimensions to even numbers (fixes Safari rendering issues with odd/fractional sizes) */
1006
- forceEven?: boolean
1007
- }
1008
-
1009
- //* Reconciler Root ==============================
1010
-
1011
- interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
1012
- configure: (config?: RenderProps<TCanvas>) => Promise<ReconcilerRoot<TCanvas>>
1013
- render: (element: ReactNode) => RootStore
1014
- unmount: () => void
1015
- }
1016
-
1017
- //* Inject State ==============================
1018
-
1019
- type InjectState = Partial<
1020
- Omit<RootState, 'events'> & {
1021
- events?: {
1022
- enabled?: boolean
1023
- priority?: number
1024
- compute?: ComputeFunction
1025
- connected?: any
1026
- }
1027
- /**
1028
- * When true (default), injects a THREE.Scene between container and children if container isn't already a Scene.
1029
- * This ensures state.scene is always a real THREE.Scene with proper properties (background, environment, fog).
1030
- * Set to false to use the container directly as scene (anti-pattern, but supported for edge cases).
1031
- */
1032
- injectScene?: boolean
1033
- }
1034
- >
1035
-
1036
- //* Reconciler Types ==============================
1037
-
1038
- // FiberRoot is an opaque internal React type - we define it locally
1039
- // to avoid bundling @types/react-reconciler which causes absolute path issues
1040
- type FiberRoot = any
1041
-
1042
- interface Root {
1043
- fiber: FiberRoot
1044
- store: RootStore
1045
- }
1046
-
1047
- type AttachFnType<O = any> = (parent: any, self: O) => () => void
1048
- type AttachType<O = any> = string | AttachFnType<O>
1049
-
1050
- type ConstructorRepresentation<T = any> = new (...args: any[]) => T
1051
-
1052
- interface Catalogue {
1053
- [name: string]: ConstructorRepresentation
1054
- }
1055
-
1056
- // TODO: handle constructor overloads
1057
- // https://github.com/pmndrs/react-three-fiber/pull/2931
1058
- // https://github.com/microsoft/TypeScript/issues/37079
1059
- type Args<T> = T extends ConstructorRepresentation
1060
- ? T extends typeof Color$2
1061
- ? [r: number, g: number, b: number] | [color: ColorRepresentation$1]
1062
- : ConstructorParameters<T>
1063
- : any[]
1064
-
1065
- type ArgsProp<P> = P extends ConstructorRepresentation
1066
- ? IsAllOptional<ConstructorParameters<P>> extends true
1067
- ? { args?: Args<P> }
1068
- : { args: Args<P> }
1069
- : { args: unknown[] }
1070
-
1071
- type InstanceProps<T = any, P = any> = ArgsProp<P> & {
1072
- object?: T
1073
- dispose?: null
1074
- attach?: AttachType<T>
1075
- }
1076
-
1077
- interface Instance<O = any> {
1078
- root: RootStore
1079
- type: string
1080
- parent: Instance | null
1081
- children: Instance[]
1082
- props: InstanceProps<O> & Record<string, unknown>
1083
- object: O & { __r3f?: Instance<O> }
1084
- eventCount: number
1085
- handlers: Partial<EventHandlers>
1086
- attach?: AttachType<O>
1087
- previousAttach?: any
1088
- isHidden: boolean
1089
- /** Set of props that have been applied via once() */
1090
- appliedOnce?: Set<string>
1091
- }
1092
-
1093
- interface HostConfig {
1094
- type: string
1095
- props: Instance['props']
1096
- container: RootStore
1097
- instance: Instance
1098
- textInstance: void
1099
- suspenseInstance: Instance
1100
- hydratableInstance: never
1101
- formInstance: never
1102
- publicInstance: Instance['object']
1103
- hostContext: {}
1104
- childSet: never
1105
- timeoutHandle: number | undefined
1106
- noTimeout: -1
1107
- TransitionStatus: null
1108
- }
1109
- declare global {
1110
- var IS_REACT_ACT_ENVIRONMENT: boolean | undefined
1111
- }
1112
-
1113
- //* Loop Types ==============================
1114
-
1115
- type GlobalRenderCallback = (timestamp: number) => void
1116
-
1117
- type GlobalEffectType = 'before' | 'after' | 'tail'
1118
-
1119
- declare const presetsObj: {
1120
- apartment: string;
1121
- city: string;
1122
- dawn: string;
1123
- forest: string;
1124
- lobby: string;
1125
- night: string;
1126
- park: string;
1127
- studio: string;
1128
- sunset: string;
1129
- warehouse: string;
1130
- };
1131
- type PresetsType = keyof typeof presetsObj;
1132
-
1133
- //* Background Types ==============================
1134
-
1135
- /**
1136
- * Expanded object form for background configuration.
1137
- * Allows separate textures for background (visual backdrop) and environment (PBR lighting).
1138
- */
1139
- interface BackgroundConfig {
1140
- /** HDRI preset name: 'apartment', 'city', 'dawn', 'forest', 'lobby', 'night', 'park', 'studio', 'sunset', 'warehouse' */
1141
- preset?: PresetsType
1142
- /** Files for cube texture (6 faces) or single HDR/EXR */
1143
- files?: string | string[]
1144
- /** Separate files for scene.background (visual backdrop) */
1145
- backgroundMap?: string | string[]
1146
- backgroundRotation?: Euler$2 | [number, number, number]
1147
- backgroundBlurriness?: number
1148
- backgroundIntensity?: number
1149
- /** Separate files for scene.environment (PBR lighting/reflections) */
1150
- envMap?: string | string[]
1151
- environmentRotation?: Euler$2 | [number, number, number]
1152
- environmentIntensity?: number
1153
- path?: string
1154
- extensions?: (loader: Loader) => void
1155
- }
1156
-
1157
- /**
1158
- * Background prop type for Canvas.
1159
- *
1160
- * String detection priority:
1161
- * 1. Preset - exact match against known presets (apartment, city, dawn, forest, lobby, night, park, studio, sunset, warehouse)
1162
- * 2. URL - starts with /, ./, ../, http://, https://, OR has image extension
1163
- * 3. Color - default fallback (CSS color names, hex values, rgb(), etc.)
1164
- *
1165
- * @example Color
1166
- * ```tsx
1167
- * <Canvas background="red" />
1168
- * <Canvas background="#ff0000" />
1169
- * <Canvas background={0xff0000} />
1170
- * ```
1171
- *
1172
- * @example Preset
1173
- * ```tsx
1174
- * <Canvas background="city" />
1175
- * ```
1176
- *
1177
- * @example URL
1178
- * ```tsx
1179
- * <Canvas background="/path/to/env.hdr" />
1180
- * <Canvas background="./sky.jpg" />
1181
- * ```
1182
- *
1183
- * @example Object form
1184
- * ```tsx
1185
- * <Canvas background={{
1186
- * files: ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'],
1187
- * backgroundMap: 'path/to/sky.jpg',
1188
- * envMap: 'path/to/lighting.hdr',
1189
- * backgroundBlurriness: 0.5,
1190
- * }} />
1191
- * ```
1192
- */
1193
- type BackgroundProp =
1194
- | ColorRepresentation$1 // "red", "#ff0000", 0xff0000
1195
- | string // URL or preset
1196
- | BackgroundConfig // Expanded object form
1197
-
1198
- //* Canvas Types ==============================
1199
-
1200
- interface CanvasProps
1201
- extends
1202
- Omit<RenderProps<HTMLCanvasElement>, 'size' | 'primaryCanvas' | 'scheduler'>,
1203
- React$1.HTMLAttributes<HTMLDivElement> {
1204
- children?: React$1.ReactNode
1205
- ref?: React$1.Ref<HTMLCanvasElement>
1206
- /** Canvas fallback content, similar to img's alt prop */
1207
- fallback?: React$1.ReactNode
1208
- /**
1209
- * Options to pass to useMeasure.
1210
- * @see https://github.com/pmndrs/react-use-measure#api
1211
- */
1212
- resize?: Options
1213
- /** The target where events are being subscribed to, default: the div that wraps canvas */
1214
- eventSource?: Element | React$1.RefObject<Element | null>
1215
- /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
1216
- eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen'
1217
- /** Enable/disable automatic HMR refresh for TSL nodes and uniforms, default: true in dev */
1218
- hmr?: boolean
1219
- /** Canvas resolution width in pixels. If omitted, uses container width. */
1220
- width?: number
1221
- /** Canvas resolution height in pixels. If omitted, uses container height. */
1222
- height?: number
1223
- /** Force canvas dimensions to even numbers (fixes Safari rendering issues with odd/fractional sizes) */
1224
- forceEven?: boolean
1225
- /**
1226
- * Scene background configuration.
1227
- * Accepts colors, URLs, presets, or an expanded object for separate background/environment.
1228
- * @see BackgroundProp for full documentation and examples
1229
- */
1230
- background?: BackgroundProp
1231
- }
1232
-
1233
- //* Loader Types ==============================
1234
-
1235
- type InputLike = string | string[] | string[][] | Readonly<string | string[] | string[][]>
1236
-
1237
- // Define a loader-like interface that matches THREE.Loader's load signature
1238
- // This works for both generic and non-generic THREE.Loader instances
1239
- interface LoaderLike {
1240
- load(
1241
- url: InputLike,
1242
- onLoad?: (result: any) => void,
1243
- onProgress?: (event: ProgressEvent<EventTarget>) => void,
1244
- onError?: (error: unknown) => void,
1245
- ): any
1246
- }
1247
-
1248
- type GLTFLike = { scene: THREE$1.Object3D }
1249
-
1250
- type LoaderInstance<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> =
1251
- T extends ConstructorRepresentation<LoaderLike> ? InstanceType<T> : T
1252
-
1253
- // Infer result type from the load method's callback parameter
1254
- type InferLoadResult<T> = T extends {
1255
- load(url: any, onLoad?: (result: infer R) => void, ...args: any[]): any
1256
- }
1257
- ? R
1258
- : T extends ConstructorRepresentation<any>
1259
- ? InstanceType<T> extends {
1260
- load(url: any, onLoad?: (result: infer R) => void, ...args: any[]): any
1261
- }
1262
- ? R
1263
- : any
1264
- : any
1265
-
1266
- type LoaderResult<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> =
1267
- InferLoadResult<LoaderInstance<T>> extends infer R ? (R extends GLTFLike ? R & ObjectMap : R) : never
1268
-
1269
- type Extensions<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = (
1270
- loader: LoaderInstance<T>,
1271
- ) => void
1272
-
1273
- //* Renderer Props ========================================
1274
-
1275
- type WebGLDefaultProps = Omit<THREE$1.WebGLRendererParameters, 'canvas'> & BaseRendererProps
1276
-
1277
- type WebGLProps =
1278
- | RendererFactory<THREE$1.WebGLRenderer, WebGLDefaultProps>
1279
- | Partial<Properties<THREE$1.WebGLRenderer> | THREE$1.WebGLRendererParameters>
1280
-
1281
- interface WebGLShadowConfig {
1282
- shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE$1.WebGLShadowMap>
1283
- }
1284
-
1285
- //* Legacy-specific Types ========================================
1286
-
1287
- /** Legacy (WebGL) renderer type - re-exported as R3FRenderer from @react-three/fiber/legacy */
1288
- type LegacyRenderer = THREE$1.WebGLRenderer
1289
-
1290
- /** Legacy internal state with narrowed renderer type */
1291
- interface LegacyInternalState extends Omit<InternalState, 'actualRenderer'> {
1292
- actualRenderer: THREE$1.WebGLRenderer
1293
- }
1294
-
1295
- /**
1296
- * Legacy-specific RootState with narrowed renderer type.
1297
- * Automatically used when importing from `@react-three/fiber/legacy`.
1298
- *
1299
- * @example
1300
- * ```tsx
1301
- * import { useThree } from '@react-three/fiber/legacy'
1302
- *
1303
- * function MyComponent() {
1304
- * const { renderer } = useThree()
1305
- * // renderer is typed as THREE.WebGLRenderer
1306
- * renderer.shadowMap.enabled = true
1307
- * }
1308
- * ```
1309
- */
1310
- interface LegacyRootState extends Omit<RootState, 'renderer' | 'internal'> {
1311
- /** The WebGL renderer instance */
1312
- renderer: THREE$1.WebGLRenderer
1313
- /** Internals with WebGL renderer */
1314
- internal: LegacyInternalState
1315
- }
1316
-
1317
- //* RenderTarget Types ==============================
1318
-
1319
-
1320
- type RenderTargetOptions = RenderTargetOptions$1
1321
-
1322
- //* Global TSL Types ==============================
1323
-
1324
- declare global {
1325
- /**
1326
- * Broad callable-node fallback for dynamic store readers.
1327
- * Creator hooks preserve the exact function signatures inferred from Three's `Fn`.
1328
- */
1329
- type CallableTSLNode = ((...params: never[]) => unknown) & {
1330
- readonly shaderNode: unknown
1331
- readonly id: number
1332
- }
1333
-
1334
- /** Legacy structural node accepted when at least one historical marker exists. */
1335
- type LegacyTSLNodeLike = {
1336
- label?: ((label: string) => unknown) | string
1337
- setName?: (name: string) => unknown
1338
- } & ({ uuid: string | undefined; nodeType?: string | null } | { uuid?: string; nodeType: string | null | undefined })
1339
-
1340
- /** Node type accepted by broad dynamic node-store readers. */
1341
- type TSLNodeType = three_webgpu.Node | CallableTSLNode
1342
-
1343
- /**
1344
- * Derive Three's shader node type from an existing node or a supported raw input.
1345
- * Existing InputNode generics take precedence over structural value normalization.
1346
- * Both generics must be inferred because Three's UniformNode intersects an unknown-typed
1347
- * InputNode base with its concrete InputNode specialization.
1348
- */
1349
- type UniformNodeType<T> = T extends three_webgpu.UniformNode<infer TNodeType, infer _TValue>
1350
- ? TNodeType
1351
- : T extends three_webgpu.InputNode<infer TNodeType, infer _TValue>
1352
- ? TNodeType
1353
- : T extends number
1354
- ? 'float'
1355
- : T extends boolean
1356
- ? 'bool'
1357
- : T extends string | three_webgpu.Color | { r: number; g: number; b: number }
1358
- ? 'color'
1359
- : T extends three_webgpu.Vector4 | { x: number; y: number; z: number; w: number }
1360
- ? 'vec4'
1361
- : T extends three_webgpu.Vector3 | { x: number; y: number; z: number }
1362
- ? 'vec3'
1363
- : T extends three_webgpu.Vector2 | { x: number; y: number }
1364
- ? 'vec2'
1365
- : T extends three_webgpu.Matrix4
1366
- ? 'mat4'
1367
- : T extends three_webgpu.Matrix3
1368
- ? 'mat3'
1369
- : T extends three_webgpu.Matrix2
1370
- ? 'mat2'
1371
- : unknown
1372
-
1373
- /** Derive the normalized JavaScript value stored by a uniform node. */
1374
- type UniformNodeValue<T> = T extends three_webgpu.UniformNode<infer _TNodeType, infer TValue>
1375
- ? TValue
1376
- : T extends three_webgpu.InputNode<infer _TNodeType, infer TValue>
1377
- ? TValue
1378
- : T extends string | { r: number; g: number; b: number }
1379
- ? three_webgpu.Color
1380
- : T extends { x: number; y: number; z: number; w: number }
1381
- ? three_webgpu.Vector4
1382
- : T extends { x: number; y: number; z: number }
1383
- ? three_webgpu.Vector3
1384
- : T extends { x: number; y: number }
1385
- ? three_webgpu.Vector2
1386
- : T extends number
1387
- ? number
1388
- : T extends boolean
1389
- ? boolean
1390
- : T
1391
-
1392
- /** Three's exact UniformNode with shader and value generics derived from an input. */
1393
- type UniformNodeFor<T> = three_webgpu.UniformNode<UniformNodeType<T>, UniformNodeValue<T>>
1394
-
1395
- /** Preserve every input key while mapping values to exact Three uniform nodes. */
1396
- type UniformNodesFor<T extends UniformInputRecord> = {
1397
- [K in keyof T]: UniformNodeFor<T[K]>
1398
- }
1399
-
1400
- /** Backward-compatible single-parameter uniform alias. */
1401
- type UniformNode<T = unknown> = UniformNodeFor<T>
1402
-
1403
- /** Flat record of uniform nodes (no nested scopes) */
1404
- type UniformRecord<T extends UniformNode = UniformNode> = Record<string, T>
1405
-
1406
- /**
1407
- * Uniform store that can contain both root-level uniforms and scoped uniform objects
1408
- * Used by state.uniforms which has structure like:
1409
- * { uTime: UniformNode, player: { uHealth: UniformNode }, enemy: { uHealth: UniformNode } }
1410
- */
1411
- type UniformStore = Record<string, UniformNode | UniformRecord>
1412
-
1413
- /**
1414
- * Helper to safely access a uniform node from the store.
1415
- * Use this when accessing state.uniforms to get proper typing.
1416
- * @example
1417
- * const uTime = uniforms.uTime as UniformNode<number>
1418
- * const uColor = uniforms.uColor as UniformNode<import('three/webgpu').Color>
1419
- */
1420
- type GetUniform<T = unknown> = UniformNode<T>
1421
-
1422
- /**
1423
- * Acceptable input values for useUniforms - raw values that get converted to UniformNodes
1424
- * Supports:
1425
- * - Primitives: number, string (color), boolean
1426
- * - Three.js types: Color, Vector2/3/4, Matrix2/3/4
1427
- * - Plain objects: { x, y, z, w } converted to vectors
1428
- * - TSL nodes: color(), vec3(), float() for type casting
1429
- * - UniformNode: existing uniforms (reused as-is)
1430
- */
1431
- type UniformValue =
1432
- | number
1433
- | string
1434
- | boolean
1435
- | three_webgpu.Color
1436
- | three_webgpu.Vector2
1437
- | three_webgpu.Vector3
1438
- | three_webgpu.Vector4
1439
- | three_webgpu.Matrix2
1440
- | three_webgpu.Matrix3
1441
- | three_webgpu.Matrix4
1442
- | { x: number; y: number }
1443
- | { x: number; y: number; z: number }
1444
- | { x: number; y: number; z: number; w: number }
1445
- | { r: number; g: number; b: number; a?: number } // Plain objects converted to Color
1446
- | three_webgpu.Node // TSL nodes like color(), vec3(), float() for type casting
1447
- | UniformNode
1448
-
1449
- /** Input record for useUniforms - accepts raw values or UniformNodes */
1450
- type UniformInputRecord = Record<string, UniformValue>
1451
- }
1452
-
1453
- declare global {
1454
- /**
1455
- * three's own render pipeline type. Named here so the rest of R3F refers to three's shape
1456
- * rather than `any`. three r183 renamed `PostProcessing` to `RenderPipeline`; our peer floor
1457
- * is r185, so the new name is the only one.
1458
- */
1459
- type ThreeRenderPipeline = three_webgpu.RenderPipeline
1460
-
1461
- /**
1462
- * The pass `useRenderPipeline` creates for you: three's own `PassNode`, as returned by
1463
- * `pass(scene, camera)` from `three/tsl`. Referenced from three so members like
1464
- * `getTextureNode`, `setMRT` and `dispose` track the installed version.
1465
- */
1466
- type ScenePassNode = three_webgpu.PassNode
1467
-
1468
- /**
1469
- * Pass record - stores TSL pass nodes for render pipeline.
1470
- *
1471
- * `scenePass` is the only key the library owns. It is optional here because this is also the
1472
- * shape of `state.passes`, which is `{}` before the pipeline exists and again after `reset()`
1473
- * or `clearPasses()`. Inside the callbacks it is always present; see
1474
- * {@link RenderPipelineCallbackState}.
1475
- *
1476
- * Every other key is user-registered, via a callback's return value. Those are TSL nodes of
1477
- * any kind, not only passes: texture reads of an MRT attachment, effect nodes, extra
1478
- * `pass()` instances. `Node` is the common base, so that is the bound. Narrow at the call
1479
- * site when you need a member, e.g. `passes.velocity as TextureNode`.
1480
- *
1481
- * The index signature admits `undefined` because a key may simply not be registered, and
1482
- * because the optional `scenePass` must be assignable to it: under `skipLibCheck: false` an
1483
- * optional property whose type excludes `undefined` from the index signature is an error
1484
- * (TS2411) for every consumer compiling these declarations.
1485
- */
1486
- interface PassRecord {
1487
- scenePass?: ScenePassNode
1488
- [key: string]: three_webgpu.Node | undefined
1489
- }
1490
-
1491
- /**
1492
- * State passed to pipeline callbacks after the active pipeline has been created.
1493
- *
1494
- * `passes.scenePass` is required here: the hook installs the default scene pass before either
1495
- * callback runs, so callbacks can use it without a guard or a cast.
1496
- *
1497
- * `renderer` is narrowed to `WebGPURenderer` and `isLegacy` to `false`: the hook throws under
1498
- * the legacy renderer before either callback can run, so a callback never sees WebGL.
1499
- */
1500
- type RenderPipelineCallbackState = RootState & {
1501
- renderPipeline: ThreeRenderPipeline
1502
- passes: PassRecord & { scenePass: ScenePassNode }
1503
- renderer: three_webgpu.WebGPURenderer
1504
- isLegacy: false
1505
- }
1506
-
1507
- /**
1508
- * What a callback may return to register entries into `state.passes`.
1509
- *
1510
- * `scenePass` is reserved. The hook owns that entry and its lifecycle: it caches the pass it
1511
- * created, and `rebuild()` / `reset()` dispose that cached pass. A callback overwriting the
1512
- * store entry would leave the store pointing at a node the hook never disposes, and the hook
1513
- * disposing a pass nothing references. So returning it is a type error.
1514
- */
1515
- type RegisteredPasses = Record<string, three_webgpu.Node> & { scenePass?: never }
1516
-
1517
- /** Setup callback - runs first to configure MRT, create additional passes */
1518
- type RenderPipelineSetupCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1519
-
1520
- /** Main callback - runs second to configure outputNode, create effect passes */
1521
- type RenderPipelineMainCallback = (state: RenderPipelineCallbackState) => RegisteredPasses | void
1522
-
1523
- /** The imperative half of useRenderPipeline's return value, present in every state */
1524
- interface UseRenderPipelineActions {
1525
- /** Current passes from state */
1526
- passes: PassRecord
1527
- /** Clear all passes from state */
1528
- clearPasses: () => void
1529
- /** Reset RenderPipeline entirely (clears PP + passes) */
1530
- reset: () => void
1531
- /** Re-run setup/main callbacks with current closure values */
1532
- rebuild: () => void
1533
- }
1534
-
1535
- /**
1536
- * Return type for useRenderPipeline hook, discriminated on `isReady`.
1537
- *
1538
- * `if (isReady)` narrows `renderPipeline` to non-null, which is what the docs already tell
1539
- * callers to check. `passes.scenePass` deliberately stays optional in the ready branch:
1540
- * `clearPasses()` empties the record while leaving the pipeline in place.
1541
- */
1542
- type UseRenderPipelineReturn = UseRenderPipelineActions &
1543
- (
1544
- | {
1545
- /** True when RenderPipeline is configured and ready */
1546
- isReady: true
1547
- /** RenderPipeline instance */
1548
- renderPipeline: ThreeRenderPipeline
1549
- }
1550
- | {
1551
- /** False until the pipeline has been created */
1552
- isReady: false
1553
- /** Not initialized yet, or torn down by reset() */
1554
- renderPipeline: null
1555
- }
1556
- )
1557
- }
1558
-
1559
- declare const context: React$1.Context<RootStore>;
541
+ declare const context: React.Context<RootStore>;
1560
542
 
1561
543
  /**
1562
544
  * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
@@ -1644,4 +626,4 @@ declare function registerRootExtension(extension: RootExtension): () => void;
1644
626
  declare function setRenderOverride(store: RootStore, render: (() => void) | null): void;
1645
627
 
1646
628
  export { context, registerRootExtension, setRenderOverride, useFrame, useStore, useThree };
1647
- export type { Act, Args, ArgsProp, AttachFnType, AttachType, BackgroundConfig, BackgroundProp, BaseRendererProps, Bridge, BufferLike, BufferRecord, BufferStore, Camera, CameraProps, CanvasProps, CanvasSchedulerConfig, Catalogue, Color, ColorManagementConfig, ComputeFunction, ConstructorRepresentation, DefaultGLProps, DefaultRendererProps, Disposable, DomEvent, Dpr, ElementProps, EquConfig, Euler, EventHandlers, EventManager, EventProps, Events, Extensions, FiberRoot, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, GLProps, GLTFLike, GeometryProps, GeometryTransformProps, GlobalEffectType, GlobalRenderCallback, HostConfig, InferLoadResult, InjectState, InputLike, Instance, InstanceProps, InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Layers, LegacyInternalState, LegacyRenderer, LegacyRootState, LoaderInstance, LoaderLike, LoaderResult, MathProps, MathRepresentation, MathType, MathTypes, Matrix3, Matrix4, Mutable, MutableOrReadonlyParameters, NodeLike, NodeProps, NodeRecord, NodeStore, NonFunctionKeys, Object3DMethod, ObjectMap, OffscreenCanvas, Overwrite, Performance, PointerCaptureTarget, PointerState, Properties, Quaternion, R3FRenderer, RaycastableRepresentation, ReactProps, ReconcilerRoot, RenderCallback, RenderProps, RenderTargetOptions, Renderer, RendererConfigExtended, RendererFactory, RendererProps, Root, RootExtension, RootState, RootStore, SetBlock, Size, StorageLike, StorageRecord, StorageStore, Subscription, TSLNodeInput, ThreeCamera, ThreeElement, ThreeElements, ThreeElementsImpl, ThreeEvent, ThreeExports, ThreeToJSXElements, UnblockProps, Vector2, Vector3, Vector4, VectorRepresentation, Viewport, VisibilityEntry, WebGLDefaultProps, WebGLProps, WebGLShadowConfig, XRManager, XRPointerConfig };
629
+ export type { Act, Bridge, Camera, ComputeFunction, Disposable, DomEvent, Dpr, EquConfig, EventHandlers, EventManager, Events, FilterFunction, FrameCallback, FrameNextCallback, FrameNextState, FrameState, Frameloop, InternalState, Intersection, IntersectionEvent, IsAllOptional, IsOptional, Mutable, NonFunctionKeys, ObjectMap, Overwrite, Performance, PointerCaptureTarget, PointerState, Properties, R3FRenderer, RenderCallback, RootExtension, RootState, RootStore, SetBlock, Size, Subscription, ThreeCamera, ThreeEvent, UnblockProps, Viewport, VisibilityEntry, XRManager, XRPointerConfig };