@react-three/fiber 8.17.4 → 8.17.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +1040 -1028
  2. package/dist/declarations/src/core/events.d.ts +93 -0
  3. package/dist/declarations/src/core/hooks.d.ts +57 -0
  4. package/dist/declarations/src/core/index.d.ts +94 -0
  5. package/dist/declarations/src/core/loop.d.ts +38 -0
  6. package/dist/declarations/src/core/renderer.d.ts +58 -0
  7. package/dist/declarations/src/core/store.d.ts +138 -0
  8. package/dist/declarations/src/core/utils.d.ts +134 -0
  9. package/dist/declarations/src/index.d.ts +12 -0
  10. package/dist/declarations/src/native/Canvas.d.ts +14 -0
  11. package/dist/declarations/src/native/events.d.ts +5 -0
  12. package/dist/declarations/src/native/polyfills.d.ts +1 -0
  13. package/dist/declarations/src/native.d.ts +13 -0
  14. package/dist/declarations/src/three-types.d.ts +396 -0
  15. package/dist/declarations/src/web/Canvas.d.ts +24 -0
  16. package/dist/declarations/src/web/events.d.ts +5 -0
  17. package/dist/declarations/src/web/use-measure.d.ts +34 -0
  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 +13 -18
  25. package/native/dist/react-three-fiber-native.cjs.prod.js +13 -18
  26. package/native/dist/react-three-fiber-native.esm.js +14 -19
  27. package/native/package.json +5 -5
  28. package/package.json +1 -1
  29. package/readme.md +253 -253
