@react-three/fiber 10.0.0-canary.cdaab7c → 10.0.0-canary.d0fe0de
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/webgl.cjs +27 -0
- package/dist/chunks/webgl.mjs +11 -0
- package/dist/chunks/webgpu.cjs +37 -0
- package/dist/chunks/webgpu.mjs +21 -0
- package/dist/extension.cjs +13 -0
- package/dist/extension.d.cts +19 -0
- package/dist/extension.d.mts +19 -0
- package/dist/extension.d.ts +19 -0
- package/dist/extension.mjs +1 -0
- package/dist/index.cjs +97 -15365
- package/dist/index.d.cts +122 -3763
- package/dist/index.d.mts +122 -3763
- package/dist/index.d.ts +122 -3763
- package/dist/index.mjs +10 -15266
- package/dist/legacy.cjs +97 -15319
- package/dist/legacy.d.cts +115 -3763
- package/dist/legacy.d.mts +115 -3763
- package/dist/legacy.d.ts +115 -3763
- package/dist/legacy.mjs +14 -15223
- package/dist/shared/fiber.3jeDXXYd.d.mts +2493 -0
- package/dist/shared/fiber.B_KQAb3I.d.ts +2493 -0
- package/dist/shared/fiber.Bi_S5KAx.cjs +16630 -0
- package/dist/shared/fiber.C6hitYDY.d.cts +48 -0
- package/dist/shared/fiber.CFK811nR.mjs +16532 -0
- package/dist/shared/fiber.C_MFx7We.d.cts +1237 -0
- package/dist/shared/fiber.C_MFx7We.d.mts +1237 -0
- package/dist/shared/fiber.C_MFx7We.d.ts +1237 -0
- package/dist/shared/fiber.D4fD6H74.d.mts +48 -0
- package/dist/shared/fiber.QxL_6jra.mjs +390 -0
- package/dist/shared/fiber.YgTUGbja.d.ts +48 -0
- package/dist/shared/fiber.eR9ie2vQ.cjs +425 -0
- package/dist/shared/fiber.fR3DaJb1.d.cts +2493 -0
- package/dist/webgpu/index.cjs +100 -16205
- package/dist/webgpu/index.d.cts +120 -4092
- package/dist/webgpu/index.d.mts +120 -4092
- package/dist/webgpu/index.d.ts +120 -4092
- package/dist/webgpu/index.mjs +15 -16089
- package/package.json +12 -9
- package/readme.md +1 -1
|
@@ -0,0 +1,1237 @@
|
|
|
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 root entry can construct either renderer, so by default `state.renderer` is the union of
|
|
344
|
+
// both and a WebGPU-only member (`renderer.compute`, `renderer.backend`) needs a narrow. An app that
|
|
345
|
+
// has decided on one renderer says so once, and every renderer-typed field follows -- `useThree`,
|
|
346
|
+
// `useFrame`, `onCreated`, `useRenderTarget`, `state.internal.support`:
|
|
347
|
+
//
|
|
348
|
+
// declare module '@react-three/fiber' {
|
|
349
|
+
// interface Register {
|
|
350
|
+
// renderer: 'webgpu'
|
|
351
|
+
// }
|
|
352
|
+
// }
|
|
353
|
+
//
|
|
354
|
+
// Same pattern as `Register` in @react-three/tsl (and TanStack Router). Nothing registered means
|
|
355
|
+
// the union, unchanged. The `/legacy` and `/webgpu` entries are the same thing decided by import
|
|
356
|
+
// path; this is for apps on `@react-three/fiber` that want the narrowed types without changing it.
|
|
357
|
+
|
|
358
|
+
/**
|
|
359
|
+
* Augment this to type `RootState` for the renderer your app uses. Recognised keys:
|
|
360
|
+
* - `renderer`: `'webgpu'` or `'webgl'`
|
|
361
|
+
*/
|
|
362
|
+
interface Register {}
|
|
363
|
+
|
|
364
|
+
/** The registered renderer, or `'any'` when nothing is registered. */
|
|
365
|
+
type RegisteredRenderer = Register extends { renderer: infer R extends 'webgl' | 'webgpu' } ? R : 'any'
|
|
366
|
+
|
|
367
|
+
/** Pick the type for the registered renderer: WebGPU, WebGL, or both when nothing is registered. */
|
|
368
|
+
type ForRegisteredRenderer<WebGPU, WebGL, Either = WebGPU | WebGL> = RegisteredRenderer extends 'webgpu'
|
|
369
|
+
? WebGPU
|
|
370
|
+
: RegisteredRenderer extends 'webgl'
|
|
371
|
+
? WebGL
|
|
372
|
+
: Either
|
|
373
|
+
|
|
374
|
+
/** The renderer type of `state.renderer`: a union of both unless one is registered. */
|
|
375
|
+
type R3FRenderer = ForRegisteredRenderer<WebGPURenderer, WebGLRenderer>
|
|
376
|
+
|
|
377
|
+
/** What `useRenderTarget` returns: a union of both target classes unless a renderer is registered. */
|
|
378
|
+
type R3FRenderTarget = ForRegisteredRenderer<RenderTarget, WebGLRenderTarget>
|
|
379
|
+
|
|
380
|
+
/** The renderer support on `state.internal.support`, narrowed to the registered renderer. */
|
|
381
|
+
type R3FRendererSupport = ForRegisteredRenderer<WebGPUSupport, WebGLSupport, RendererSupport>
|
|
382
|
+
|
|
383
|
+
//* Core Store Types ========================================
|
|
384
|
+
|
|
385
|
+
type Subscription = {
|
|
386
|
+
ref: React$1.RefObject<RenderCallback>
|
|
387
|
+
priority: number
|
|
388
|
+
store: RootStore
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/** Per-pointer state for multi-touch and XR support */
|
|
392
|
+
type PointerState = {
|
|
393
|
+
/** Objects currently hovered by this pointer */
|
|
394
|
+
hovered: Map<string, ThreeEvent<DomEvent>>
|
|
395
|
+
/** Objects capturing this pointer */
|
|
396
|
+
captured: Map<THREE.Object3D, PointerCaptureTarget>
|
|
397
|
+
/** Initial click position [x, y] */
|
|
398
|
+
initialClick: [x: number, y: number]
|
|
399
|
+
/** Objects hit on initial click */
|
|
400
|
+
initialHits: THREE.Object3D[]
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
type Dpr = number | [min: number, max: number]
|
|
404
|
+
|
|
405
|
+
interface Size {
|
|
406
|
+
width: number
|
|
407
|
+
height: number
|
|
408
|
+
top: number
|
|
409
|
+
left: number
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
type Frameloop = 'always' | 'demand' | 'never'
|
|
413
|
+
|
|
414
|
+
interface Viewport extends Size {
|
|
415
|
+
/** The initial pixel ratio */
|
|
416
|
+
initialDpr: number
|
|
417
|
+
/** Current pixel ratio */
|
|
418
|
+
dpr: number
|
|
419
|
+
/** size.width / viewport.width */
|
|
420
|
+
factor: number
|
|
421
|
+
/** Camera distance */
|
|
422
|
+
distance: number
|
|
423
|
+
/** Camera aspect ratio: width / height */
|
|
424
|
+
aspect: number
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void
|
|
428
|
+
|
|
429
|
+
interface Performance {
|
|
430
|
+
/** Current performance normal, between min and max */
|
|
431
|
+
current: number
|
|
432
|
+
/** How low the performance can go, between 0 and max */
|
|
433
|
+
min: number
|
|
434
|
+
/** How high the performance can go, between min and max */
|
|
435
|
+
max: number
|
|
436
|
+
/** Time until current returns to max in ms */
|
|
437
|
+
debounce: number
|
|
438
|
+
/** Sets current to min, puts the system in regression */
|
|
439
|
+
regress: () => void
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
interface InternalState {
|
|
443
|
+
interaction: THREE.Object3D[]
|
|
444
|
+
subscribers: Subscription[]
|
|
445
|
+
/** Per-pointer state (hover, capture, click tracking) - replaces hovered, capturedMap, initialClick, initialHits */
|
|
446
|
+
pointerMap: Map<number, PointerState>
|
|
447
|
+
/** Pointers needing raycast this frame (used with frameTimedRaycasts) */
|
|
448
|
+
pointerDirty: Map<number, DomEvent>
|
|
449
|
+
/** Last event received (for events.update() compatibility) */
|
|
450
|
+
lastEvent: React$1.RefObject<DomEvent | null>
|
|
451
|
+
/** @deprecated Use pointerMap.get(pointerId).hovered instead */
|
|
452
|
+
hovered: Map<string, ThreeEvent<DomEvent>>
|
|
453
|
+
/** @deprecated Use pointerMap.get(pointerId).captured instead */
|
|
454
|
+
capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>
|
|
455
|
+
/** @deprecated Use pointerMap.get(pointerId).initialClick instead */
|
|
456
|
+
initialClick: [x: number, y: number]
|
|
457
|
+
/** @deprecated Use pointerMap.get(pointerId).initialHits instead */
|
|
458
|
+
initialHits: THREE.Object3D[]
|
|
459
|
+
/** Visibility event registry (onFramed, onOccluded, onVisible) */
|
|
460
|
+
visibilityRegistry: Map<string, VisibilityEntry>
|
|
461
|
+
/** Whether occlusion queries are enabled (WebGPU only) */
|
|
462
|
+
occlusionEnabled: boolean
|
|
463
|
+
/** Reference to the invisible occlusion observer mesh */
|
|
464
|
+
occlusionObserver: THREE.Mesh | null
|
|
465
|
+
/** Cached occlusion results from render pass - keyed by Object3D */
|
|
466
|
+
occlusionCache: Map<THREE.Object3D, boolean | null>
|
|
467
|
+
/** Internal helper group for R3F system objects (occlusion observer, etc.) */
|
|
468
|
+
helperGroup: THREE.Group | null
|
|
469
|
+
active: boolean
|
|
470
|
+
priority: number
|
|
471
|
+
frames: number
|
|
472
|
+
subscribe: (callback: React$1.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
|
|
473
|
+
/** Internal renderer storage - use state.renderer or state.gl to access */
|
|
474
|
+
actualRenderer: R3FRenderer
|
|
475
|
+
/**
|
|
476
|
+
* The renderer support `configure()` loaded for this root: the three namespace of that flavour
|
|
477
|
+
* (JSX constructors, core's classes) and the renderer-specific classes core needs by name.
|
|
478
|
+
* Selected once, from the entry's provider, and copied into portals with the rest of `internal`.
|
|
479
|
+
*/
|
|
480
|
+
support: R3FRendererSupport
|
|
481
|
+
/**
|
|
482
|
+
* Releases this root's lease on its renderer. The last release disposes a renderer R3F created;
|
|
483
|
+
* a renderer passed in as an instance is never disposed by R3F.
|
|
484
|
+
*/
|
|
485
|
+
releaseRenderer?: () => void | Promise<void>
|
|
486
|
+
/** Global scheduler reference (for useFrame hook) */
|
|
487
|
+
scheduler: SchedulerApi | null
|
|
488
|
+
/**
|
|
489
|
+
* Replaces `renderer.render(scene, camera)` in the default render job when set. Set it with
|
|
490
|
+
* `setRenderOverride(store, fn)`; the job keeps its fps throttle, error handling and user
|
|
491
|
+
* render-phase takeover. Used by `useRenderPipeline`.
|
|
492
|
+
*/
|
|
493
|
+
renderOverride?: (() => void) | null
|
|
494
|
+
/** This root's unique ID in the global scheduler */
|
|
495
|
+
rootId?: string
|
|
496
|
+
/** Scheduler id reserved when a primary publishes its renderer, before root jobs are installed. */
|
|
497
|
+
pendingRootId?: string
|
|
498
|
+
/** Default scheduler predecessor when borrowing a primary renderer. */
|
|
499
|
+
sharedAfter?: string
|
|
500
|
+
/** Function to unregister this root from the global scheduler */
|
|
501
|
+
unregisterRoot?: () => void
|
|
502
|
+
/** Function to stop following devicePixelRatio changes */
|
|
503
|
+
unwatchDpr?: () => void
|
|
504
|
+
/** Container for child attachment (scene for root, original container for portals) */
|
|
505
|
+
container?: THREE.Object3D
|
|
506
|
+
/**
|
|
507
|
+
* The CanvasTarget this root sizes and renders through.
|
|
508
|
+
*
|
|
509
|
+
* A primary (`<Canvas id>`) owns the renderer's default target -- the one three itself built
|
|
510
|
+
* around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
|
|
511
|
+
* R3F created for its own element. Either way there is exactly one target per canvas element,
|
|
512
|
+
* and the canvas-target job makes it the renderer's active one before this root renders.
|
|
513
|
+
* Absent on WebGL and on a WebGPU canvas that is neither a primary nor sharing, where the renderer
|
|
514
|
+
* is sized directly.
|
|
515
|
+
* @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
|
|
516
|
+
*/
|
|
517
|
+
canvasTarget?: CanvasTarget
|
|
518
|
+
/**
|
|
519
|
+
* Set when this root's canvas target has been resized and the backend's cached render pass
|
|
520
|
+
* descriptor (which holds a depth-stencil view built once per canvas) is therefore stale.
|
|
521
|
+
*
|
|
522
|
+
* Flushed by the canvas-target job in the `start` phase, which is the only place this root's
|
|
523
|
+
* target is guaranteed to be the renderer's active one — `backend.updateSize()` operates on
|
|
524
|
+
* whatever `getCanvasTarget()` returns, so calling it from the resize subscription would
|
|
525
|
+
* invalidate some other canvas's descriptor instead.
|
|
526
|
+
*
|
|
527
|
+
* @see https://github.com/pmndrs/react-three-fiber/issues/3847
|
|
528
|
+
*/
|
|
529
|
+
canvasTargetSizeDirty?: boolean
|
|
530
|
+
/**
|
|
531
|
+
* Whether multi-canvas rendering is active.
|
|
532
|
+
* True on a `<Canvas primary>` once another canvas shares its renderer, and on that canvas.
|
|
533
|
+
* When true, setCanvasTarget is called before each render.
|
|
534
|
+
*/
|
|
535
|
+
isMultiCanvas?: boolean
|
|
536
|
+
/**
|
|
537
|
+
* Whether this canvas is a secondary canvas sharing another's renderer: it found a
|
|
538
|
+
* `<Canvas primary>` (automatically, or through `share="id"`) and borrows its renderer.
|
|
539
|
+
*/
|
|
540
|
+
isSecondary?: boolean
|
|
541
|
+
/**
|
|
542
|
+
* The id of the primary canvas this secondary canvas shares.
|
|
543
|
+
* Only set when isSecondary is true and the primary has an `id`.
|
|
544
|
+
*/
|
|
545
|
+
targetId?: string
|
|
546
|
+
/**
|
|
547
|
+
* This secondary stopped sharing because the primary's renderer fell back to its
|
|
548
|
+
* WebGL2 backend (#3965): it owns the renderer it constructed, so it is not
|
|
549
|
+
* `isSecondary` (which marks a canvas borrowing another's renderer).
|
|
550
|
+
*/
|
|
551
|
+
sharedRendererFallback?: boolean
|
|
552
|
+
/**
|
|
553
|
+
* Function to withdraw this primary canvas from the registry.
|
|
554
|
+
* Only set on a `<Canvas primary>`.
|
|
555
|
+
*/
|
|
556
|
+
unregisterPrimary?: () => void
|
|
557
|
+
/**
|
|
558
|
+
* Function to stop tracking this canvas as one that built its own WebGPU renderer while no primary
|
|
559
|
+
* existed (for the late-primary warning).
|
|
560
|
+
*/
|
|
561
|
+
untrackStandalone?: () => void
|
|
562
|
+
/** Whether canvas dimensions are forced to even numbers */
|
|
563
|
+
forceEven?: boolean
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
interface XRManager {
|
|
567
|
+
connect: () => void
|
|
568
|
+
disconnect: () => void
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
//* Root State Interface ====================================
|
|
572
|
+
|
|
573
|
+
interface RootState {
|
|
574
|
+
/** Set current state */
|
|
575
|
+
set: StoreApi<RootState>['setState']
|
|
576
|
+
/** Get current state */
|
|
577
|
+
get: StoreApi<RootState>['getState']
|
|
578
|
+
/**
|
|
579
|
+
* The store of the canvas that owns this root's renderer.
|
|
580
|
+
* - For primary/independent canvases: points to its own store (self-reference)
|
|
581
|
+
* - For secondary canvases: points to the primary canvas's store
|
|
582
|
+
* - Portals copy it from their parent
|
|
583
|
+
*
|
|
584
|
+
* Anything shared per renderer rather than per canvas (e.g. @react-three/tsl's resources)
|
|
585
|
+
* resolves through it.
|
|
586
|
+
*/
|
|
587
|
+
primaryStore: RootStore
|
|
588
|
+
/** @deprecated Use `renderer` instead. The instance of the renderer (typed as WebGLRenderer for backwards compat) */
|
|
589
|
+
gl: ForRegisteredRenderer<WebGPURenderer, THREE.WebGLRenderer, THREE.WebGLRenderer>
|
|
590
|
+
/**
|
|
591
|
+
* The renderer instance. Both renderers unless the app registered one
|
|
592
|
+
* (`declare module '@react-three/fiber' { interface Register { renderer: 'webgpu' } }`), or the
|
|
593
|
+
* entry decides it (`/webgpu`, `/legacy`).
|
|
594
|
+
*/
|
|
595
|
+
renderer: R3FRenderer
|
|
596
|
+
/** Inspector of the webGPU Renderer. Init in the canvas */
|
|
597
|
+
inspector: any // Inspector type from three/webgpu
|
|
598
|
+
|
|
599
|
+
/** Default camera */
|
|
600
|
+
camera: ThreeCamera
|
|
601
|
+
/** Camera frustum for visibility checks - auto-updated each frame when autoUpdateFrustum is true */
|
|
602
|
+
frustum: THREE.Frustum
|
|
603
|
+
/** Whether to automatically update the frustum each frame (default: true) */
|
|
604
|
+
autoUpdateFrustum: boolean
|
|
605
|
+
/** Default scene (may be overridden in portals to point to the portal container) */
|
|
606
|
+
scene: THREE.Scene
|
|
607
|
+
/** The actual root THREE.Scene - always points to the true scene, even inside portals */
|
|
608
|
+
rootScene: THREE.Scene
|
|
609
|
+
/** Default raycaster */
|
|
610
|
+
raycaster: THREE.Raycaster
|
|
611
|
+
/** Event layer interface, contains the event handler and the node they're connected to */
|
|
612
|
+
events: EventManager<any>
|
|
613
|
+
/** XR interface */
|
|
614
|
+
xr: XRManager
|
|
615
|
+
/** Currently used controls */
|
|
616
|
+
controls: THREE.EventDispatcher | null
|
|
617
|
+
/** Normalized event coordinates */
|
|
618
|
+
pointer: THREE.Vector2
|
|
619
|
+
/** @deprecated Normalized event coordinates, use "pointer" instead! */
|
|
620
|
+
mouse: THREE.Vector2
|
|
621
|
+
/** Color space assigned to 8-bit input textures (color maps). Most textures are authored in sRGB. */
|
|
622
|
+
textureColorSpace: THREE.ColorSpace
|
|
623
|
+
/** Render loop flags */
|
|
624
|
+
frameloop: Frameloop
|
|
625
|
+
performance: Performance
|
|
626
|
+
/** Reactive pixel-size of the canvas */
|
|
627
|
+
size: Size
|
|
628
|
+
/** Reactive size of the viewport in threejs units */
|
|
629
|
+
viewport: Viewport & {
|
|
630
|
+
getCurrentViewport: (
|
|
631
|
+
camera?: ThreeCamera,
|
|
632
|
+
target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>,
|
|
633
|
+
size?: Size,
|
|
634
|
+
) => Omit<Viewport, 'dpr' | 'initialDpr'>
|
|
635
|
+
}
|
|
636
|
+
/** Flags the canvas for render, but doesn't render in itself */
|
|
637
|
+
invalidate: (frames?: number, stackFrames?: boolean) => void
|
|
638
|
+
/** Advance (render) one step */
|
|
639
|
+
advance: (timestamp: number, runGlobalEffects?: boolean) => void
|
|
640
|
+
/** Shortcut to setting the event layer */
|
|
641
|
+
setEvents: (events: Partial<EventManager<any>>) => void
|
|
642
|
+
/** Shortcut to manual sizing. No args resets to props/container. Single arg creates square. */
|
|
643
|
+
setSize: (width?: number, height?: number, top?: number, left?: number) => void
|
|
644
|
+
/** Shortcut to manual setting the pixel ratio */
|
|
645
|
+
setDpr: (dpr: Dpr) => void
|
|
646
|
+
/** Shortcut to setting frameloop flags. No args resets to 'always'. */
|
|
647
|
+
setFrameloop: (frameloop?: Frameloop) => void
|
|
648
|
+
/** Set error state to propagate to error boundary */
|
|
649
|
+
setError: (error: Error | null) => void
|
|
650
|
+
/** Current error state (null when no error) */
|
|
651
|
+
error: Error | null
|
|
652
|
+
/** Global Texture registry (key → Texture, usually keyed by URL) - use useTextures() hook for access + lifecycle */
|
|
653
|
+
textures: Map<string, THREE.Texture>
|
|
654
|
+
/** Internal: refcount per texture key, driven by mounted useTexture consumers (registry enrollment is on by default) */
|
|
655
|
+
_textureRefs: Map<string, number>
|
|
656
|
+
/** Internal: whether setSize() has taken ownership of canvas dimensions */
|
|
657
|
+
_sizeImperative: boolean
|
|
658
|
+
/** Internal: stored size props from Canvas for reset functionality */
|
|
659
|
+
_sizeProps: { width?: number; height?: number } | null
|
|
660
|
+
/** When the canvas was clicked but nothing was hit */
|
|
661
|
+
onPointerMissed?: (event: MouseEvent) => void
|
|
662
|
+
/** When a dragover event has missed any target */
|
|
663
|
+
onDragOverMissed?: (event: DragEvent) => void
|
|
664
|
+
/** When a drop event has missed any target */
|
|
665
|
+
onDropMissed?: (event: DragEvent) => void
|
|
666
|
+
/** If this state model is layered (via createPortal) then this contains the previous layer */
|
|
667
|
+
previousRoot?: RootStore
|
|
668
|
+
/** Internals */
|
|
669
|
+
internal: InternalState
|
|
670
|
+
// flags for triggers
|
|
671
|
+
// if we are using the webGl renderer, this will be true
|
|
672
|
+
isLegacy: ForRegisteredRenderer<false, true, boolean>
|
|
673
|
+
// regardless of renderer, if the system supports webGpu, this will be true
|
|
674
|
+
webGPUSupported: boolean
|
|
675
|
+
//if we are on native
|
|
676
|
+
isNative: boolean
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
type RootStore = UseBoundStoreWithEqualityFn<StoreApi<RootState>>
|
|
680
|
+
|
|
681
|
+
//* Reconciler Types ==============================
|
|
682
|
+
|
|
683
|
+
// FiberRoot is an opaque internal React type - we define it locally
|
|
684
|
+
// to avoid bundling @types/react-reconciler which causes absolute path issues
|
|
685
|
+
type FiberRoot = any
|
|
686
|
+
|
|
687
|
+
/** A promise tagged with its state, the protocol React's `use` reads */
|
|
688
|
+
type TrackedPromise<T> = Promise<T> &
|
|
689
|
+
({ status: 'pending' } | { status: 'fulfilled'; value: T } | { status: 'rejected'; reason: unknown })
|
|
690
|
+
|
|
691
|
+
interface Root {
|
|
692
|
+
fiber: FiberRoot
|
|
693
|
+
store: RootStore
|
|
694
|
+
state:
|
|
695
|
+
| { status: 'open' }
|
|
696
|
+
| { status: 'closing'; token: symbol; settled: Promise<void>; settle: () => void }
|
|
697
|
+
| { status: 'disposed' }
|
|
698
|
+
configuration: {
|
|
699
|
+
previous?: RenderProps<HTMLCanvasElement | OffscreenCanvas>
|
|
700
|
+
apply: (props: RenderProps<HTMLCanvasElement | OffscreenCanvas>) => void
|
|
701
|
+
}
|
|
702
|
+
/** Settles once all accepted configuration has been applied */
|
|
703
|
+
ready: TrackedPromise<unknown>
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
type AttachFnType<O = any> = (parent: any, self: O) => () => void
|
|
707
|
+
type AttachType<O = any> = string | AttachFnType<O>
|
|
708
|
+
|
|
709
|
+
type ConstructorRepresentation<T = any> = new (...args: any[]) => T
|
|
710
|
+
|
|
711
|
+
interface Catalogue {
|
|
712
|
+
[name: string]: ConstructorRepresentation
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// TODO: handle constructor overloads
|
|
716
|
+
// https://github.com/pmndrs/react-three-fiber/pull/2931
|
|
717
|
+
// https://github.com/microsoft/TypeScript/issues/37079
|
|
718
|
+
type Args<T> = T extends ConstructorRepresentation
|
|
719
|
+
? T extends typeof Color$1
|
|
720
|
+
? [r: number, g: number, b: number] | [color: ColorRepresentation]
|
|
721
|
+
: ConstructorParameters<T>
|
|
722
|
+
: any[]
|
|
723
|
+
|
|
724
|
+
type ArgsProp<P> = P extends ConstructorRepresentation
|
|
725
|
+
? IsAllOptional<ConstructorParameters<P>> extends true
|
|
726
|
+
? { args?: Args<P> }
|
|
727
|
+
: { args: Args<P> }
|
|
728
|
+
: { args: unknown[] }
|
|
729
|
+
|
|
730
|
+
type InstanceProps<T = any, P = any> = ArgsProp<P> & {
|
|
731
|
+
object?: T
|
|
732
|
+
dispose?: null
|
|
733
|
+
attach?: AttachType<T>
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
interface Instance<O = any> {
|
|
737
|
+
root: RootStore
|
|
738
|
+
type: string
|
|
739
|
+
parent: Instance | null
|
|
740
|
+
children: Instance[]
|
|
741
|
+
props: InstanceProps<O> & Record<string, unknown>
|
|
742
|
+
object: O & { __r3f?: Instance<O> }
|
|
743
|
+
eventCount: number
|
|
744
|
+
handlers: Partial<EventHandlers>
|
|
745
|
+
attach?: AttachType<O>
|
|
746
|
+
previousAttach?: any
|
|
747
|
+
previousVisible: boolean | undefined
|
|
748
|
+
isHidden: boolean
|
|
749
|
+
/** Set of props that have been applied via once() */
|
|
750
|
+
appliedOnce?: Set<string>
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
interface HostConfig {
|
|
754
|
+
type: string
|
|
755
|
+
props: Instance['props']
|
|
756
|
+
container: RootStore
|
|
757
|
+
instance: Instance
|
|
758
|
+
textInstance: void
|
|
759
|
+
suspenseInstance: Instance
|
|
760
|
+
hydratableInstance: never
|
|
761
|
+
formInstance: never
|
|
762
|
+
publicInstance: Instance['object']
|
|
763
|
+
hostContext: {}
|
|
764
|
+
childSet: never
|
|
765
|
+
timeoutHandle: number | undefined
|
|
766
|
+
noTimeout: -1
|
|
767
|
+
TransitionStatus: null
|
|
768
|
+
}
|
|
769
|
+
declare global {
|
|
770
|
+
var IS_REACT_ACT_ENVIRONMENT: boolean | undefined
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
//* Base Renderer Types =====================================
|
|
774
|
+
|
|
775
|
+
// Shim for OffscreenCanvas since it was removed from DOM types
|
|
776
|
+
interface OffscreenCanvas$1 extends EventTarget {}
|
|
777
|
+
|
|
778
|
+
interface BaseRendererProps {
|
|
779
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
780
|
+
powerPreference?: 'high-performance' | 'low-power' | 'default'
|
|
781
|
+
antialias?: boolean
|
|
782
|
+
alpha?: boolean
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
type RendererFactory<TRenderer, TParams> =
|
|
786
|
+
| TRenderer
|
|
787
|
+
| ((defaultProps: TParams) => TRenderer)
|
|
788
|
+
| ((defaultProps: TParams) => Promise<TRenderer>)
|
|
789
|
+
|
|
790
|
+
interface Renderer {
|
|
791
|
+
render: (scene: THREE.Scene, camera: THREE.Camera) => any
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
//* Color Management Config ==============================
|
|
795
|
+
|
|
796
|
+
/**
|
|
797
|
+
* Color management configuration shared by both WebGL and WebGPU renderers.
|
|
798
|
+
*/
|
|
799
|
+
interface ColorManagementConfig {
|
|
800
|
+
/**
|
|
801
|
+
* Color space assigned to 8-bit input textures (color maps).
|
|
802
|
+
* Defaults to sRGB. Most textures are authored in sRGB.
|
|
803
|
+
* @default THREE.SRGBColorSpace
|
|
804
|
+
*/
|
|
805
|
+
textureColorSpace?: THREE.ColorSpace
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
//* Renderer Settings ==============================
|
|
809
|
+
|
|
810
|
+
/**
|
|
811
|
+
* Shadow map setting: `true` uses `THREE.PCFShadowMap`, a string picks a type, an object is assigned
|
|
812
|
+
* to `renderer.shadowMap`.
|
|
813
|
+
*
|
|
814
|
+
* `'soft'` is a deprecated alias of `'percentage'`: both map to `THREE.PCFShadowMap`, because three.js
|
|
815
|
+
* deprecated `PCFSoftShadowMap` and made `PCFShadowMap` soft. Using `'soft'` logs a deprecation notice.
|
|
816
|
+
* @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
|
|
817
|
+
*/
|
|
818
|
+
type ShadowsConfig = boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>
|
|
819
|
+
|
|
820
|
+
/**
|
|
821
|
+
* Renderer-wide settings R3F reads from the `renderer` / `gl` props bag. They are not renderer
|
|
822
|
+
* properties: R3F applies them itself, and only on the canvas that owns its renderer.
|
|
823
|
+
*/
|
|
824
|
+
interface RendererSettingsConfig extends ColorManagementConfig {
|
|
825
|
+
/**
|
|
826
|
+
* Enables shadows. Only on a renderer R3F builds from a props bag: a renderer instance or factory
|
|
827
|
+
* keeps the `shadowMap` you give it.
|
|
828
|
+
* @example <Canvas renderer={{ shadows: 'variance' }} />
|
|
829
|
+
*/
|
|
830
|
+
shadows?: ShadowsConfig
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
//* WebGL Renderer Props ==============================
|
|
834
|
+
|
|
835
|
+
type DefaultGLProps = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
|
|
836
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
type GLProps =
|
|
840
|
+
| Renderer
|
|
841
|
+
| ((defaultProps: DefaultGLProps) => Renderer)
|
|
842
|
+
| ((defaultProps: DefaultGLProps) => Promise<Renderer>)
|
|
843
|
+
| (Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> & RendererSettingsConfig)
|
|
844
|
+
|
|
845
|
+
//* WebGPU Renderer Props ==============================
|
|
846
|
+
|
|
847
|
+
type DefaultRendererProps = {
|
|
848
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
849
|
+
[key: string]: any
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/**
|
|
853
|
+
* Canvas-level scheduler configuration.
|
|
854
|
+
* Controls render timing relative to other canvases.
|
|
855
|
+
*/
|
|
856
|
+
interface CanvasSchedulerConfig {
|
|
857
|
+
/**
|
|
858
|
+
* Run this Canvas root before the referenced Canvas root id(s).
|
|
859
|
+
*/
|
|
860
|
+
before?: string | string[]
|
|
861
|
+
/**
|
|
862
|
+
* Run this Canvas root after the referenced Canvas root id(s).
|
|
863
|
+
*/
|
|
864
|
+
after?: string | string[]
|
|
865
|
+
/**
|
|
866
|
+
* Numeric root order. Lower values run first.
|
|
867
|
+
*/
|
|
868
|
+
order?: number
|
|
869
|
+
/**
|
|
870
|
+
* Limit this Canvas's default render job (frames per second).
|
|
871
|
+
*/
|
|
872
|
+
fps?: number
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
/**
|
|
876
|
+
* The config keys the `renderer` props bag accepts besides the renderer's own parameters and
|
|
877
|
+
* properties. Multi-canvas and scheduling are Canvas props (`primary`, `share`, `scheduler`).
|
|
878
|
+
*/
|
|
879
|
+
type RendererConfigExtended = RendererSettingsConfig
|
|
880
|
+
|
|
881
|
+
/**
|
|
882
|
+
* The `renderer` prop: opt into three's WebGPU renderer.
|
|
883
|
+
* - `true` (the `<Canvas renderer>` shorthand) or `{}`: a default `WebGPURenderer`
|
|
884
|
+
* - a props bag: constructor parameters (`antialias`, `forceWebGL`, ...) and renderer properties
|
|
885
|
+
* (`toneMapping`, ...), plus `shadows` and `textureColorSpace`
|
|
886
|
+
* - a renderer instance, or a sync/async factory receiving the default props. Structural, like
|
|
887
|
+
* the `gl` prop: anything with `render()`, so a wrapped or mocked renderer is accepted.
|
|
888
|
+
*
|
|
889
|
+
* Everything here configures a renderer this canvas owns. A canvas sharing a primary's renderer
|
|
890
|
+
* ignores a props bag (with a dev warning): renderer-wide settings come from the `<Canvas primary>`.
|
|
891
|
+
*/
|
|
892
|
+
type RendererProps =
|
|
893
|
+
| boolean
|
|
894
|
+
| Renderer
|
|
895
|
+
| ((defaultProps: DefaultRendererProps) => Renderer)
|
|
896
|
+
| ((defaultProps: DefaultRendererProps) => Promise<Renderer>)
|
|
897
|
+
| (Partial<Properties<WebGPURenderer> & WebGPURendererParameters> & RendererConfigExtended)
|
|
898
|
+
|
|
899
|
+
//* Camera Props ==============================
|
|
900
|
+
|
|
901
|
+
type CameraProps = (
|
|
902
|
+
| THREE.Camera
|
|
903
|
+
| Partial<
|
|
904
|
+
ThreeElement<typeof THREE.Camera> &
|
|
905
|
+
ThreeElement<typeof THREE.PerspectiveCamera> &
|
|
906
|
+
ThreeElement<typeof THREE.OrthographicCamera>
|
|
907
|
+
>
|
|
908
|
+
) & {
|
|
909
|
+
/** Flags the camera as manual, putting projection into your own hands */
|
|
910
|
+
manual?: boolean
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
//* Render Props ==============================
|
|
914
|
+
|
|
915
|
+
interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
|
|
916
|
+
/**
|
|
917
|
+
* Canvas id. Sets the HTML `id` attribute on the canvas element and the canvas's scheduler root
|
|
918
|
+
* id (so `scheduler={{ after: 'main' }}` can order against it). On a `<Canvas primary>` it is the
|
|
919
|
+
* name other canvases pass to `share="id"`.
|
|
920
|
+
* @example <Canvas id="main-viewer">...</Canvas>
|
|
921
|
+
*/
|
|
922
|
+
id?: string
|
|
923
|
+
/**
|
|
924
|
+
* Make this canvas the owner of a WebGPU renderer that other canvases share. Every other WebGPU
|
|
925
|
+
* canvas mounted with or after it borrows its renderer (drawing into its own element through a
|
|
926
|
+
* `CanvasTarget`) unless it passes `share={false}` or its own renderer instance/factory.
|
|
927
|
+
* Renderer-wide settings (`renderer={{ shadows, toneMapping, ... }}`) belong on the primary.
|
|
928
|
+
*
|
|
929
|
+
* WebGPU only: on the root entry `primary` selects WebGPU like the `renderer` prop does. Several
|
|
930
|
+
* primaries need distinct `id`s, and the other canvases then pick one with `share="id"`.
|
|
931
|
+
* Read when the renderer is created; changing it later needs a remount.
|
|
932
|
+
* @example <Canvas primary renderer={{ shadows: true }}>...</Canvas>
|
|
933
|
+
*/
|
|
934
|
+
primary?: boolean
|
|
935
|
+
/**
|
|
936
|
+
* Renderer sharing for a non-primary canvas (WebGPU only).
|
|
937
|
+
* - omitted: share the primary's renderer when exactly one `<Canvas primary>` is mounted, else
|
|
938
|
+
* own a renderer as usual
|
|
939
|
+
* - `"id"`: share the renderer of `<Canvas id="id" primary>`, waiting for it to mount
|
|
940
|
+
* - `false`: always own a renderer, even while a primary exists
|
|
941
|
+
*
|
|
942
|
+
* Read when the renderer is created; changing it later needs a remount.
|
|
943
|
+
* @example <Canvas share="main">...</Canvas>
|
|
944
|
+
*/
|
|
945
|
+
share?: string | false
|
|
946
|
+
/**
|
|
947
|
+
* Canvas-level scheduler options: this canvas's order relative to other canvases, and an fps cap
|
|
948
|
+
* for its default render. A canvas sharing a primary's renderer runs after the primary unless
|
|
949
|
+
* `before`/`after` are given here.
|
|
950
|
+
* @example <Canvas scheduler={{ after: 'main', fps: 30 }}>...</Canvas>
|
|
951
|
+
*/
|
|
952
|
+
scheduler?: CanvasSchedulerConfig
|
|
953
|
+
/** A threejs renderer instance or props that go into the default renderer */
|
|
954
|
+
gl?: GLProps
|
|
955
|
+
/** A WebGPU renderer instance or props that go into the default renderer */
|
|
956
|
+
renderer?: RendererProps
|
|
957
|
+
/** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
|
|
958
|
+
size?: Size
|
|
959
|
+
/** Creates an orthographic camera */
|
|
960
|
+
orthographic?: boolean
|
|
961
|
+
/**
|
|
962
|
+
* R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
|
|
963
|
+
* @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
|
|
964
|
+
*/
|
|
965
|
+
frameloop?: Frameloop
|
|
966
|
+
/**
|
|
967
|
+
* R3F performance options for adaptive performance.
|
|
968
|
+
* @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
|
|
969
|
+
*/
|
|
970
|
+
performance?: Partial<Omit<Performance, 'regress'>>
|
|
971
|
+
/** Target pixel ratio. Can clamp between a range: `[min, max]` */
|
|
972
|
+
dpr?: Dpr
|
|
973
|
+
/**
|
|
974
|
+
* Props that go into the default raycaster. `params` is merged into the raycaster's defaults,
|
|
975
|
+
* so a single threshold can be set: `raycaster={{ params: { Points: { threshold: 0.2 } } }}`.
|
|
976
|
+
*/
|
|
977
|
+
raycaster?: Partial<Omit<THREE.Raycaster, 'params'>> & { params?: Partial<THREE.RaycasterParameters> }
|
|
978
|
+
/** A `THREE.Scene` instance or props that go into the default scene */
|
|
979
|
+
scene?: THREE.Scene | Partial<THREE.Scene>
|
|
980
|
+
/** A `THREE.Camera` instance or props that go into the default camera */
|
|
981
|
+
camera?: CameraProps
|
|
982
|
+
/** An R3F event manager to manage elements' pointer events */
|
|
983
|
+
events?: (store: RootStore) => EventManager<Element>
|
|
984
|
+
/** Callback after the canvas has rendered (but not yet committed) */
|
|
985
|
+
onCreated?: (state: RootState) => void
|
|
986
|
+
/** Response for pointer clicks that have missed any target */
|
|
987
|
+
onPointerMissed?: (event: MouseEvent) => void
|
|
988
|
+
/** Response for dragover events that have missed any target */
|
|
989
|
+
onDragOverMissed?: (event: DragEvent) => void
|
|
990
|
+
/** Response for drop events that have missed any target */
|
|
991
|
+
onDropMissed?: (event: DragEvent) => void
|
|
992
|
+
/** Whether to automatically update the frustum each frame (default: true) */
|
|
993
|
+
autoUpdateFrustum?: boolean
|
|
994
|
+
/**
|
|
995
|
+
* Enable WebGPU occlusion queries for onOccluded/onVisible events.
|
|
996
|
+
* Auto-enabled when any object uses onOccluded or onVisible handlers.
|
|
997
|
+
* Only works with WebGPU renderer - WebGL will log a warning.
|
|
998
|
+
*/
|
|
999
|
+
occlusion?: boolean
|
|
1000
|
+
/** Internal: stored size props from Canvas for reset functionality */
|
|
1001
|
+
_sizeProps?: { width?: number; height?: number } | null
|
|
1002
|
+
/**
|
|
1003
|
+
* Internal: the token a Canvas announced `primary` with before this root existed, so configure
|
|
1004
|
+
* continues that announcement instead of starting a second one.
|
|
1005
|
+
* @internal
|
|
1006
|
+
*/
|
|
1007
|
+
_primaryToken?: object
|
|
1008
|
+
/** Force canvas dimensions to even numbers (fixes Safari rendering issues with odd/fractional sizes) */
|
|
1009
|
+
forceEven?: boolean
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
//* Reconciler Root ==============================
|
|
1013
|
+
|
|
1014
|
+
interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
|
|
1015
|
+
ready: TrackedPromise<unknown>
|
|
1016
|
+
configure: (config?: RenderProps<TCanvas>) => TrackedPromise<ReconcilerRoot<TCanvas>>
|
|
1017
|
+
render: (element: ReactNode) => RootStore
|
|
1018
|
+
unmount: () => void
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
//* Inject State ==============================
|
|
1022
|
+
|
|
1023
|
+
type InjectState = Partial<
|
|
1024
|
+
Omit<RootState, 'events'> & {
|
|
1025
|
+
events?: {
|
|
1026
|
+
enabled?: boolean
|
|
1027
|
+
priority?: number
|
|
1028
|
+
compute?: ComputeFunction
|
|
1029
|
+
connected?: any
|
|
1030
|
+
}
|
|
1031
|
+
/**
|
|
1032
|
+
* When true (default), injects a THREE.Scene between container and children if container isn't already a Scene.
|
|
1033
|
+
* This ensures state.scene is always a real THREE.Scene with proper properties (background, environment, fog).
|
|
1034
|
+
* Set to false to use the container directly as scene (anti-pattern, but supported for edge cases).
|
|
1035
|
+
*/
|
|
1036
|
+
injectScene?: boolean
|
|
1037
|
+
}
|
|
1038
|
+
>
|
|
1039
|
+
|
|
1040
|
+
type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
|
|
1041
|
+
|
|
1042
|
+
interface MathRepresentation {
|
|
1043
|
+
set(...args: number[]): any
|
|
1044
|
+
}
|
|
1045
|
+
interface VectorRepresentation extends MathRepresentation {
|
|
1046
|
+
setScalar(value: number): any
|
|
1047
|
+
}
|
|
1048
|
+
type MathTypes = MathRepresentation | THREE.Euler | THREE.Color
|
|
1049
|
+
|
|
1050
|
+
type MathType<T extends MathTypes> = T extends THREE.Color
|
|
1051
|
+
? Args<typeof THREE.Color> | THREE.ColorRepresentation
|
|
1052
|
+
: T extends VectorRepresentation | THREE.Layers | THREE.Euler
|
|
1053
|
+
? T | MutableOrReadonlyParameters<T['set']> | number
|
|
1054
|
+
: T | MutableOrReadonlyParameters<T['set']>
|
|
1055
|
+
|
|
1056
|
+
type MathProps<P> = {
|
|
1057
|
+
[K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
type Vector2 = MathType<THREE.Vector2>
|
|
1061
|
+
type Vector3 = MathType<THREE.Vector3>
|
|
1062
|
+
type Vector4 = MathType<THREE.Vector4>
|
|
1063
|
+
type Color = MathType<THREE.Color>
|
|
1064
|
+
type Layers = MathType<THREE.Layers>
|
|
1065
|
+
type Quaternion = MathType<THREE.Quaternion>
|
|
1066
|
+
type Euler = MathType<THREE.Euler>
|
|
1067
|
+
type Matrix3 = MathType<THREE.Matrix3>
|
|
1068
|
+
type Matrix4 = MathType<THREE.Matrix4>
|
|
1069
|
+
|
|
1070
|
+
interface RaycastableRepresentation {
|
|
1071
|
+
raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void
|
|
1072
|
+
}
|
|
1073
|
+
type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {}
|
|
1074
|
+
|
|
1075
|
+
/**
|
|
1076
|
+
* Props for geometry transform methods that can be called with `once()`.
|
|
1077
|
+
* These methods modify the geometry in-place and only make sense to call once on mount.
|
|
1078
|
+
*
|
|
1079
|
+
* @example
|
|
1080
|
+
* import { once } from '@react-three/fiber'
|
|
1081
|
+
*
|
|
1082
|
+
* <boxGeometry args={[1, 1, 1]} rotateX={once(Math.PI / 2)} />
|
|
1083
|
+
* <planeGeometry args={[10, 10]} translate={once(0, 0, 5)} />
|
|
1084
|
+
* <bufferGeometry applyMatrix4={once(matrix)} center={once()} />
|
|
1085
|
+
*/
|
|
1086
|
+
interface GeometryTransformProps {
|
|
1087
|
+
/** Rotate the geometry about the X axis (radians). Use with once(). */
|
|
1088
|
+
rotateX?: number
|
|
1089
|
+
/** Rotate the geometry about the Y axis (radians). Use with once(). */
|
|
1090
|
+
rotateY?: number
|
|
1091
|
+
/** Rotate the geometry about the Z axis (radians). Use with once(). */
|
|
1092
|
+
rotateZ?: number
|
|
1093
|
+
/** Translate the geometry (x, y, z). Use with once(). */
|
|
1094
|
+
translate?: [x: number, y: number, z: number]
|
|
1095
|
+
/** Scale the geometry (x, y, z). Use with once(). */
|
|
1096
|
+
scale?: [x: number, y: number, z: number]
|
|
1097
|
+
/** Center the geometry based on bounding box. Use with once(). */
|
|
1098
|
+
center?: true
|
|
1099
|
+
/** Apply a Matrix4 transformation. Use with once(). */
|
|
1100
|
+
applyMatrix4?: THREE.Matrix4
|
|
1101
|
+
/** Apply a Quaternion rotation. Use with once(). */
|
|
1102
|
+
applyQuaternion?: THREE.Quaternion
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
type GeometryProps<P> = P extends THREE.BufferGeometry ? GeometryTransformProps : {}
|
|
1106
|
+
|
|
1107
|
+
/**
|
|
1108
|
+
* Workaround for @types/three TSL node type issues.
|
|
1109
|
+
* The Node base class has properties that subclasses (OperatorNode, ConstNode, etc.) don't inherit.
|
|
1110
|
+
* This transforms `Node | null` properties to accept any object with node-like shape.
|
|
1111
|
+
*/
|
|
1112
|
+
type TSLNodeInput = { nodeType?: string | null; uuid?: string } | null
|
|
1113
|
+
|
|
1114
|
+
/**
|
|
1115
|
+
* For node material properties (colorNode, positionNode, etc.), accept broader types
|
|
1116
|
+
* since @types/three has broken inheritance for TSL node subclasses. NodeClass requires
|
|
1117
|
+
* `nodeType`, so this structural key test remains neutral to the selected Three entry.
|
|
1118
|
+
*/
|
|
1119
|
+
type NodeProps<P> = {
|
|
1120
|
+
[K in keyof P as NonNullable<P[K]> extends { nodeType: string | null } ? K : never]?: TSLNodeInput
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
interface ReactProps<P> {
|
|
1124
|
+
children?: React.ReactNode
|
|
1125
|
+
ref?: React.Ref<P>
|
|
1126
|
+
key?: React.Key
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<
|
|
1130
|
+
Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P> & GeometryProps<P> & NodeProps<P>>
|
|
1131
|
+
>
|
|
1132
|
+
|
|
1133
|
+
type ThreeElement<T extends ConstructorRepresentation> = Mutable<
|
|
1134
|
+
Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>
|
|
1135
|
+
>
|
|
1136
|
+
|
|
1137
|
+
/**
|
|
1138
|
+
* Every constructor export of a three namespace as an uncapitalized JSX element. Non-constructor
|
|
1139
|
+
* exports (constants, functions, nested namespaces) are dropped from the keys rather than mapped
|
|
1140
|
+
* to `never`: a single `never`-valued key in `JSX.IntrinsicElements` collapses the props of any
|
|
1141
|
+
* tag typed `React.ElementType` (#3898).
|
|
1142
|
+
*/
|
|
1143
|
+
type ThreeToJSXElements<T extends Record<string, any>> = {
|
|
1144
|
+
[K in keyof T & string as T[K] extends ConstructorRepresentation ? Uncapitalize<K> : never]: ThreeElement<T[K]>
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
/** Method names of Object3D, excluded from the `primitive` element's typed props. */
|
|
1148
|
+
type Object3DMethod = NonNullable<
|
|
1149
|
+
{
|
|
1150
|
+
[K in keyof THREE.Object3D]-?: THREE.Object3D[K] extends (...args: any[]) => any ? K : never
|
|
1151
|
+
}[keyof THREE.Object3D]
|
|
1152
|
+
>
|
|
1153
|
+
|
|
1154
|
+
/** Look up a key present in a generic element map. */
|
|
1155
|
+
type ElementOf<E, K extends string> = E[Extract<keyof E, K>]
|
|
1156
|
+
|
|
1157
|
+
/**
|
|
1158
|
+
* The JSX element map derived from an entry's Three.js exports. Each entry declares its own
|
|
1159
|
+
* `ThreeElements` from this (`src/index.tsx`, `src/legacy.tsx`, `src/webgpu/index.tsx`) and augments
|
|
1160
|
+
* react's `IntrinsicElements` with it, so `/legacy` never advertises node materials and `/webgpu`
|
|
1161
|
+
* never advertises a `<webGLRenderer>`.
|
|
1162
|
+
*/
|
|
1163
|
+
type ThreeElementsOf<T extends Record<string, any>> = Omit<
|
|
1164
|
+
ThreeToJSXElements<T>,
|
|
1165
|
+
'audio' | 'source' | 'line' | 'path'
|
|
1166
|
+
> & {
|
|
1167
|
+
/**
|
|
1168
|
+
* `primitive` wraps a pre-existing object, so its props cannot be derived from one class.
|
|
1169
|
+
* Events are typed from `EventHandlers` (`onClick={(e) => ...}` infers `e`), the ref is
|
|
1170
|
+
* untyped, and any other prop is accepted and applied to the object by name. Object3D's own
|
|
1171
|
+
* methods are left out of the typed surface: they return `this`, so a subclass element's
|
|
1172
|
+
* props (`ThreeElements['group']`) could not be spread onto a primitive otherwise.
|
|
1173
|
+
*/
|
|
1174
|
+
primitive: Omit<ThreeElement<typeof THREE.Object3D>, 'args' | 'object' | 'ref' | Object3DMethod> & {
|
|
1175
|
+
object: object
|
|
1176
|
+
ref?: React.Ref<any>
|
|
1177
|
+
[prop: string]: unknown
|
|
1178
|
+
}
|
|
1179
|
+
// Conflicts with DOM types can be accessed through a three* prefix
|
|
1180
|
+
threeAudio: ElementOf<ThreeToJSXElements<T>, 'audio'>
|
|
1181
|
+
threeSource: ElementOf<ThreeToJSXElements<T>, 'source'>
|
|
1182
|
+
threeLine: ElementOf<ThreeToJSXElements<T>, 'line'>
|
|
1183
|
+
threePath: ElementOf<ThreeToJSXElements<T>, 'path'>
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1186
|
+
interface RootExtension {
|
|
1187
|
+
/** Unique name. Registering the same name again replaces the entry (HMR-safe); roots it already
|
|
1188
|
+
* set up are not set up a second time, but get the new entry's dispose and hmr. */
|
|
1189
|
+
name: string;
|
|
1190
|
+
/**
|
|
1191
|
+
* Called once per root, after its renderer exists and before `onCreated` and the first frame.
|
|
1192
|
+
* `isLegacy` and `primaryStore` are known by then, so an extension can skip WebGL roots or defer
|
|
1193
|
+
* to the primary canvas. Return fields to merge into the root's state, or nothing.
|
|
1194
|
+
*/
|
|
1195
|
+
setup?(store: RootStore): Partial<RootState> | void;
|
|
1196
|
+
/** Called when a root this extension set up unmounts. */
|
|
1197
|
+
dispose?(store: RootStore): void;
|
|
1198
|
+
/** Called when `<Canvas>` detects hot module replacement (skipped with `hmr={false}`). */
|
|
1199
|
+
hmr?(store: RootStore): void;
|
|
1200
|
+
}
|
|
1201
|
+
/**
|
|
1202
|
+
* Register an extension. It is set up on every live root immediately, and on every root created
|
|
1203
|
+
* afterwards. Returns a function that unregisters it: new roots are no longer set up, while roots
|
|
1204
|
+
* it already set up keep its state and still get its dispose when they unmount.
|
|
1205
|
+
*/
|
|
1206
|
+
declare function registerRootExtension(extension: RootExtension): () => void;
|
|
1207
|
+
/**
|
|
1208
|
+
* Point a root's default render job at a different render function, or back at
|
|
1209
|
+
* `renderer.render(scene, camera)` with `null`.
|
|
1210
|
+
*
|
|
1211
|
+
* The default job keeps everything else: the Canvas `fps` throttle, error propagation to the error
|
|
1212
|
+
* boundary, and backing off when a user `useFrame(..., { phase: 'render' })` job takes over.
|
|
1213
|
+
*/
|
|
1214
|
+
declare function setRenderOverride(store: RootStore, render: (() => void) | null): void;
|
|
1215
|
+
|
|
1216
|
+
/**
|
|
1217
|
+
* Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
|
|
1218
|
+
* @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
|
|
1219
|
+
*/
|
|
1220
|
+
declare function useStore(): RootStore;
|
|
1221
|
+
/**
|
|
1222
|
+
* Accesses R3F's internal state, containing renderer, canvas, scene, etc.
|
|
1223
|
+
* @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
|
|
1224
|
+
*/
|
|
1225
|
+
declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
|
|
1226
|
+
|
|
1227
|
+
/**
|
|
1228
|
+
* React context that carries the current root's {@link RootStore}. Each root provides its store and
|
|
1229
|
+
* each portal provides its own scoped one; `useStore`, and every hook built on it, reads it.
|
|
1230
|
+
*
|
|
1231
|
+
* Stored on `globalThis` under `Symbol.for('@react-three/fiber.context')`, so every copy and entry
|
|
1232
|
+
* of fiber shares a single context.
|
|
1233
|
+
*/
|
|
1234
|
+
declare const context: React$1.Context<RootStore>;
|
|
1235
|
+
|
|
1236
|
+
export { useStore as a$, useThree as b0, registerRootExtension as u, setRenderOverride as v, context as x };
|
|
1237
|
+
export type { Events as $, Viewport as A, RenderCallback as B, Color as C, Dpr as D, Euler as E, Frameloop as F, GeometryTransformProps as G, Performance as H, InternalState as I, RootState as J, RootStore 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, Intersection as U, VectorRepresentation as V, Camera as W, XRManager as X, IntersectionEvent as Y, ThreeEvent as Z, DomEvent as _, MathRepresentation as a, EventHandlers as a0, FilterFunction as a1, ComputeFunction as a2, XRPointerConfig as a3, EventManager as a4, PointerCaptureTarget as a5, VisibilityEntry as a6, OffscreenCanvas$1 as a7, BaseRendererProps as a8, RendererFactory as a9, Properties as aA, Mutable as aB, IsOptional as aC, IsAllOptional as aD, ThreeCamera as aE, Act as aF, Bridge as aG, SetBlock as aH, UnblockProps as aI, ObjectMap as aJ, EquConfig as aK, Disposable as aL, FrameNextState as aM, FrameState as aN, FrameNextCallback as aO, FrameCallback as aP, ThreeNamespace as aQ, ThreeCore as aR, OcclusionSupport as aS, WebGLSupport as aT, WebGPUSupport as aU, RendererSupport as aV, RendererProvider as aW, Register as aX, RegisteredRenderer as aY, ForRegisteredRenderer as aZ, R3FRendererSupport as a_, Renderer as aa, ColorManagementConfig as ab, ShadowsConfig as ac, RendererSettingsConfig as ad, DefaultGLProps as ae, GLProps as af, DefaultRendererProps as ag, CanvasSchedulerConfig as ah, RendererConfigExtended as ai, RendererProps as aj, CameraProps as ak, RenderProps as al, InjectState as am, FiberRoot as an, TrackedPromise as ao, Root as ap, AttachFnType as aq, AttachType as ar, Catalogue as as, Args as at, ArgsProp as au, InstanceProps as av, Instance as aw, HostConfig as ax, NonFunctionKeys as ay, Overwrite 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, R3FRenderTarget as s, ReconcilerRoot as t, RootExtension as w, R3FRenderer as y, Size as z };
|