@react-three/fiber 8.17.5 → 8.17.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +1046 -1034
  2. package/dist/declarations/src/core/events.d.ts +93 -93
  3. package/dist/declarations/src/core/hooks.d.ts +57 -57
  4. package/dist/declarations/src/core/index.d.ts +94 -94
  5. package/dist/declarations/src/core/loop.d.ts +38 -38
  6. package/dist/declarations/src/core/renderer.d.ts +58 -58
  7. package/dist/declarations/src/core/store.d.ts +138 -138
  8. package/dist/declarations/src/core/utils.d.ts +134 -134
  9. package/dist/declarations/src/index.d.ts +12 -12
  10. package/dist/declarations/src/native/Canvas.d.ts +14 -14
  11. package/dist/declarations/src/native/events.d.ts +5 -5
  12. package/dist/declarations/src/native/polyfills.d.ts +1 -1
  13. package/dist/declarations/src/native.d.ts +13 -13
  14. package/dist/declarations/src/three-types.d.ts +396 -393
  15. package/dist/declarations/src/web/Canvas.d.ts +24 -24
  16. package/dist/declarations/src/web/events.d.ts +5 -5
  17. package/dist/declarations/src/web/use-measure.d.ts +34 -34
  18. package/dist/{events-be1682bd.cjs.prod.js → events-2e7e6eab.cjs.prod.js} +76 -76
  19. package/dist/{events-a5fc3e51.esm.js → events-3515660a.esm.js} +76 -76
  20. package/dist/{events-66f43fbc.cjs.dev.js → events-c54ce65e.cjs.dev.js} +76 -76
  21. package/dist/react-three-fiber.cjs.dev.js +4 -4
  22. package/dist/react-three-fiber.cjs.prod.js +4 -4
  23. package/dist/react-three-fiber.esm.js +5 -5
  24. package/native/dist/react-three-fiber-native.cjs.dev.js +15 -19
  25. package/native/dist/react-three-fiber-native.cjs.prod.js +15 -19
  26. package/native/dist/react-three-fiber-native.esm.js +16 -20
  27. package/native/package.json +5 -5
  28. package/package.json +1 -1
  29. package/readme.md +253 -253
