@react-three/fiber 10.0.0-canary.e3891fb → 10.0.0-canary.e78793c
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/extension.cjs +8 -8
- package/dist/extension.d.cts +50 -6
- package/dist/extension.d.mts +50 -6
- package/dist/extension.d.ts +50 -6
- package/dist/extension.mjs +1 -1
- package/dist/index.cjs +17 -19
- package/dist/index.d.cts +16 -49
- package/dist/index.d.mts +16 -49
- package/dist/index.d.ts +16 -49
- package/dist/index.mjs +7 -8
- package/dist/legacy.cjs +37 -15
- package/dist/legacy.d.cts +10 -8
- package/dist/legacy.d.mts +10 -8
- package/dist/legacy.d.ts +10 -8
- package/dist/legacy.mjs +13 -5
- package/dist/shared/{fiber.C4GU39Za.d.ts → fiber.34TOMPo3.d.cts} +190 -471
- package/dist/shared/fiber.BFuGd7gN.d.cts +90 -0
- package/dist/shared/fiber.BSYBnw8x.mjs +16563 -0
- package/dist/shared/{fiber.B0oukOFO.mjs → fiber.Biz9olEe.mjs} +181 -64
- package/dist/shared/fiber.Bll9fqKA.d.mts +90 -0
- package/dist/shared/{fiber.Cg2YRc54.d.cts → fiber.CjMAAsJy.d.ts} +190 -471
- package/dist/shared/{fiber.I5Q4dVvl.d.cts → fiber.DQTSZ24m.d.cts} +488 -26
- package/dist/shared/{fiber.I5Q4dVvl.d.mts → fiber.DQTSZ24m.d.mts} +488 -26
- package/dist/shared/{fiber.I5Q4dVvl.d.ts → fiber.DQTSZ24m.d.ts} +488 -26
- package/dist/shared/fiber.DUgKvaq-.mjs +9 -0
- package/dist/shared/{fiber.khFlPHPf.cjs → fiber.DfiCufha.cjs} +186 -62
- package/dist/shared/fiber.DuA4F8L5.d.ts +90 -0
- package/dist/shared/{fiber.2dyldILT.d.mts → fiber.Dy7Uz273.d.mts} +190 -471
- package/dist/shared/fiber.X4yI0DId.cjs +14 -0
- package/dist/shared/fiber.nDnBf1np.cjs +16661 -0
- package/dist/webgpu/index.cjs +16 -18
- package/dist/webgpu/index.d.cts +17 -79
- package/dist/webgpu/index.d.mts +17 -79
- package/dist/webgpu/index.d.ts +17 -79
- package/dist/webgpu/index.mjs +7 -9
- package/package.json +8 -8
- package/readme.md +1 -1
- package/dist/chunks/webgl.cjs +0 -27
- package/dist/chunks/webgl.mjs +0 -11
- package/dist/shared/fiber.BU0vBHc9.d.mts +0 -48
- package/dist/shared/fiber.Cx-UAmMb.d.ts +0 -48
- package/dist/shared/fiber.DAl4H27x.d.cts +0 -48
- package/dist/shared/fiber.L0cJPxh2.cjs +0 -15151
- package/dist/shared/fiber.UW5CRgts.mjs +0 -15053
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { FrameTimingState, FrameCallback as FrameCallback$1, SchedulerApi } from '@pmndrs/scheduler';
|
|
2
2
|
import * as THREE from 'three';
|
|
3
|
-
import { WebGLRenderer, WebGLRenderTarget, Color, ColorRepresentation } from 'three';
|
|
4
|
-
import * as React from 'react';
|
|
3
|
+
import { WebGLRenderer, WebGLRenderTarget, Color as Color$1, ColorRepresentation } from 'three';
|
|
5
4
|
import * as ThreeWebGPU from 'three/webgpu';
|
|
6
|
-
import { WebGPURenderer, RenderTarget, CanvasTarget } from 'three/webgpu';
|
|
5
|
+
import { WebGPURenderer, RenderTarget, CanvasTarget, WebGPURendererParameters } from 'three/webgpu';
|
|
6
|
+
import * as React$1 from 'react';
|
|
7
|
+
import { ReactNode } from 'react';
|
|
7
8
|
import { StoreApi } from 'zustand';
|
|
8
9
|
import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
|
|
9
10
|
import { uniform, nodeObject } from 'three/tsl';
|
|
@@ -31,10 +32,10 @@ type Act = <T = any>(cb: () => Promise<T>) => Promise<T>
|
|
|
31
32
|
|
|
32
33
|
//* Bridge & Block Types ==============================
|
|
33
34
|
|
|
34
|
-
type Bridge = React.FC<{ children?: React.ReactNode }>
|
|
35
|
+
type Bridge = React$1.FC<{ children?: React$1.ReactNode }>
|
|
35
36
|
|
|
36
37
|
type SetBlock = false | Promise<null> | null
|
|
37
|
-
type UnblockProps = { set: React.Dispatch<React.SetStateAction<SetBlock>>; children: React.ReactNode }
|
|
38
|
+
type UnblockProps = { set: React$1.Dispatch<React$1.SetStateAction<SetBlock>>; children: React$1.ReactNode }
|
|
38
39
|
|
|
39
40
|
//* Object Map Type ==============================
|
|
40
41
|
|
|
@@ -339,10 +340,14 @@ interface RendererProvider {
|
|
|
339
340
|
}
|
|
340
341
|
|
|
341
342
|
//* Register ==============================
|
|
342
|
-
// The
|
|
343
|
-
//
|
|
344
|
-
//
|
|
345
|
-
//
|
|
343
|
+
// The base RootState is typed for both renderers, so by default `state.renderer` is the union and a
|
|
344
|
+
// WebGPU-only member (`renderer.compute`, `renderer.backend`) needs a narrow. That base is what
|
|
345
|
+
// `@react-three/fiber/extension` (the entry for libraries) and the `RootState` type expose, so a
|
|
346
|
+
// library compiles for apps on either renderer.
|
|
347
|
+
//
|
|
348
|
+
// Apps rarely need this: each entry's hooks are already typed for the renderer it renders with
|
|
349
|
+
// (`@react-three/fiber` WebGPU, `/legacy` WebGL). Registering narrows the base types too, for code
|
|
350
|
+
// that goes through them (`/extension` hooks in an app, `RootState` annotations):
|
|
346
351
|
//
|
|
347
352
|
// declare module '@react-three/fiber' {
|
|
348
353
|
// interface Register {
|
|
@@ -351,8 +356,7 @@ interface RendererProvider {
|
|
|
351
356
|
// }
|
|
352
357
|
//
|
|
353
358
|
// Same pattern as `Register` in @react-three/tsl (and TanStack Router). Nothing registered means
|
|
354
|
-
// the union, unchanged.
|
|
355
|
-
// path; this is for apps on `@react-three/fiber` that want the narrowed types without changing it.
|
|
359
|
+
// the union, unchanged.
|
|
356
360
|
|
|
357
361
|
/**
|
|
358
362
|
* Augment this to type `RootState` for the renderer your app uses. Recognised keys:
|
|
@@ -382,7 +386,7 @@ type R3FRendererSupport = ForRegisteredRenderer<WebGPUSupport, WebGLSupport, Ren
|
|
|
382
386
|
//* Core Store Types ========================================
|
|
383
387
|
|
|
384
388
|
type Subscription = {
|
|
385
|
-
ref: React.RefObject<RenderCallback>
|
|
389
|
+
ref: React$1.RefObject<RenderCallback>
|
|
386
390
|
priority: number
|
|
387
391
|
store: RootStore
|
|
388
392
|
}
|
|
@@ -446,7 +450,7 @@ interface InternalState {
|
|
|
446
450
|
/** Pointers needing raycast this frame (used with frameTimedRaycasts) */
|
|
447
451
|
pointerDirty: Map<number, DomEvent>
|
|
448
452
|
/** Last event received (for events.update() compatibility) */
|
|
449
|
-
lastEvent: React.RefObject<DomEvent | null>
|
|
453
|
+
lastEvent: React$1.RefObject<DomEvent | null>
|
|
450
454
|
/** @deprecated Use pointerMap.get(pointerId).hovered instead */
|
|
451
455
|
hovered: Map<string, ThreeEvent<DomEvent>>
|
|
452
456
|
/** @deprecated Use pointerMap.get(pointerId).captured instead */
|
|
@@ -468,7 +472,7 @@ interface InternalState {
|
|
|
468
472
|
active: boolean
|
|
469
473
|
priority: number
|
|
470
474
|
frames: number
|
|
471
|
-
subscribe: (callback: React.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
|
|
475
|
+
subscribe: (callback: React$1.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void
|
|
472
476
|
/** Internal renderer storage - use state.renderer or state.gl to access */
|
|
473
477
|
actualRenderer: R3FRenderer
|
|
474
478
|
/**
|
|
@@ -477,6 +481,11 @@ interface InternalState {
|
|
|
477
481
|
* Selected once, from the entry's provider, and copied into portals with the rest of `internal`.
|
|
478
482
|
*/
|
|
479
483
|
support: R3FRendererSupport
|
|
484
|
+
/**
|
|
485
|
+
* Releases this root's lease on its renderer. The last release disposes a renderer R3F created;
|
|
486
|
+
* a renderer passed in as an instance is never disposed by R3F.
|
|
487
|
+
*/
|
|
488
|
+
releaseRenderer?: () => void | Promise<void>
|
|
480
489
|
/** Global scheduler reference (for useFrame hook) */
|
|
481
490
|
scheduler: SchedulerApi | null
|
|
482
491
|
/**
|
|
@@ -487,8 +496,14 @@ interface InternalState {
|
|
|
487
496
|
renderOverride?: (() => void) | null
|
|
488
497
|
/** This root's unique ID in the global scheduler */
|
|
489
498
|
rootId?: string
|
|
499
|
+
/** Scheduler id reserved when a primary publishes its renderer, before root jobs are installed. */
|
|
500
|
+
pendingRootId?: string
|
|
501
|
+
/** Default scheduler predecessor when borrowing a primary renderer. */
|
|
502
|
+
sharedAfter?: string
|
|
490
503
|
/** Function to unregister this root from the global scheduler */
|
|
491
504
|
unregisterRoot?: () => void
|
|
505
|
+
/** Function to stop following devicePixelRatio changes */
|
|
506
|
+
unwatchDpr?: () => void
|
|
492
507
|
/** Container for child attachment (scene for root, original container for portals) */
|
|
493
508
|
container?: THREE.Object3D
|
|
494
509
|
/**
|
|
@@ -498,7 +513,8 @@ interface InternalState {
|
|
|
498
513
|
* around the canvas element -- so sizing it is sizing the renderer. A secondary owns a target
|
|
499
514
|
* R3F created for its own element. Either way there is exactly one target per canvas element,
|
|
500
515
|
* and the canvas-target job makes it the renderer's active one before this root renders.
|
|
501
|
-
* Absent on WebGL and on
|
|
516
|
+
* Absent on WebGL and on a WebGPU canvas that is neither a primary nor sharing, where the renderer
|
|
517
|
+
* is sized directly.
|
|
502
518
|
* @see https://threejs.org/docs/#api/en/renderers/common/CanvasTarget
|
|
503
519
|
*/
|
|
504
520
|
canvasTarget?: CanvasTarget
|
|
@@ -516,25 +532,36 @@ interface InternalState {
|
|
|
516
532
|
canvasTargetSizeDirty?: boolean
|
|
517
533
|
/**
|
|
518
534
|
* Whether multi-canvas rendering is active.
|
|
519
|
-
* True
|
|
535
|
+
* True on a `<Canvas primary>` once another canvas shares its renderer, and on that canvas.
|
|
520
536
|
* When true, setCanvasTarget is called before each render.
|
|
521
537
|
*/
|
|
522
538
|
isMultiCanvas?: boolean
|
|
523
539
|
/**
|
|
524
|
-
* Whether this canvas is a secondary canvas sharing another's renderer
|
|
525
|
-
*
|
|
540
|
+
* Whether this canvas is a secondary canvas sharing another's renderer: it found a
|
|
541
|
+
* `<Canvas primary>` (automatically, or through `share="id"`) and borrows its renderer.
|
|
526
542
|
*/
|
|
527
543
|
isSecondary?: boolean
|
|
528
544
|
/**
|
|
529
|
-
* The id of the primary canvas this secondary canvas
|
|
530
|
-
* Only set when isSecondary is true
|
|
545
|
+
* The id of the primary canvas this secondary canvas shares.
|
|
546
|
+
* Only set when isSecondary is true and the primary has an `id`.
|
|
531
547
|
*/
|
|
532
548
|
targetId?: string
|
|
533
549
|
/**
|
|
534
|
-
*
|
|
535
|
-
*
|
|
550
|
+
* This secondary stopped sharing because the primary's renderer fell back to its
|
|
551
|
+
* WebGL2 backend (#3965): it owns the renderer it constructed, so it is not
|
|
552
|
+
* `isSecondary` (which marks a canvas borrowing another's renderer).
|
|
553
|
+
*/
|
|
554
|
+
sharedRendererFallback?: boolean
|
|
555
|
+
/**
|
|
556
|
+
* Function to withdraw this primary canvas from the registry.
|
|
557
|
+
* Only set on a `<Canvas primary>`.
|
|
536
558
|
*/
|
|
537
559
|
unregisterPrimary?: () => void
|
|
560
|
+
/**
|
|
561
|
+
* Function to stop tracking this canvas as one that built its own WebGPU renderer while no primary
|
|
562
|
+
* existed (for the late-primary warning).
|
|
563
|
+
*/
|
|
564
|
+
untrackStandalone?: () => void
|
|
538
565
|
/** Whether canvas dimensions are forced to even numbers */
|
|
539
566
|
forceEven?: boolean
|
|
540
567
|
}
|
|
@@ -660,9 +687,23 @@ type RootStore = UseBoundStoreWithEqualityFn<StoreApi<RootState>>
|
|
|
660
687
|
// to avoid bundling @types/react-reconciler which causes absolute path issues
|
|
661
688
|
type FiberRoot = any
|
|
662
689
|
|
|
690
|
+
/** A promise tagged with its state, the protocol React's `use` reads */
|
|
691
|
+
type TrackedPromise<T> = Promise<T> &
|
|
692
|
+
({ status: 'pending' } | { status: 'fulfilled'; value: T } | { status: 'rejected'; reason: unknown })
|
|
693
|
+
|
|
663
694
|
interface Root {
|
|
664
695
|
fiber: FiberRoot
|
|
665
696
|
store: RootStore
|
|
697
|
+
state:
|
|
698
|
+
| { status: 'open' }
|
|
699
|
+
| { status: 'closing'; token: symbol; settled: Promise<void>; settle: () => void }
|
|
700
|
+
| { status: 'disposed' }
|
|
701
|
+
configuration: {
|
|
702
|
+
previous?: RenderProps<HTMLCanvasElement | OffscreenCanvas>
|
|
703
|
+
apply: (props: RenderProps<HTMLCanvasElement | OffscreenCanvas>) => void
|
|
704
|
+
}
|
|
705
|
+
/** Settles once all accepted configuration has been applied */
|
|
706
|
+
ready: TrackedPromise<unknown>
|
|
666
707
|
}
|
|
667
708
|
|
|
668
709
|
type AttachFnType<O = any> = (parent: any, self: O) => () => void
|
|
@@ -678,7 +719,7 @@ interface Catalogue {
|
|
|
678
719
|
// https://github.com/pmndrs/react-three-fiber/pull/2931
|
|
679
720
|
// https://github.com/microsoft/TypeScript/issues/37079
|
|
680
721
|
type Args<T> = T extends ConstructorRepresentation
|
|
681
|
-
? T extends typeof Color
|
|
722
|
+
? T extends typeof Color$1
|
|
682
723
|
? [r: number, g: number, b: number] | [color: ColorRepresentation]
|
|
683
724
|
: ConstructorParameters<T>
|
|
684
725
|
: any[]
|
|
@@ -706,6 +747,7 @@ interface Instance<O = any> {
|
|
|
706
747
|
handlers: Partial<EventHandlers>
|
|
707
748
|
attach?: AttachType<O>
|
|
708
749
|
previousAttach?: any
|
|
750
|
+
previousVisible: boolean | undefined
|
|
709
751
|
isHidden: boolean
|
|
710
752
|
/** Set of props that have been applied via once() */
|
|
711
753
|
appliedOnce?: Set<string>
|
|
@@ -731,6 +773,419 @@ declare global {
|
|
|
731
773
|
var IS_REACT_ACT_ENVIRONMENT: boolean | undefined
|
|
732
774
|
}
|
|
733
775
|
|
|
776
|
+
//* Base Renderer Types =====================================
|
|
777
|
+
|
|
778
|
+
// Shim for OffscreenCanvas since it was removed from DOM types
|
|
779
|
+
interface OffscreenCanvas$1 extends EventTarget {}
|
|
780
|
+
|
|
781
|
+
interface BaseRendererProps {
|
|
782
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
783
|
+
powerPreference?: 'high-performance' | 'low-power' | 'default'
|
|
784
|
+
antialias?: boolean
|
|
785
|
+
alpha?: boolean
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
type RendererFactory<TRenderer, TParams> =
|
|
789
|
+
| TRenderer
|
|
790
|
+
| ((defaultProps: TParams) => TRenderer)
|
|
791
|
+
| ((defaultProps: TParams) => Promise<TRenderer>)
|
|
792
|
+
|
|
793
|
+
interface Renderer {
|
|
794
|
+
render: (scene: THREE.Scene, camera: THREE.Camera) => any
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
//* Color Management Config ==============================
|
|
798
|
+
|
|
799
|
+
/**
|
|
800
|
+
* Color management configuration shared by both WebGL and WebGPU renderers.
|
|
801
|
+
*/
|
|
802
|
+
interface ColorManagementConfig {
|
|
803
|
+
/**
|
|
804
|
+
* Color space assigned to 8-bit input textures (color maps).
|
|
805
|
+
* Defaults to sRGB. Most textures are authored in sRGB.
|
|
806
|
+
* @default THREE.SRGBColorSpace
|
|
807
|
+
*/
|
|
808
|
+
textureColorSpace?: THREE.ColorSpace
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
//* Renderer Settings ==============================
|
|
812
|
+
|
|
813
|
+
/**
|
|
814
|
+
* Shadow map setting: `true` uses `THREE.PCFShadowMap`, a string picks a type, an object is assigned
|
|
815
|
+
* to `renderer.shadowMap`.
|
|
816
|
+
*
|
|
817
|
+
* `'soft'` is a deprecated alias of `'percentage'`: both map to `THREE.PCFShadowMap`, because three.js
|
|
818
|
+
* deprecated `PCFSoftShadowMap` and made `PCFShadowMap` soft. Using `'soft'` logs a deprecation notice.
|
|
819
|
+
* @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
|
|
820
|
+
*/
|
|
821
|
+
type ShadowsConfig = boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>
|
|
822
|
+
|
|
823
|
+
/**
|
|
824
|
+
* Renderer-wide settings R3F reads from the `renderer` / `gl` props bag. They are not renderer
|
|
825
|
+
* properties: R3F applies them itself, and only on the canvas that owns its renderer.
|
|
826
|
+
*/
|
|
827
|
+
interface RendererSettingsConfig extends ColorManagementConfig {
|
|
828
|
+
/**
|
|
829
|
+
* Enables shadows. Only on a renderer R3F builds from a props bag: a renderer instance or factory
|
|
830
|
+
* keeps the `shadowMap` you give it.
|
|
831
|
+
* @example <Canvas renderer={{ shadows: 'variance' }} />
|
|
832
|
+
*/
|
|
833
|
+
shadows?: ShadowsConfig
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
//* WebGL Renderer Props ==============================
|
|
837
|
+
|
|
838
|
+
type DefaultGLProps = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
|
|
839
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
type GLProps =
|
|
843
|
+
| Renderer
|
|
844
|
+
| ((defaultProps: DefaultGLProps) => Renderer)
|
|
845
|
+
| ((defaultProps: DefaultGLProps) => Promise<Renderer>)
|
|
846
|
+
| (Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> & RendererSettingsConfig)
|
|
847
|
+
|
|
848
|
+
//* WebGPU Renderer Props ==============================
|
|
849
|
+
|
|
850
|
+
type DefaultRendererProps = {
|
|
851
|
+
canvas: HTMLCanvasElement | OffscreenCanvas$1
|
|
852
|
+
[key: string]: any
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/**
|
|
856
|
+
* Canvas-level scheduler configuration.
|
|
857
|
+
* Controls render timing relative to other canvases.
|
|
858
|
+
*/
|
|
859
|
+
interface CanvasSchedulerConfig {
|
|
860
|
+
/**
|
|
861
|
+
* Run this Canvas root before the referenced Canvas root id(s).
|
|
862
|
+
*/
|
|
863
|
+
before?: string | string[]
|
|
864
|
+
/**
|
|
865
|
+
* Run this Canvas root after the referenced Canvas root id(s).
|
|
866
|
+
*/
|
|
867
|
+
after?: string | string[]
|
|
868
|
+
/**
|
|
869
|
+
* Numeric root order. Lower values run first.
|
|
870
|
+
*/
|
|
871
|
+
order?: number
|
|
872
|
+
/**
|
|
873
|
+
* Limit this Canvas's default render job (frames per second).
|
|
874
|
+
*/
|
|
875
|
+
fps?: number
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/**
|
|
879
|
+
* The config keys the `renderer` props bag accepts besides the renderer's own parameters and
|
|
880
|
+
* properties. Multi-canvas and scheduling are Canvas props (`primary`, `share`, `scheduler`).
|
|
881
|
+
*/
|
|
882
|
+
type RendererConfigExtended = RendererSettingsConfig
|
|
883
|
+
|
|
884
|
+
/**
|
|
885
|
+
* The `renderer` prop: opt into three's WebGPU renderer.
|
|
886
|
+
* - `true` (the `<Canvas renderer>` shorthand) or `{}`: a default `WebGPURenderer`
|
|
887
|
+
* - a props bag: constructor parameters (`antialias`, `forceWebGL`, ...) and renderer properties
|
|
888
|
+
* (`toneMapping`, ...), plus `shadows` and `textureColorSpace`
|
|
889
|
+
* - a renderer instance, or a sync/async factory receiving the default props. Structural, like
|
|
890
|
+
* the `gl` prop: anything with `render()`, so a wrapped or mocked renderer is accepted.
|
|
891
|
+
*
|
|
892
|
+
* Everything here configures a renderer this canvas owns. A canvas sharing a primary's renderer
|
|
893
|
+
* ignores a props bag (with a dev warning): renderer-wide settings come from the `<Canvas primary>`.
|
|
894
|
+
*/
|
|
895
|
+
type RendererProps =
|
|
896
|
+
| boolean
|
|
897
|
+
| Renderer
|
|
898
|
+
| ((defaultProps: DefaultRendererProps) => Renderer)
|
|
899
|
+
| ((defaultProps: DefaultRendererProps) => Promise<Renderer>)
|
|
900
|
+
| (Partial<Properties<WebGPURenderer> & WebGPURendererParameters> & RendererConfigExtended)
|
|
901
|
+
|
|
902
|
+
//* Camera Props ==============================
|
|
903
|
+
|
|
904
|
+
type CameraProps = (
|
|
905
|
+
| THREE.Camera
|
|
906
|
+
| Partial<
|
|
907
|
+
ThreeElement<typeof THREE.Camera> &
|
|
908
|
+
ThreeElement<typeof THREE.PerspectiveCamera> &
|
|
909
|
+
ThreeElement<typeof THREE.OrthographicCamera>
|
|
910
|
+
>
|
|
911
|
+
) & {
|
|
912
|
+
/** Flags the camera as manual, putting projection into your own hands */
|
|
913
|
+
manual?: boolean
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
//* Render Props ==============================
|
|
917
|
+
|
|
918
|
+
interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
|
|
919
|
+
/**
|
|
920
|
+
* Canvas id. Sets the HTML `id` attribute on the canvas element and the canvas's scheduler root
|
|
921
|
+
* id (so `scheduler={{ after: 'main' }}` can order against it). On a `<Canvas primary>` it is the
|
|
922
|
+
* name other canvases pass to `share="id"`.
|
|
923
|
+
* @example <Canvas id="main-viewer">...</Canvas>
|
|
924
|
+
*/
|
|
925
|
+
id?: string
|
|
926
|
+
/**
|
|
927
|
+
* Make this canvas the owner of a WebGPU renderer that other canvases share. Every other WebGPU
|
|
928
|
+
* canvas mounted with or after it borrows its renderer (drawing into its own element through a
|
|
929
|
+
* `CanvasTarget`) unless it passes `share={false}` or its own renderer instance/factory.
|
|
930
|
+
* Renderer-wide settings (`renderer={{ shadows, toneMapping, ... }}`) belong on the primary.
|
|
931
|
+
*
|
|
932
|
+
* WebGPU only: on the root entry `primary` selects WebGPU like the `renderer` prop does. Several
|
|
933
|
+
* primaries need distinct `id`s, and the other canvases then pick one with `share="id"`.
|
|
934
|
+
* Read when the renderer is created; changing it later needs a remount.
|
|
935
|
+
* @example <Canvas primary renderer={{ shadows: true }}>...</Canvas>
|
|
936
|
+
*/
|
|
937
|
+
primary?: boolean
|
|
938
|
+
/**
|
|
939
|
+
* Renderer sharing for a non-primary canvas (WebGPU only).
|
|
940
|
+
* - omitted: share the primary's renderer when exactly one `<Canvas primary>` is mounted, else
|
|
941
|
+
* own a renderer as usual
|
|
942
|
+
* - `"id"`: share the renderer of `<Canvas id="id" primary>`, waiting for it to mount
|
|
943
|
+
* - `false`: always own a renderer, even while a primary exists
|
|
944
|
+
*
|
|
945
|
+
* Read when the renderer is created; changing it later needs a remount.
|
|
946
|
+
* @example <Canvas share="main">...</Canvas>
|
|
947
|
+
*/
|
|
948
|
+
share?: string | false
|
|
949
|
+
/**
|
|
950
|
+
* Canvas-level scheduler options: this canvas's order relative to other canvases, and an fps cap
|
|
951
|
+
* for its default render. A canvas sharing a primary's renderer runs after the primary unless
|
|
952
|
+
* `before`/`after` are given here.
|
|
953
|
+
* @example <Canvas scheduler={{ after: 'main', fps: 30 }}>...</Canvas>
|
|
954
|
+
*/
|
|
955
|
+
scheduler?: CanvasSchedulerConfig
|
|
956
|
+
/** A threejs renderer instance or props that go into the default renderer */
|
|
957
|
+
gl?: GLProps
|
|
958
|
+
/** A WebGPU renderer instance or props that go into the default renderer */
|
|
959
|
+
renderer?: RendererProps
|
|
960
|
+
/** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
|
|
961
|
+
size?: Size
|
|
962
|
+
/** Creates an orthographic camera */
|
|
963
|
+
orthographic?: boolean
|
|
964
|
+
/**
|
|
965
|
+
* R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
|
|
966
|
+
* @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
|
|
967
|
+
*/
|
|
968
|
+
frameloop?: Frameloop
|
|
969
|
+
/**
|
|
970
|
+
* R3F performance options for adaptive performance.
|
|
971
|
+
* @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
|
|
972
|
+
*/
|
|
973
|
+
performance?: Partial<Omit<Performance, 'regress'>>
|
|
974
|
+
/** Target pixel ratio. Can clamp between a range: `[min, max]` */
|
|
975
|
+
dpr?: Dpr
|
|
976
|
+
/**
|
|
977
|
+
* Props that go into the default raycaster. `params` is merged into the raycaster's defaults,
|
|
978
|
+
* so a single threshold can be set: `raycaster={{ params: { Points: { threshold: 0.2 } } }}`.
|
|
979
|
+
*/
|
|
980
|
+
raycaster?: Partial<Omit<THREE.Raycaster, 'params'>> & { params?: Partial<THREE.RaycasterParameters> }
|
|
981
|
+
/** A `THREE.Scene` instance or props that go into the default scene */
|
|
982
|
+
scene?: THREE.Scene | Partial<THREE.Scene>
|
|
983
|
+
/** A `THREE.Camera` instance or props that go into the default camera */
|
|
984
|
+
camera?: CameraProps
|
|
985
|
+
/** An R3F event manager to manage elements' pointer events */
|
|
986
|
+
events?: (store: RootStore) => EventManager<Element>
|
|
987
|
+
/** Callback after the canvas has rendered (but not yet committed) */
|
|
988
|
+
onCreated?: (state: RootState) => void
|
|
989
|
+
/** Response for pointer clicks that have missed any target */
|
|
990
|
+
onPointerMissed?: (event: MouseEvent) => void
|
|
991
|
+
/** Response for dragover events that have missed any target */
|
|
992
|
+
onDragOverMissed?: (event: DragEvent) => void
|
|
993
|
+
/** Response for drop events that have missed any target */
|
|
994
|
+
onDropMissed?: (event: DragEvent) => void
|
|
995
|
+
/** Whether to automatically update the frustum each frame (default: true) */
|
|
996
|
+
autoUpdateFrustum?: boolean
|
|
997
|
+
/**
|
|
998
|
+
* Enable WebGPU occlusion queries for onOccluded/onVisible events.
|
|
999
|
+
* Auto-enabled when any object uses onOccluded or onVisible handlers.
|
|
1000
|
+
* Only works with WebGPU renderer - WebGL will log a warning.
|
|
1001
|
+
*/
|
|
1002
|
+
occlusion?: boolean
|
|
1003
|
+
/** Internal: stored size props from Canvas for reset functionality */
|
|
1004
|
+
_sizeProps?: { width?: number; height?: number } | null
|
|
1005
|
+
/**
|
|
1006
|
+
* Internal: the token a Canvas announced `primary` with before this root existed, so configure
|
|
1007
|
+
* continues that announcement instead of starting a second one.
|
|
1008
|
+
* @internal
|
|
1009
|
+
*/
|
|
1010
|
+
_primaryToken?: object
|
|
1011
|
+
/** Force canvas dimensions to even numbers (fixes Safari rendering issues with odd/fractional sizes) */
|
|
1012
|
+
forceEven?: boolean
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
//* Reconciler Root ==============================
|
|
1016
|
+
|
|
1017
|
+
interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas$1> {
|
|
1018
|
+
ready: TrackedPromise<unknown>
|
|
1019
|
+
configure: (config?: RenderProps<TCanvas>) => TrackedPromise<ReconcilerRoot<TCanvas>>
|
|
1020
|
+
render: (element: ReactNode) => RootStore
|
|
1021
|
+
unmount: () => void
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
//* Inject State ==============================
|
|
1025
|
+
|
|
1026
|
+
type InjectState = Partial<
|
|
1027
|
+
Omit<RootState, 'events'> & {
|
|
1028
|
+
events?: {
|
|
1029
|
+
enabled?: boolean
|
|
1030
|
+
priority?: number
|
|
1031
|
+
compute?: ComputeFunction
|
|
1032
|
+
connected?: any
|
|
1033
|
+
}
|
|
1034
|
+
/**
|
|
1035
|
+
* When true (default), injects a THREE.Scene between container and children if container isn't already a Scene.
|
|
1036
|
+
* This ensures state.scene is always a real THREE.Scene with proper properties (background, environment, fog).
|
|
1037
|
+
* Set to false to use the container directly as scene (anti-pattern, but supported for edge cases).
|
|
1038
|
+
*/
|
|
1039
|
+
injectScene?: boolean
|
|
1040
|
+
}
|
|
1041
|
+
>
|
|
1042
|
+
|
|
1043
|
+
type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>
|
|
1044
|
+
|
|
1045
|
+
interface MathRepresentation {
|
|
1046
|
+
set(...args: number[]): any
|
|
1047
|
+
}
|
|
1048
|
+
interface VectorRepresentation extends MathRepresentation {
|
|
1049
|
+
setScalar(value: number): any
|
|
1050
|
+
}
|
|
1051
|
+
type MathTypes = MathRepresentation | THREE.Euler | THREE.Color
|
|
1052
|
+
|
|
1053
|
+
type MathType<T extends MathTypes> = T extends THREE.Color
|
|
1054
|
+
? Args<typeof THREE.Color> | THREE.ColorRepresentation
|
|
1055
|
+
: T extends VectorRepresentation | THREE.Layers | THREE.Euler
|
|
1056
|
+
? T | MutableOrReadonlyParameters<T['set']> | number
|
|
1057
|
+
: T | MutableOrReadonlyParameters<T['set']>
|
|
1058
|
+
|
|
1059
|
+
type MathProps<P> = {
|
|
1060
|
+
[K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
type Vector2 = MathType<THREE.Vector2>
|
|
1064
|
+
type Vector3 = MathType<THREE.Vector3>
|
|
1065
|
+
type Vector4 = MathType<THREE.Vector4>
|
|
1066
|
+
type Color = MathType<THREE.Color>
|
|
1067
|
+
type Layers = MathType<THREE.Layers>
|
|
1068
|
+
type Quaternion = MathType<THREE.Quaternion>
|
|
1069
|
+
type Euler = MathType<THREE.Euler>
|
|
1070
|
+
type Matrix3 = MathType<THREE.Matrix3>
|
|
1071
|
+
type Matrix4 = MathType<THREE.Matrix4>
|
|
1072
|
+
|
|
1073
|
+
interface RaycastableRepresentation {
|
|
1074
|
+
raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void
|
|
1075
|
+
}
|
|
1076
|
+
type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {}
|
|
1077
|
+
|
|
1078
|
+
/**
|
|
1079
|
+
* Props for geometry transform methods that can be called with `once()`.
|
|
1080
|
+
* These methods modify the geometry in-place and only make sense to call once on mount.
|
|
1081
|
+
*
|
|
1082
|
+
* @example
|
|
1083
|
+
* import { once } from '@react-three/fiber'
|
|
1084
|
+
*
|
|
1085
|
+
* <boxGeometry args={[1, 1, 1]} rotateX={once(Math.PI / 2)} />
|
|
1086
|
+
* <planeGeometry args={[10, 10]} translate={once(0, 0, 5)} />
|
|
1087
|
+
* <bufferGeometry applyMatrix4={once(matrix)} center={once()} />
|
|
1088
|
+
*/
|
|
1089
|
+
interface GeometryTransformProps {
|
|
1090
|
+
/** Rotate the geometry about the X axis (radians). Use with once(). */
|
|
1091
|
+
rotateX?: number
|
|
1092
|
+
/** Rotate the geometry about the Y axis (radians). Use with once(). */
|
|
1093
|
+
rotateY?: number
|
|
1094
|
+
/** Rotate the geometry about the Z axis (radians). Use with once(). */
|
|
1095
|
+
rotateZ?: number
|
|
1096
|
+
/** Translate the geometry (x, y, z). Use with once(). */
|
|
1097
|
+
translate?: [x: number, y: number, z: number]
|
|
1098
|
+
/** Scale the geometry (x, y, z). Use with once(). */
|
|
1099
|
+
scale?: [x: number, y: number, z: number]
|
|
1100
|
+
/** Center the geometry based on bounding box. Use with once(). */
|
|
1101
|
+
center?: true
|
|
1102
|
+
/** Apply a Matrix4 transformation. Use with once(). */
|
|
1103
|
+
applyMatrix4?: THREE.Matrix4
|
|
1104
|
+
/** Apply a Quaternion rotation. Use with once(). */
|
|
1105
|
+
applyQuaternion?: THREE.Quaternion
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
type GeometryProps<P> = P extends THREE.BufferGeometry ? GeometryTransformProps : {}
|
|
1109
|
+
|
|
1110
|
+
/**
|
|
1111
|
+
* Workaround for @types/three TSL node type issues.
|
|
1112
|
+
* The Node base class has properties that subclasses (OperatorNode, ConstNode, etc.) don't inherit.
|
|
1113
|
+
* This transforms `Node | null` properties to accept any object with node-like shape.
|
|
1114
|
+
*/
|
|
1115
|
+
type TSLNodeInput = { nodeType?: string | null; uuid?: string } | null
|
|
1116
|
+
|
|
1117
|
+
/**
|
|
1118
|
+
* For node material properties (colorNode, positionNode, etc.), accept broader types
|
|
1119
|
+
* since @types/three has broken inheritance for TSL node subclasses. NodeClass requires
|
|
1120
|
+
* `nodeType`, so this structural key test remains neutral to the selected Three entry.
|
|
1121
|
+
*/
|
|
1122
|
+
type NodeProps<P> = {
|
|
1123
|
+
[K in keyof P as NonNullable<P[K]> extends { nodeType: string | null } ? K : never]?: TSLNodeInput
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
interface ReactProps<P> {
|
|
1127
|
+
children?: React.ReactNode
|
|
1128
|
+
ref?: React.Ref<P>
|
|
1129
|
+
key?: React.Key
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<
|
|
1133
|
+
Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P> & GeometryProps<P> & NodeProps<P>>
|
|
1134
|
+
>
|
|
1135
|
+
|
|
1136
|
+
type ThreeElement<T extends ConstructorRepresentation> = Mutable<
|
|
1137
|
+
Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>
|
|
1138
|
+
>
|
|
1139
|
+
|
|
1140
|
+
/**
|
|
1141
|
+
* Every constructor export of a three namespace as an uncapitalized JSX element. Non-constructor
|
|
1142
|
+
* exports (constants, functions, nested namespaces) are dropped from the keys rather than mapped
|
|
1143
|
+
* to `never`: a single `never`-valued key in `JSX.IntrinsicElements` collapses the props of any
|
|
1144
|
+
* tag typed `React.ElementType` (#3898).
|
|
1145
|
+
*/
|
|
1146
|
+
type ThreeToJSXElements<T extends Record<string, any>> = {
|
|
1147
|
+
[K in keyof T & string as T[K] extends ConstructorRepresentation ? Uncapitalize<K> : never]: ThreeElement<T[K]>
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
/** Method names of Object3D, excluded from the `primitive` element's typed props. */
|
|
1151
|
+
type Object3DMethod = NonNullable<
|
|
1152
|
+
{
|
|
1153
|
+
[K in keyof THREE.Object3D]-?: THREE.Object3D[K] extends (...args: any[]) => any ? K : never
|
|
1154
|
+
}[keyof THREE.Object3D]
|
|
1155
|
+
>
|
|
1156
|
+
|
|
1157
|
+
/** Look up a key present in a generic element map. */
|
|
1158
|
+
type ElementOf<E, K extends string> = E[Extract<keyof E, K>]
|
|
1159
|
+
|
|
1160
|
+
/**
|
|
1161
|
+
* The JSX element map derived from an entry's Three.js exports. Each entry declares its own
|
|
1162
|
+
* `ThreeElements` from this (`src/index.tsx`, `src/legacy.tsx`, `src/webgpu/index.tsx`) and augments
|
|
1163
|
+
* react's `IntrinsicElements` with it, so `/legacy` never advertises node materials and `/webgpu`
|
|
1164
|
+
* never advertises a `<webGLRenderer>`.
|
|
1165
|
+
*/
|
|
1166
|
+
type ThreeElementsOf<T extends Record<string, any>> = Omit<
|
|
1167
|
+
ThreeToJSXElements<T>,
|
|
1168
|
+
'audio' | 'source' | 'line' | 'path'
|
|
1169
|
+
> & {
|
|
1170
|
+
/**
|
|
1171
|
+
* `primitive` wraps a pre-existing object, so its props cannot be derived from one class.
|
|
1172
|
+
* Events are typed from `EventHandlers` (`onClick={(e) => ...}` infers `e`), the ref is
|
|
1173
|
+
* untyped, and any other prop is accepted and applied to the object by name. Object3D's own
|
|
1174
|
+
* methods are left out of the typed surface: they return `this`, so a subclass element's
|
|
1175
|
+
* props (`ThreeElements['group']`) could not be spread onto a primitive otherwise.
|
|
1176
|
+
*/
|
|
1177
|
+
primitive: Omit<ThreeElement<typeof THREE.Object3D>, 'args' | 'object' | 'ref' | Object3DMethod> & {
|
|
1178
|
+
object: object
|
|
1179
|
+
ref?: React.Ref<any>
|
|
1180
|
+
[prop: string]: unknown
|
|
1181
|
+
}
|
|
1182
|
+
// Conflicts with DOM types can be accessed through a three* prefix
|
|
1183
|
+
threeAudio: ElementOf<ThreeToJSXElements<T>, 'audio'>
|
|
1184
|
+
threeSource: ElementOf<ThreeToJSXElements<T>, 'source'>
|
|
1185
|
+
threeLine: ElementOf<ThreeToJSXElements<T>, 'line'>
|
|
1186
|
+
threePath: ElementOf<ThreeToJSXElements<T>, 'path'>
|
|
1187
|
+
}
|
|
1188
|
+
|
|
734
1189
|
interface RootExtension {
|
|
735
1190
|
/** Unique name. Registering the same name again replaces the entry (HMR-safe); roots it already
|
|
736
1191
|
* set up are not set up a second time, but get the new entry's dispose and hmr. */
|
|
@@ -772,7 +1227,14 @@ declare function useStore(): RootStore;
|
|
|
772
1227
|
*/
|
|
773
1228
|
declare function useThree<T = RootState>(selector?: (state: RootState) => T, equalityFn?: <T>(state: T, newState: T) => boolean): T;
|
|
774
1229
|
|
|
775
|
-
|
|
1230
|
+
/**
|
|
1231
|
+
* React context that carries the current root's {@link RootStore}. Each root provides its store and
|
|
1232
|
+
* each portal provides its own scoped one; `useStore`, and every hook built on it, reads it.
|
|
1233
|
+
*
|
|
1234
|
+
* Stored on `globalThis` under `Symbol.for('@react-three/fiber.context')`, so every copy and entry
|
|
1235
|
+
* of fiber shares a single context.
|
|
1236
|
+
*/
|
|
1237
|
+
declare const context: React$1.Context<RootStore>;
|
|
776
1238
|
|
|
777
|
-
export { useStore as
|
|
778
|
-
export type {
|
|
1239
|
+
export { useStore as a$, useThree as b0, registerRootExtension as t, setRenderOverride as u, context as w };
|
|
1240
|
+
export type { EventHandlers as $, RenderCallback as A, Performance as B, Color as C, Dpr as D, Euler as E, Frameloop as F, GeometryTransformProps as G, RootState as H, InternalState as I, RootStore as J, Intersection as K, Layers as L, MutableOrReadonlyParameters as M, NodeProps as N, Object3DMethod as O, PointerState as P, Quaternion as Q, RaycastableRepresentation as R, Subscription as S, TSLNodeInput as T, Camera as U, VectorRepresentation as V, IntersectionEvent as W, XRManager as X, ThreeEvent as Y, DomEvent as Z, Events as _, MathRepresentation as a, FilterFunction as a0, ComputeFunction as a1, XRPointerConfig as a2, EventManager as a3, PointerCaptureTarget as a4, VisibilityEntry as a5, OffscreenCanvas$1 as a6, BaseRendererProps as a7, RendererFactory as a8, Renderer as a9, Mutable as aA, IsOptional as aB, IsAllOptional as aC, ThreeCamera as aD, Act as aE, Bridge as aF, SetBlock as aG, UnblockProps as aH, ObjectMap as aI, EquConfig as aJ, Disposable as aK, FrameNextState as aL, FrameState as aM, FrameNextCallback as aN, FrameCallback as aO, ThreeNamespace as aP, ThreeCore as aQ, OcclusionSupport as aR, WebGLSupport as aS, WebGPUSupport as aT, RendererSupport as aU, RendererProvider as aV, Register as aW, RegisteredRenderer as aX, ForRegisteredRenderer as aY, R3FRenderTarget as aZ, R3FRendererSupport as a_, ColorManagementConfig as aa, ShadowsConfig as ab, RendererSettingsConfig as ac, DefaultGLProps as ad, GLProps as ae, DefaultRendererProps as af, CanvasSchedulerConfig as ag, RendererConfigExtended as ah, RendererProps as ai, CameraProps as aj, RenderProps as ak, InjectState as al, FiberRoot as am, TrackedPromise as an, Root as ao, AttachFnType as ap, AttachType as aq, Catalogue as ar, Args as as, ArgsProp as at, InstanceProps as au, Instance as av, HostConfig as aw, NonFunctionKeys as ax, Overwrite as ay, Properties as az, MathTypes as b, MathType as c, MathProps as d, Vector2 as e, Vector3 as f, Vector4 as g, Matrix3 as h, Matrix4 as i, EventProps as j, GeometryProps as k, ReactProps as l, ConstructorRepresentation as m, ElementProps as n, ThreeElement as o, ThreeToJSXElements as p, ThreeElementsOf as q, ElementOf as r, ReconcilerRoot as s, RootExtension as v, R3FRenderer as x, Size as y, Viewport as z };
|