@@ -0,0 +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
+ };
@@ -0,0 +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 {};
@@ -0,0 +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, };
@@ -0,0 +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 {};
@@ -0,0 +1,58 @@
1
+ import * as THREE from 'three';
2
+ import { UseBoundStore } from 'zustand';
3
+ import Reconciler from 'react-reconciler';
4
+ import { prepare, applyProps } from './utils';
5
+ import { RootState } from './store';
6
+ import { EventHandlers } from './events';
7
+ export declare type Root = {
8
+ fiber: Reconciler.FiberRoot;
9
+ store: UseBoundStore<RootState>;
10
+ };
11
+ export declare type LocalState = {
12
+ type: string;
13
+ root: UseBoundStore<RootState>;
14
+ objects: Instance[];
15
+ parent: Instance | null;
16
+ primitive?: boolean;
17
+ eventCount: number;
18
+ handlers: Partial<EventHandlers>;
19
+ attach?: AttachType;
20
+ previousAttach: any;
21
+ memoizedProps: {
22
+ [key: string]: any;
23
+ };
24
+ autoRemovedBeforeAppend?: boolean;
25
+ };
26
+ export declare type AttachFnType = (parent: Instance, self: Instance) => () => void;
27
+ export declare type AttachType = string | AttachFnType;
28
+ export declare type BaseInstance = Omit<THREE.Object3D, 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
29
+ __r3f: LocalState;
30
+ children: Instance[];
31
+ remove: (...object: Instance[]) => Instance;
32
+ add: (...object: Instance[]) => Instance;
33
+ raycast?: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;
34
+ };
35
+ export declare type Instance = BaseInstance & {
36
+ [key: string]: any;
37
+ };
38
+ export declare type InstanceProps = {
39
+ [key: string]: unknown;
40
+ } & {
41
+ args?: any[];
42
+ object?: object;
43
+ visible?: boolean;
44
+ dispose?: null;
45
+ attach?: AttachType;
46
+ };
47
+ interface Catalogue {
48
+ [name: string]: {
49
+ new (...args: any): Instance;
50
+ };
51
+ }
52
+ export declare const catalogue: Catalogue;
53
+ declare const extend: (objects: object) => void;
54
+ declare function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?: () => any): {
55
+ reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance, void, Instance, Instance>;
56
+ applyProps: typeof applyProps;
57
+ };
58
+ export { prepare, createRenderer, extend };
@@ -0,0 +1,138 @@
1
+ import * as THREE from 'three';
2
+ import * as React from 'react';
3
+ import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
4
+ import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
5
+ import { _XRFrame, Camera } from './utils';
6
+ import { Advance, Invalidate } from './loop';
7
+ export declare const privateKeys: readonly ["set", "get", "setSize", "setFrameloop", "setDpr", "events", "invalidate", "advance", "size", "viewport"];
8
+ export declare type PrivateKeys = typeof privateKeys[number];
9
+ export interface Intersection extends THREE.Intersection {
10
+ eventObject: THREE.Object3D;
11
+ }
12
+ export declare type Subscription = {
13
+ ref: React.MutableRefObject<RenderCallback>;
14
+ priority: number;
15
+ store: UseBoundStore<RootState, StoreApi<RootState>>;
16
+ };
17
+ export declare type Dpr = number | [min: number, max: number];
18
+ export declare type Size = {
19
+ width: number;
20
+ height: number;
21
+ top: number;
22
+ left: number;
23
+ /** @deprecated `updateStyle` is now disabled for OffscreenCanvas and will be removed in v9. */
24
+ updateStyle?: boolean;
25
+ };
26
+ export declare type Viewport = Size & {
27
+ /** The initial pixel ratio */
28
+ initialDpr: number;
29
+ /** Current pixel ratio */
30
+ dpr: number;
31
+ /** size.width / viewport.width */
32
+ factor: number;
33
+ /** Camera distance */
34
+ distance: number;
35
+ /** Camera aspect ratio: width / height */
36
+ aspect: number;
37
+ };
38
+ export declare type RenderCallback = (state: RootState, delta: number, frame?: _XRFrame) => void;
39
+ export declare type Performance = {
40
+ /** Current performance normal, between min and max */
41
+ current: number;
42
+ /** How low the performance can go, between 0 and max */
43
+ min: number;
44
+ /** How high the performance can go, between min and max */
45
+ max: number;
46
+ /** Time until current returns to max in ms */
47
+ debounce: number;
48
+ /** Sets current to min, puts the system in regression */
49
+ regress: () => void;
50
+ };
51
+ export declare type Renderer = {
52
+ render: (scene: THREE.Scene, camera: THREE.Camera) => any;
53
+ };
54
+ export declare const isRenderer: (def: any) => boolean;
55
+ export declare type InternalState = {
56
+ active: boolean;
57
+ priority: number;
58
+ frames: number;
59
+ lastEvent: React.MutableRefObject<DomEvent | null>;
60
+ interaction: THREE.Object3D[];
61
+ hovered: Map<string, ThreeEvent<DomEvent>>;
62
+ subscribers: Subscription[];
63
+ capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
64
+ initialClick: [x: number, y: number];
65
+ initialHits: THREE.Object3D[];
66
+ subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: UseBoundStore<RootState, StoreApi<RootState>>) => () => void;
67
+ };
68
+ export declare type RootState = {
69
+ /** Set current state */
70
+ set: SetState<RootState>;
71
+ /** Get current state */
72
+ get: GetState<RootState>;
73
+ /** The instance of the renderer */
74
+ gl: THREE.WebGLRenderer;
75
+ /** Default camera */
76
+ camera: Camera & {
77
+ manual?: boolean;
78
+ };
79
+ /** Default scene */
80
+ scene: THREE.Scene;
81
+ /** Default raycaster */
82
+ raycaster: THREE.Raycaster;
83
+ /** Default clock */
84
+ clock: THREE.Clock;
85
+ /** Event layer interface, contains the event handler and the node they're connected to */
86
+ events: EventManager<any>;
87
+ /** XR interface */
88
+ xr: {
89
+ connect: () => void;
90
+ disconnect: () => void;
91
+ };
92
+ /** Currently used controls */
93
+ controls: THREE.EventDispatcher | null;
94
+ /** Normalized event coordinates */
95
+ pointer: THREE.Vector2;
96
+ /** @deprecated Normalized event coordinates, use "pointer" instead! */
97
+ mouse: THREE.Vector2;
98
+ legacy: boolean;
99
+ /** Shortcut to gl.outputColorSpace = THREE.LinearSRGBColorSpace */
100
+ linear: boolean;
101
+ /** Shortcut to gl.toneMapping = NoTonemapping */
102
+ flat: boolean;
103
+ /** Render loop flags */
104
+ frameloop: 'always' | 'demand' | 'never';
105
+ /** Adaptive performance interface */
106
+ performance: Performance;
107
+ /** Reactive pixel-size of the canvas */
108
+ size: Size;
109
+ /** Reactive size of the viewport in threejs units */
110
+ viewport: Viewport & {
111
+ getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
112
+ };
113
+ /** Flags the canvas for render, but doesn't render in itself */
114
+ invalidate: (frames?: number) => void;
115
+ /** Advance (render) one step */
116
+ advance: (timestamp: number, runGlobalEffects?: boolean) => void;
117
+ /** Shortcut to setting the event layer */
118
+ setEvents: (events: Partial<EventManager<any>>) => void;
119
+ /**
120
+ * Shortcut to manual sizing
121
+ */
122
+ setSize: (width: number, height: number,
123
+ /** @deprecated `updateStyle` is now disabled for OffscreenCanvas and will be removed in v9. */
124
+ updateStyle?: boolean, top?: number, left?: number) => void;
125
+ /** Shortcut to manual setting the pixel ratio */
126
+ setDpr: (dpr: Dpr) => void;
127
+ /** Shortcut to frameloop flags */
128
+ setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
129
+ /** When the canvas was clicked but nothing was hit */
130
+ onPointerMissed?: (event: MouseEvent) => void;
131
+ /** If this state model is layered (via createPortal) then this contains the previous layer */
132
+ previousRoot?: UseBoundStore<RootState, StoreApi<RootState>>;
133
+ /** Internals */
134
+ internal: InternalState;
135
+ };
136
+ declare const context: React.Context<UseBoundStore<RootState, StoreApi<RootState>>>;
137
+ declare const createStore: (invalidate: Invalidate, advance: Advance) => UseBoundStore<RootState>;
138
+ export { createStore, context };
@@ -0,0 +1,134 @@
1
+ /// <reference types="webxr" />
2
+ import * as THREE from 'three';
3
+ import * as React from 'react';
4
+ import { UseBoundStore } from 'zustand';
5
+ import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
6
+ import { Dpr, Renderer, RootState, Size } from './store';
7
+ /** @ts-ignore */
8
+ declare type _DeprecatedXRFrame = THREE.XRFrame;
9
+ /** @ts-ignore */
10
+ export declare type _XRFrame = THREE.WebGLRenderTargetOptions extends {
11
+ samples?: number;
12
+ } ? XRFrame : _DeprecatedXRFrame;
13
+ /**
14
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
15
+ */
16
+ export declare const hasColorSpace: <T extends object | Renderer | THREE.Texture, P = T extends Renderer ? {
17
+ outputColorSpace: string;
18
+ } : {
19
+ colorSpace: string;
20
+ }>(object: T) => object is T & P;
21
+ export declare type ColorManagementRepresentation = {
22
+ enabled: boolean | never;
23
+ } | {
24
+ legacyMode: boolean | never;
25
+ };
26
+ /**
27
+ * The current THREE.ColorManagement instance, if present.
28
+ */
29
+ export declare const getColorManagement: () => ColorManagementRepresentation | null;
30
+ export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
31
+ export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
32
+ export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>;
33
+ /**
34
+ * An SSR-friendly useLayoutEffect.
35
+ *
36
+ * React currently throws a warning when using useLayoutEffect on the server.
37
+ * To get around it, we can conditionally useEffect on the server (no-op) and
38
+ * useLayoutEffect elsewhere.
39
+ *
40
+ * @see https://github.com/facebook/react/issues/14927
41
+ */
42
+ export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
43
+ export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
44
+ export declare type SetBlock = false | Promise<null> | null;
45
+ export declare type UnblockProps = {
46
+ set: React.Dispatch<React.SetStateAction<SetBlock>>;
47
+ children: React.ReactNode;
48
+ };
49
+ export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
50
+ export declare class ErrorBoundary extends React.Component<{
51
+ set: React.Dispatch<Error | undefined>;
52
+ children: React.ReactNode;
53
+ }, {
54
+ error: boolean;
55
+ }> {
56
+ state: {
57
+ error: boolean;
58
+ };
59
+ static getDerivedStateFromError: () => {
60
+ error: boolean;
61
+ };
62
+ componentDidCatch(err: Error): void;
63
+ render(): React.ReactNode;
64
+ }
65
+ export declare const DEFAULT = "__default";
66
+ export declare const DEFAULTS: Map<any, any>;
67
+ export declare type DiffSet = {
68
+ memoized: {
69
+ [key: string]: any;
70
+ };
71
+ changes: [key: string, value: unknown, isEvent: boolean, keys: string[]][];
72
+ };
73
+ export declare const isDiffSet: (def: any) => def is DiffSet;
74
+ export declare type ClassConstructor = {
75
+ new (): void;
76
+ };
77
+ export declare type ObjectMap = {
78
+ nodes: {
79
+ [name: string]: THREE.Object3D;
80
+ };
81
+ materials: {
82
+ [name: string]: THREE.Material;
83
+ };
84
+ };
85
+ export declare function calculateDpr(dpr: Dpr): number;
86
+ /**
87
+ * Returns instance root state
88
+ */
89
+ export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
90
+ /**
91
+ * Returns the instances initial (outmost) root
92
+ */
93
+ export declare function findInitialRoot(child: Instance): UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
94
+ export declare type EquConfig = {
95
+ /** Compare arrays by reference equality a === b (default), or by shallow equality */
96
+ arrays?: 'reference' | 'shallow';
97
+ /** Compare objects by reference equality a === b (default), or by shallow equality */
98
+ objects?: 'reference' | 'shallow';
99
+ /** If true the keys in both a and b must match 1:1 (default), if false a's keys must intersect b's */
100
+ strict?: boolean;
101
+ };
102
+ export declare const is: {
103
+ obj: (a: any) => boolean;
104
+ fun: (a: any) => a is Function;
105
+ str: (a: any) => a is string;
106
+ num: (a: any) => a is number;
107
+ boo: (a: any) => a is boolean;
108
+ und: (a: any) => boolean;
109
+ arr: (a: any) => boolean;
110
+ equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
111
+ };
112
+ /**
113
+ * Collects nodes and materials from a THREE.Object3D.
114
+ */
115
+ export declare function buildGraph(object: THREE.Object3D): ObjectMap;
116
+ export declare function dispose<TObj extends {
117
+ dispose?: () => void;
118
+ type?: string;
119
+ [key: string]: any;
120
+ }>(obj: TObj): void;
121
+ export declare function prepare<T = THREE.Object3D>(object: T, state?: Partial<LocalState>): T;
122
+ export declare function attach(parent: Instance, child: Instance, type: AttachType): void;
123
+ export declare function detach(parent: Instance, child: Instance, type: AttachType): void;
124
+ declare type MaybeInstance = Omit<Instance, '__r3f'> & {
125
+ __r3f?: LocalState;
126
+ };
127
+ export declare function diffProps(instance: MaybeInstance, { children: cN, key: kN, ref: rN, ...props }: InstanceProps, { children: cP, key: kP, ref: rP, ...previous }?: InstanceProps, remove?: boolean): DiffSet;
128
+ export declare function applyProps(instance: MaybeInstance, data: InstanceProps | DiffSet): MaybeInstance;
129
+ export declare function invalidateInstance(instance: MaybeInstance): void;
130
+ export declare function updateInstance(instance: MaybeInstance): void;
131
+ export declare function updateCamera(camera: Camera & {
132
+ manual?: boolean;
133
+ }, size: Size): void;
134
+ export {};
@@ -0,0 +1,12 @@
1
+ export * from './three-types';
2
+ import * as ReactThreeFiber from './three-types';
3
+ export { ReactThreeFiber };
4
+ export type { BaseInstance, LocalState } from './core/renderer';
5
+ export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
6
+ export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
7
+ export { createEvents } from './core/events';
8
+ export type { ObjectMap, Camera } from './core/utils';
9
+ export * from './web/Canvas';
10
+ export { createPointerEvents as events, createPointerEvents } from './web/events';
11
+ export type { GlobalRenderCallback, GlobalEffectType } from './core/loop';
12
+ export * from './core';
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { View, type ViewProps, type ViewStyle } from 'react-native';
3
+ import { RenderProps } from '../core';
4
+ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
5
+ children: React.ReactNode;
6
+ style?: ViewStyle;
7
+ }
8
+ export interface Props extends CanvasProps {
9
+ }
10
+ /**
11
+ * A native canvas which accepts threejs elements as children.
12
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
13
+ */
14
+ export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;
@@ -0,0 +1,5 @@
1
+ import { UseBoundStore } from 'zustand';
2
+ import { RootState } from '../core/store';
3
+ import { EventManager } from '../core/events';
4
+ /** Default R3F event manager for react-native */
5
+ export declare function createTouchEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
@@ -0,0 +1 @@
1
+ export declare function polyfills(): void;