@@ -1,93 +1,93 @@
1
- import * as THREE from 'three';
2
- import type { UseBoundStore } from 'zustand';
3
- import type { RootState } from './store';
4
- import type { Properties } from '../three-types';
5
- export interface Intersection extends THREE.Intersection {
6
- /** The event source (the object which registered the handler) */
7
- eventObject: THREE.Object3D;
8
- }
9
- export interface IntersectionEvent<TSourceEvent> extends Intersection {
10
- /** The event source (the object which registered the handler) */
11
- eventObject: THREE.Object3D;
12
- /** An array of intersections */
13
- intersections: Intersection[];
14
- /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
15
- unprojectedPoint: THREE.Vector3;
16
- /** Normalized event coordinates */
17
- pointer: THREE.Vector2;
18
- /** Delta between first click and this event */
19
- delta: number;
20
- /** The ray that pierced it */
21
- ray: THREE.Ray;
22
- /** The camera that was used by the raycaster */
23
- camera: Camera;
24
- /** stopPropagation will stop underlying handlers from firing */
25
- stopPropagation: () => void;
26
- /** The original host event */
27
- nativeEvent: TSourceEvent;
28
- /** If the event was stopped by calling stopPropagation */
29
- stopped: boolean;
30
- }
31
- export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
32
- export declare type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>;
33
- export declare type DomEvent = PointerEvent | MouseEvent | WheelEvent;
34
- export declare type Events = {
35
- onClick: EventListener;
36
- onContextMenu: EventListener;
37
- onDoubleClick: EventListener;
38
- onWheel: EventListener;
39
- onPointerDown: EventListener;
40
- onPointerUp: EventListener;
41
- onPointerLeave: EventListener;
42
- onPointerMove: EventListener;
43
- onPointerCancel: EventListener;
44
- onLostPointerCapture: EventListener;
45
- };
46
- export declare type EventHandlers = {
47
- onClick?: (event: ThreeEvent<MouseEvent>) => void;
48
- onContextMenu?: (event: ThreeEvent<MouseEvent>) => void;
49
- onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void;
50
- onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
51
- onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
52
- onPointerOver?: (event: ThreeEvent<PointerEvent>) => void;
53
- onPointerOut?: (event: ThreeEvent<PointerEvent>) => void;
54
- onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
55
- onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
56
- onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
57
- onPointerMissed?: (event: MouseEvent) => void;
58
- onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
59
- onWheel?: (event: ThreeEvent<WheelEvent>) => void;
60
- };
61
- export declare type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
62
- export declare type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;
63
- export interface EventManager<TTarget> {
64
- /** Determines if the event layer is active */
65
- enabled: boolean;
66
- /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer */
67
- priority: number;
68
- /** The compute function needs to set up the raycaster and an xy- pointer */
69
- compute?: ComputeFunction;
70
- /** The filter can re-order or re-structure the intersections */
71
- filter?: FilterFunction;
72
- /** The target node the event layer is tied to */
73
- connected?: TTarget;
74
- /** All the pointer event handlers through which the host forwards native events */
75
- handlers?: Events;
76
- /** Allows re-connecting to another target */
77
- connect?: (target: TTarget) => void;
78
- /** Removes all existing events handlers from the target */
79
- disconnect?: () => void;
80
- /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
81
- * explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
82
- */
83
- update?: () => void;
84
- }
85
- export interface PointerCaptureTarget {
86
- intersection: Intersection;
87
- target: Element;
88
- }
89
- export declare function getEventPriority(): 1 | 16 | 4;
90
- export declare function removeInteractivity(store: UseBoundStore<RootState>, object: THREE.Object3D): void;
91
- export declare function createEvents(store: UseBoundStore<RootState>): {
92
- handlePointer: (name: string) => (event: DomEvent) => void;
93
- };
1
+ import * as THREE from 'three';
2
+ import type { UseBoundStore } from 'zustand';
3
+ import type { RootState } from './store';
4
+ import type { Properties } from '../three-types';
5
+ export interface Intersection extends THREE.Intersection {
6
+ /** The event source (the object which registered the handler) */
7
+ eventObject: THREE.Object3D;
8
+ }
9
+ export interface IntersectionEvent<TSourceEvent> extends Intersection {
10
+ /** The event source (the object which registered the handler) */
11
+ eventObject: THREE.Object3D;
12
+ /** An array of intersections */
13
+ intersections: Intersection[];
14
+ /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
15
+ unprojectedPoint: THREE.Vector3;
16
+ /** Normalized event coordinates */
17
+ pointer: THREE.Vector2;
18
+ /** Delta between first click and this event */
19
+ delta: number;
20
+ /** The ray that pierced it */
21
+ ray: THREE.Ray;
22
+ /** The camera that was used by the raycaster */
23
+ camera: Camera;
24
+ /** stopPropagation will stop underlying handlers from firing */
25
+ stopPropagation: () => void;
26
+ /** The original host event */
27
+ nativeEvent: TSourceEvent;
28
+ /** If the event was stopped by calling stopPropagation */
29
+ stopped: boolean;
30
+ }
31
+ export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
32
+ export declare type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>;
33
+ export declare type DomEvent = PointerEvent | MouseEvent | WheelEvent;
34
+ export declare type Events = {
35
+ onClick: EventListener;
36
+ onContextMenu: EventListener;
37
+ onDoubleClick: EventListener;
38
+ onWheel: EventListener;
39
+ onPointerDown: EventListener;
40
+ onPointerUp: EventListener;
41
+ onPointerLeave: EventListener;
42
+ onPointerMove: EventListener;
43
+ onPointerCancel: EventListener;
44
+ onLostPointerCapture: EventListener;
45
+ };
46
+ export declare type EventHandlers = {
47
+ onClick?: (event: ThreeEvent<MouseEvent>) => void;
48
+ onContextMenu?: (event: ThreeEvent<MouseEvent>) => void;
49
+ onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void;
50
+ onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
51
+ onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
52
+ onPointerOver?: (event: ThreeEvent<PointerEvent>) => void;
53
+ onPointerOut?: (event: ThreeEvent<PointerEvent>) => void;
54
+ onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
55
+ onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
56
+ onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
57
+ onPointerMissed?: (event: MouseEvent) => void;
58
+ onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
59
+ onWheel?: (event: ThreeEvent<WheelEvent>) => void;
60
+ };
61
+ export declare type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
62
+ export declare type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;
63
+ export interface EventManager<TTarget> {
64
+ /** Determines if the event layer is active */
65
+ enabled: boolean;
66
+ /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer */
67
+ priority: number;
68
+ /** The compute function needs to set up the raycaster and an xy- pointer */
69
+ compute?: ComputeFunction;
70
+ /** The filter can re-order or re-structure the intersections */
71
+ filter?: FilterFunction;
72
+ /** The target node the event layer is tied to */
73
+ connected?: TTarget;
74
+ /** All the pointer event handlers through which the host forwards native events */
75
+ handlers?: Events;
76
+ /** Allows re-connecting to another target */
77
+ connect?: (target: TTarget) => void;
78
+ /** Removes all existing events handlers from the target */
79
+ disconnect?: () => void;
80
+ /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
81
+ * explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
82
+ */
83
+ update?: () => void;
84
+ }
85
+ export interface PointerCaptureTarget {
86
+ intersection: Intersection;
87
+ target: Element;
88
+ }
89
+ export declare function getEventPriority(): 1 | 16 | 4;
90
+ export declare function removeInteractivity(store: UseBoundStore<RootState>, object: THREE.Object3D): void;
91
+ export declare function createEvents(store: UseBoundStore<RootState>): {
92
+ handlePointer: (name: string) => (event: DomEvent) => void;
93
+ };
@@ -1,57 +1,57 @@
1
- import * as THREE from 'three';
2
- import * as React from 'react';
3
- import { StateSelector, EqualityChecker } from 'zustand';
4
- import { RootState, RenderCallback } from './store';
5
- import { ObjectMap } from './utils';
6
- import { LocalState } from './renderer';
7
- export interface Loader<T> extends THREE.Loader {
8
- load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
9
- loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
10
- }
11
- export declare type LoaderProto<T> = new (...args: any) => Loader<T extends unknown ? any : T>;
12
- export declare type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
13
- export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
14
- export declare type Extensions<T extends {
15
- prototype: LoaderProto<any>;
16
- }> = (loader: T['prototype']) => void;
17
- export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
18
- export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
19
- /**
20
- * Exposes an object's {@link LocalState}.
21
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
22
- *
23
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
24
- */
25
- export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<LocalState>;
26
- export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
27
- /**
28
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
29
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
30
- */
31
- export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
32
- /**
33
- * Executes a callback before render in a shared frame loop.
34
- * Can order effects with render priority or manually render with a positive priority.
35
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
36
- */
37
- export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
38
- /**
39
- * Returns a node graph of an object with named nodes & materials.
40
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
41
- */
42
- export declare function useGraph(object: THREE.Object3D): ObjectMap;
43
- declare type GLTFLike = {
44
- scene: THREE.Object3D;
45
- };
46
- /**
47
- * Synchronously loads and caches assets with a three loader.
48
- *
49
- * Note: this hook's caller must be wrapped with `React.Suspense`
50
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
51
- */
52
- export declare function useLoader<T, U extends string | string[], L extends LoaderProto<T>, R = LoaderReturnType<T, L>>(Proto: L, input: U, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<R, GLTFLike, R & ObjectMap>[] : BranchingReturn<R, GLTFLike, R & ObjectMap>;
53
- export declare namespace useLoader {
54
- var preload: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U, extensions?: Extensions<L> | undefined) => undefined;
55
- var clear: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U) => void;
56
- }
57
- export {};
1
+ import * as THREE from 'three';
2
+ import * as React from 'react';
3
+ import { StateSelector, EqualityChecker } from 'zustand';
4
+ import { RootState, RenderCallback } from './store';
5
+ import { ObjectMap } from './utils';
6
+ import { LocalState } from './renderer';
7
+ export interface Loader<T> extends THREE.Loader {
8
+ load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
9
+ loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
10
+ }
11
+ export declare type LoaderProto<T> = new (...args: any) => Loader<T extends unknown ? any : T>;
12
+ export declare type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
13
+ export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
14
+ export declare type Extensions<T extends {
15
+ prototype: LoaderProto<any>;
16
+ }> = (loader: T['prototype']) => void;
17
+ export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
18
+ export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
19
+ /**
20
+ * Exposes an object's {@link LocalState}.
21
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
22
+ *
23
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
24
+ */
25
+ export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<LocalState>;
26
+ export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
27
+ /**
28
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
29
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
30
+ */
31
+ export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
32
+ /**
33
+ * Executes a callback before render in a shared frame loop.
34
+ * Can order effects with render priority or manually render with a positive priority.
35
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
36
+ */
37
+ export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
38
+ /**
39
+ * Returns a node graph of an object with named nodes & materials.
40
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
41
+ */
42
+ export declare function useGraph(object: THREE.Object3D): ObjectMap;
43
+ declare type GLTFLike = {
44
+ scene: THREE.Object3D;
45
+ };
46
+ /**
47
+ * Synchronously loads and caches assets with a three loader.
48
+ *
49
+ * Note: this hook's caller must be wrapped with `React.Suspense`
50
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
51
+ */
52
+ export declare function useLoader<T, U extends string | string[], L extends LoaderProto<T>, R = LoaderReturnType<T, L>>(Proto: L, input: U, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<R, GLTFLike, R & ObjectMap>[] : BranchingReturn<R, GLTFLike, R & ObjectMap>;
53
+ export declare namespace useLoader {
54
+ var preload: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U, extensions?: Extensions<L> | undefined) => undefined;
55
+ var clear: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U) => void;
56
+ }
57
+ export {};
@@ -1,94 +1,94 @@
1
- /// <reference types="offscreencanvas" />
2
- import * as THREE from 'three';
3
- import * as React from 'react';
4
- import { UseBoundStore } from 'zustand';
5
- import * as ReactThreeFiber from '../three-types';
6
- import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys } from './store';
7
- import { extend, Root } from './renderer';
8
- import { addEffect, addAfterEffect, addTail, flushGlobalEffects, Invalidate, Advance } from './loop';
9
- import { EventManager, ComputeFunction } from './events';
10
- import { dispose, getRootState, Camera, buildGraph } from './utils';
11
- import type { Properties } from '../three-types';
12
- declare type Canvas = HTMLCanvasElement | OffscreenCanvas;
13
- declare const roots: Map<Canvas, Root>;
14
- declare const invalidate: Invalidate, advance: Advance;
15
- declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, import("./renderer").Instance, void, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
16
- declare type GLProps = Renderer | ((canvas: Canvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
17
- export declare type RenderProps<TCanvas extends Canvas> = {
18
- /** A threejs renderer instance or props that go into the default renderer */
19
- gl?: GLProps;
20
- /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
21
- size?: Size;
22
- /**
23
- * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
24
- * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
25
- * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
26
- */
27
- shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
28
- /**
29
- * Disables three r139 color management.
30
- * @see https://threejs.org/docs/#manual/en/introduction/Color-management
31
- */
32
- legacy?: boolean;
33
- /** Switch off automatic sRGB color space and gamma correction */
34
- linear?: boolean;
35
- /** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
36
- flat?: boolean;
37
- /** Creates an orthographic camera */
38
- orthographic?: boolean;
39
- /**
40
- * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
41
- * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
42
- */
43
- frameloop?: 'always' | 'demand' | 'never';
44
- /**
45
- * R3F performance options for adaptive performance.
46
- * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
47
- */
48
- performance?: Partial<Omit<Performance, 'regress'>>;
49
- /** Target pixel ratio. Can clamp between a range: `[min, max]` */
50
- dpr?: Dpr;
51
- /** Props that go into the default raycaster */
52
- raycaster?: Partial<THREE.Raycaster>;
53
- /** A `THREE.Scene` instance or props that go into the default scene */
54
- scene?: THREE.Scene | Partial<ReactThreeFiber.Object3DNode<THREE.Scene, typeof THREE.Scene>>;
55
- /** A `THREE.Camera` instance or props that go into the default camera */
56
- camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
57
- /** Flags the camera as manual, putting projection into your own hands */
58
- manual?: boolean;
59
- };
60
- /** An R3F event manager to manage elements' pointer events */
61
- events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
62
- /** Callback after the canvas has rendered (but not yet committed) */
63
- onCreated?: (state: RootState) => void;
64
- /** Response for pointer clicks that have missed any target */
65
- onPointerMissed?: (event: MouseEvent) => void;
66
- };
67
- export declare type ReconcilerRoot<TCanvas extends Canvas> = {
68
- configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
69
- render: (element: React.ReactNode) => UseBoundStore<RootState>;
70
- unmount: () => void;
71
- };
72
- declare function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
73
- declare function render<TCanvas extends Canvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
74
- declare function unmountComponentAtNode<TCanvas extends Canvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
75
- export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
76
- events?: {
77
- enabled?: boolean;
78
- priority?: number;
79
- compute?: ComputeFunction;
80
- connected?: any;
81
- };
82
- size?: Size;
83
- }>;
84
- declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
85
- /**
86
- * Force React to flush any updates inside the provided callback synchronously and immediately.
87
- * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
88
- * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
89
- * having to revert to a non-React solution.
90
- */
91
- declare function flushSync<R>(fn: () => R): R;
92
- declare const act: any;
93
- export * from './hooks';
94
- export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, flushGlobalEffects, flushSync, getRootState, act, buildGraph, roots as _roots, };
1
+ /// <reference types="offscreencanvas" />
2
+ import * as THREE from 'three';
3
+ import * as React from 'react';
4
+ import { UseBoundStore } from 'zustand';
5
+ import * as ReactThreeFiber from '../three-types';
6
+ import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys } from './store';
7
+ import { extend, Root } from './renderer';
8
+ import { addEffect, addAfterEffect, addTail, flushGlobalEffects, Invalidate, Advance } from './loop';
9
+ import { EventManager, ComputeFunction } from './events';
10
+ import { dispose, getRootState, Camera, buildGraph } from './utils';
11
+ import type { Properties } from '../three-types';
12
+ declare type Canvas = HTMLCanvasElement | OffscreenCanvas;
13
+ declare const roots: Map<Canvas, Root>;
14
+ declare const invalidate: Invalidate, advance: Advance;
15
+ declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, import("./renderer").Instance, void, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
16
+ declare type GLProps = Renderer | ((canvas: Canvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
17
+ export declare type RenderProps<TCanvas extends Canvas> = {
18
+ /** A threejs renderer instance or props that go into the default renderer */
19
+ gl?: GLProps;
20
+ /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
21
+ size?: Size;
22
+ /**
23
+ * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
24
+ * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
25
+ * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
26
+ */
27
+ shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
28
+ /**
29
+ * Disables three r139 color management.
30
+ * @see https://threejs.org/docs/#manual/en/introduction/Color-management
31
+ */
32
+ legacy?: boolean;
33
+ /** Switch off automatic sRGB color space and gamma correction */
34
+ linear?: boolean;
35
+ /** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
36
+ flat?: boolean;
37
+ /** Creates an orthographic camera */
38
+ orthographic?: boolean;
39
+ /**
40
+ * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
41
+ * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
42
+ */
43
+ frameloop?: 'always' | 'demand' | 'never';
44
+ /**
45
+ * R3F performance options for adaptive performance.
46
+ * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
47
+ */
48
+ performance?: Partial<Omit<Performance, 'regress'>>;
49
+ /** Target pixel ratio. Can clamp between a range: `[min, max]` */
50
+ dpr?: Dpr;
51
+ /** Props that go into the default raycaster */
52
+ raycaster?: Partial<THREE.Raycaster>;
53
+ /** A `THREE.Scene` instance or props that go into the default scene */
54
+ scene?: THREE.Scene | Partial<ReactThreeFiber.Object3DNode<THREE.Scene, typeof THREE.Scene>>;
55
+ /** A `THREE.Camera` instance or props that go into the default camera */
56
+ camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
57
+ /** Flags the camera as manual, putting projection into your own hands */
58
+ manual?: boolean;
59
+ };
60
+ /** An R3F event manager to manage elements' pointer events */
61
+ events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
62
+ /** Callback after the canvas has rendered (but not yet committed) */
63
+ onCreated?: (state: RootState) => void;
64
+ /** Response for pointer clicks that have missed any target */
65
+ onPointerMissed?: (event: MouseEvent) => void;
66
+ };
67
+ export declare type ReconcilerRoot<TCanvas extends Canvas> = {
68
+ configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
69
+ render: (element: React.ReactNode) => UseBoundStore<RootState>;
70
+ unmount: () => void;
71
+ };
72
+ declare function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
73
+ declare function render<TCanvas extends Canvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
74
+ declare function unmountComponentAtNode<TCanvas extends Canvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
75
+ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
76
+ events?: {
77
+ enabled?: boolean;
78
+ priority?: number;
79
+ compute?: ComputeFunction;
80
+ connected?: any;
81
+ };
82
+ size?: Size;
83
+ }>;
84
+ declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
85
+ /**
86
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
87
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
88
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
89
+ * having to revert to a non-React solution.
90
+ */
91
+ declare function flushSync<R>(fn: () => R): R;
92
+ declare const act: any;
93
+ export * from './hooks';
94
+ export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, flushGlobalEffects, flushSync, getRootState, act, buildGraph, roots as _roots, };
@@ -1,38 +1,38 @@
1
- import { Root } from './renderer';
2
- import { RootState } from './store';
3
- import { _XRFrame } from './utils';
4
- export declare type GlobalRenderCallback = (timeStamp: number) => void;
5
- /**
6
- * Adds a global render callback which is called each frame.
7
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
8
- */
9
- export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
10
- /**
11
- * Adds a global after-render callback which is called each frame.
12
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
13
- */
14
- export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
15
- /**
16
- * Adds a global callback which is called when rendering stops.
17
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
18
- */
19
- export declare const addTail: (callback: GlobalRenderCallback) => () => void;
20
- export declare type GlobalEffectType = 'before' | 'after' | 'tail';
21
- export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
22
- export declare type Invalidate = (state?: RootState, frames?: number) => void;
23
- export declare type Advance = (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: _XRFrame) => void;
24
- interface Loop {
25
- loop: (timestamp: number) => void;
26
- /**
27
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
28
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
29
- */
30
- invalidate: Invalidate;
31
- /**
32
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
33
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
34
- */
35
- advance: Advance;
36
- }
37
- export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): Loop;
38
- export {};
1
+ import { Root } from './renderer';
2
+ import { RootState } from './store';
3
+ import { _XRFrame } from './utils';
4
+ export declare type GlobalRenderCallback = (timeStamp: number) => void;
5
+ /**
6
+ * Adds a global render callback which is called each frame.
7
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
8
+ */
9
+ export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
10
+ /**
11
+ * Adds a global after-render callback which is called each frame.
12
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
13
+ */
14
+ export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
15
+ /**
16
+ * Adds a global callback which is called when rendering stops.
17
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
18
+ */
19
+ export declare const addTail: (callback: GlobalRenderCallback) => () => void;
20
+ export declare type GlobalEffectType = 'before' | 'after' | 'tail';
21
+ export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
22
+ export declare type Invalidate = (state?: RootState, frames?: number) => void;
23
+ export declare type Advance = (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: _XRFrame) => void;
24
+ interface Loop {
25
+ loop: (timestamp: number) => void;
26
+ /**
27
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
28
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
29
+ */
30
+ invalidate: Invalidate;
31
+ /**
32
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
33
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
34
+ */
35
+ advance: Advance;
36
+ }
37
+ export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): Loop;
38
+ export {};