@react-three/fiber 9.6.0 → 9.6.1

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 (28) hide show
  1. package/CHANGELOG.md +1204 -1198
  2. package/dist/declarations/src/core/events.d.ts +94 -92
  3. package/dist/declarations/src/core/hooks.d.ts +53 -53
  4. package/dist/declarations/src/core/index.d.ts +13 -13
  5. package/dist/declarations/src/core/loop.d.ts +31 -31
  6. package/dist/declarations/src/core/reconciler.d.ts +50 -50
  7. package/dist/declarations/src/core/renderer.d.ts +89 -89
  8. package/dist/declarations/src/core/store.d.ts +130 -130
  9. package/dist/declarations/src/core/utils.d.ts +262 -262
  10. package/dist/declarations/src/index.d.ts +6 -6
  11. package/dist/declarations/src/native/Canvas.d.ts +13 -13
  12. package/dist/declarations/src/native/events.d.ts +4 -4
  13. package/dist/declarations/src/native.d.ts +6 -6
  14. package/dist/declarations/src/three-types.d.ts +68 -68
  15. package/dist/declarations/src/web/Canvas.d.ts +23 -23
  16. package/dist/declarations/src/web/events.d.ts +4 -4
  17. package/dist/{events-11ca7a92.cjs.prod.js → events-583399dd.cjs.prod.js} +118 -87
  18. package/dist/{events-760a1017.esm.js → events-b389eeca.esm.js} +118 -87
  19. package/dist/{events-508aad4b.cjs.dev.js → events-f19bcc32.cjs.dev.js} +118 -87
  20. package/dist/react-three-fiber.cjs.dev.js +4 -4
  21. package/dist/react-three-fiber.cjs.prod.js +4 -4
  22. package/dist/react-three-fiber.esm.js +5 -5
  23. package/native/dist/react-three-fiber-native.cjs.dev.js +4 -4
  24. package/native/dist/react-three-fiber-native.cjs.prod.js +4 -4
  25. package/native/dist/react-three-fiber-native.esm.js +5 -5
  26. package/native/package.json +5 -5
  27. package/package.json +1 -1
  28. package/readme.md +253 -253
@@ -1,68 +1,68 @@
1
- import type * as THREE from 'three';
2
- import type { Args, EventHandlers, InstanceProps, ConstructorRepresentation } from "./core/index.js";
3
- import type { Overwrite, Mutable } from "./core/utils.js";
4
- type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>;
5
- export interface MathRepresentation {
6
- set(...args: number[]): any;
7
- }
8
- export interface VectorRepresentation extends MathRepresentation {
9
- setScalar(value: number): any;
10
- }
11
- export type MathTypes = MathRepresentation | THREE.Euler | THREE.Color;
12
- export type MathType<T extends MathTypes> = T extends THREE.Color ? Args<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | MutableOrReadonlyParameters<T['set']> | number : T | MutableOrReadonlyParameters<T['set']>;
13
- export type MathProps<P> = {
14
- [K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never;
15
- };
16
- export type Vector2 = MathType<THREE.Vector2>;
17
- export type Vector3 = MathType<THREE.Vector3>;
18
- export type Vector4 = MathType<THREE.Vector4>;
19
- export type Color = MathType<THREE.Color>;
20
- export type Layers = MathType<THREE.Layers>;
21
- export type Quaternion = MathType<THREE.Quaternion>;
22
- export type Euler = MathType<THREE.Euler>;
23
- export type Matrix3 = MathType<THREE.Matrix3>;
24
- export type Matrix4 = MathType<THREE.Matrix4>;
25
- export interface RaycastableRepresentation {
26
- raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
27
- }
28
- export type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {};
29
- export interface ReactProps<P> {
30
- children?: React.ReactNode;
31
- ref?: React.Ref<P>;
32
- key?: React.Key;
33
- }
34
- export type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P>>>;
35
- export type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
36
- export type ThreeToJSXElements<T extends Record<string, any>> = {
37
- [K in keyof T & string as Uncapitalize<K>]: T[K] extends ConstructorRepresentation ? ThreeElement<T[K]> : never;
38
- };
39
- type ThreeExports = typeof THREE;
40
- type ThreeElementsImpl = ThreeToJSXElements<ThreeExports>;
41
- export interface ThreeElements extends Omit<ThreeElementsImpl, 'audio' | 'source' | 'line' | 'path'> {
42
- primitive: Omit<ThreeElement<any>, 'args'> & {
43
- object: object;
44
- };
45
- threeAudio: ThreeElementsImpl['audio'];
46
- threeSource: ThreeElementsImpl['source'];
47
- threeLine: ThreeElementsImpl['line'];
48
- threePath: ThreeElementsImpl['path'];
49
- }
50
- declare module 'react' {
51
- namespace JSX {
52
- interface IntrinsicElements extends ThreeElements {
53
- }
54
- }
55
- }
56
- declare module 'react/jsx-runtime' {
57
- namespace JSX {
58
- interface IntrinsicElements extends ThreeElements {
59
- }
60
- }
61
- }
62
- declare module 'react/jsx-dev-runtime' {
63
- namespace JSX {
64
- interface IntrinsicElements extends ThreeElements {
65
- }
66
- }
67
- }
68
- export {};
1
+ import type * as THREE from 'three';
2
+ import type { Args, EventHandlers, InstanceProps, ConstructorRepresentation } from "./core/index.js";
3
+ import type { Overwrite, Mutable } from "./core/utils.js";
4
+ type MutableOrReadonlyParameters<T extends (...args: any) => any> = Parameters<T> | Readonly<Parameters<T>>;
5
+ export interface MathRepresentation {
6
+ set(...args: number[]): any;
7
+ }
8
+ export interface VectorRepresentation extends MathRepresentation {
9
+ setScalar(value: number): any;
10
+ }
11
+ export type MathTypes = MathRepresentation | THREE.Euler | THREE.Color;
12
+ export type MathType<T extends MathTypes> = T extends THREE.Color ? Args<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | MutableOrReadonlyParameters<T['set']> | number : T | MutableOrReadonlyParameters<T['set']>;
13
+ export type MathProps<P> = {
14
+ [K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never;
15
+ };
16
+ export type Vector2 = MathType<THREE.Vector2>;
17
+ export type Vector3 = MathType<THREE.Vector3>;
18
+ export type Vector4 = MathType<THREE.Vector4>;
19
+ export type Color = MathType<THREE.Color>;
20
+ export type Layers = MathType<THREE.Layers>;
21
+ export type Quaternion = MathType<THREE.Quaternion>;
22
+ export type Euler = MathType<THREE.Euler>;
23
+ export type Matrix3 = MathType<THREE.Matrix3>;
24
+ export type Matrix4 = MathType<THREE.Matrix4>;
25
+ export interface RaycastableRepresentation {
26
+ raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
27
+ }
28
+ export type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {};
29
+ export interface ReactProps<P> {
30
+ children?: React.ReactNode;
31
+ ref?: React.Ref<P>;
32
+ key?: React.Key;
33
+ }
34
+ export type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P>>>;
35
+ export type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
36
+ export type ThreeToJSXElements<T extends Record<string, any>> = {
37
+ [K in keyof T & string as Uncapitalize<K>]: T[K] extends ConstructorRepresentation ? ThreeElement<T[K]> : never;
38
+ };
39
+ type ThreeExports = typeof THREE;
40
+ type ThreeElementsImpl = ThreeToJSXElements<ThreeExports>;
41
+ export interface ThreeElements extends Omit<ThreeElementsImpl, 'audio' | 'source' | 'line' | 'path'> {
42
+ primitive: Omit<ThreeElement<any>, 'args'> & {
43
+ object: object;
44
+ };
45
+ threeAudio: ThreeElementsImpl['audio'];
46
+ threeSource: ThreeElementsImpl['source'];
47
+ threeLine: ThreeElementsImpl['line'];
48
+ threePath: ThreeElementsImpl['path'];
49
+ }
50
+ declare module 'react' {
51
+ namespace JSX {
52
+ interface IntrinsicElements extends ThreeElements {
53
+ }
54
+ }
55
+ }
56
+ declare module 'react/jsx-runtime' {
57
+ namespace JSX {
58
+ interface IntrinsicElements extends ThreeElements {
59
+ }
60
+ }
61
+ }
62
+ declare module 'react/jsx-dev-runtime' {
63
+ namespace JSX {
64
+ interface IntrinsicElements extends ThreeElements {
65
+ }
66
+ }
67
+ }
68
+ export {};
@@ -1,23 +1,23 @@
1
- import * as React from 'react';
2
- import { Options as ResizeOptions } from 'react-use-measure';
3
- import { RenderProps } from "../core/index.js";
4
- export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
5
- children?: React.ReactNode;
6
- ref?: React.Ref<HTMLCanvasElement>;
7
- /** Canvas fallback content, similar to img's alt prop */
8
- fallback?: React.ReactNode;
9
- /**
10
- * Options to pass to useMeasure.
11
- * @see https://github.com/pmndrs/react-use-measure#api
12
- */
13
- resize?: ResizeOptions;
14
- /** The target where events are being subscribed to, default: the div that wraps canvas */
15
- eventSource?: HTMLElement | React.RefObject<HTMLElement>;
16
- /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
17
- eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
18
- }
19
- /**
20
- * A DOM canvas which accepts threejs elements as children.
21
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
22
- */
23
- export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;
1
+ import * as React from 'react';
2
+ import { Options as ResizeOptions } from 'react-use-measure';
3
+ import { RenderProps } from "../core/index.js";
4
+ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
5
+ children?: React.ReactNode;
6
+ ref?: React.Ref<HTMLCanvasElement>;
7
+ /** Canvas fallback content, similar to img's alt prop */
8
+ fallback?: React.ReactNode;
9
+ /**
10
+ * Options to pass to useMeasure.
11
+ * @see https://github.com/pmndrs/react-use-measure#api
12
+ */
13
+ resize?: ResizeOptions;
14
+ /** The target where events are being subscribed to, default: the div that wraps canvas */
15
+ eventSource?: HTMLElement | React.RefObject<HTMLElement>;
16
+ /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
17
+ eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
18
+ }
19
+ /**
20
+ * A DOM canvas which accepts threejs elements as children.
21
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
22
+ */
23
+ export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,4 @@
1
- import { RootStore } from "../core/store.js";
2
- import { EventManager } from "../core/events.js";
3
- /** Default R3F event manager for web */
4
- export declare function createPointerEvents(store: RootStore): EventManager<HTMLElement>;
1
+ import { RootStore } from "../core/store.js";
2
+ import { EventManager } from "../core/events.js";
3
+ /** Default R3F event manager for web */
4
+ export declare function createPointerEvents(store: RootStore): EventManager<HTMLElement>;
@@ -36,17 +36,17 @@ var threeTypes = /*#__PURE__*/Object.freeze({
36
36
  __proto__: null
37
37
  });
38
38
 
39
- /**
40
- * Returns the instance's initial (outmost) root.
39
+ /**
40
+ * Returns the instance's initial (outmost) root.
41
41
  */
42
42
  function findInitialRoot(instance) {
43
43
  let root = instance.root;
44
44
  while (root.getState().previousRoot) root = root.getState().previousRoot;
45
45
  return root;
46
46
  }
47
- /**
48
- * Safely flush async effects when testing, simulating a legacy root.
49
- * @deprecated Import from React instead. import { act } from 'react'
47
+ /**
48
+ * Safely flush async effects when testing, simulating a legacy root.
49
+ * @deprecated Import from React instead. import { act } from 'react'
50
50
  */
51
51
  // Reference with computed key to break Webpack static analysis
52
52
  // https://github.com/webpack/webpack/issues/14814
@@ -55,14 +55,14 @@ const isOrthographicCamera = def => def && def.isOrthographicCamera;
55
55
  const isRef = obj => obj && obj.hasOwnProperty('current');
56
56
  const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
57
57
 
58
- /**
59
- * An SSR-friendly useLayoutEffect.
60
- *
61
- * React currently throws a warning when using useLayoutEffect on the server.
62
- * To get around it, we can conditionally useEffect on the server (no-op) and
63
- * useLayoutEffect elsewhere.
64
- *
65
- * @see https://github.com/facebook/react/issues/14927
58
+ /**
59
+ * An SSR-friendly useLayoutEffect.
60
+ *
61
+ * React currently throws a warning when using useLayoutEffect on the server.
62
+ * To get around it, we can conditionally useEffect on the server (no-op) and
63
+ * useLayoutEffect elsewhere.
64
+ *
65
+ * @see https://github.com/facebook/react/issues/14927
66
66
  */
67
67
  const useIsomorphicLayoutEffect = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _window$document.createElement) || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative'))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
68
68
  function useMutableCallback(fn) {
@@ -70,8 +70,8 @@ function useMutableCallback(fn) {
70
70
  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
71
71
  return ref;
72
72
  }
73
- /**
74
- * Bridges renderer Context and StrictMode from a primary renderer.
73
+ /**
74
+ * Bridges renderer Context and StrictMode from a primary renderer.
75
75
  */
76
76
  function useBridge() {
77
77
  const fiber = itsFine.useFiber();
@@ -123,8 +123,8 @@ function calculateDpr(dpr) {
123
123
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
124
124
  }
125
125
 
126
- /**
127
- * Returns instance root state
126
+ /**
127
+ * Returns instance root state
128
128
  */
129
129
  function getRootState(obj) {
130
130
  var _r3f;
@@ -527,9 +527,9 @@ function makeId(event) {
527
527
  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
528
528
  }
529
529
 
530
- /**
531
- * Release pointer captures.
532
- * This is called by releasePointerCapture in the API, and when an object is removed.
530
+ /**
531
+ * Release pointer captures.
532
+ * This is called by releasePointerCapture in the API, and when an object is removed.
533
533
  */
534
534
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
535
535
  const captureData = captures.get(obj);
@@ -542,6 +542,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
542
542
  }
543
543
  }
544
544
  }
545
+
546
+ /** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
547
+ function swapInteractivity(store, object, newObject) {
548
+ const {
549
+ internal
550
+ } = store.getState();
551
+ for (let i = 0; i < internal.interaction.length; i++) {
552
+ if (internal.interaction[i] === object) internal.interaction[i] = newObject;
553
+ }
554
+ for (let i = 0; i < internal.initialHits.length; i++) {
555
+ if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
556
+ }
557
+ internal.hovered.forEach((value, key) => {
558
+ if (value.eventObject === object || value.object === object) {
559
+ internal.hovered.delete(key);
560
+ const next = {
561
+ ...value,
562
+ eventObject: value.eventObject === object ? newObject : value.eventObject,
563
+ object: value.object === object ? newObject : value.object
564
+ };
565
+ internal.hovered.set(makeId(next), next);
566
+ }
567
+ });
568
+ internal.capturedMap.forEach(captures => {
569
+ const captureData = captures.get(object);
570
+ if (captureData) {
571
+ captures.delete(object);
572
+ captures.set(newObject, captureData);
573
+ }
574
+ });
575
+ }
545
576
  function removeInteractivity(store, object) {
546
577
  const {
547
578
  internal
@@ -876,19 +907,19 @@ function createEvents(store) {
876
907
  if (!(instance != null && instance.eventCount)) return;
877
908
  const handlers = instance.handlers;
878
909
 
879
- /*
880
- MAYBE TODO, DELETE IF NOT:
881
- Check if the object is captured, captured events should not have intersects running in parallel
882
- But wouldn't it be better to just replace capturedMap with a single entry?
883
- Also, are we OK with straight up making picking up multiple objects impossible?
884
-
885
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
886
- if (pointerId !== undefined) {
887
- const capturedMeshSet = internal.capturedMap.get(pointerId)
888
- if (capturedMeshSet) {
889
- const captured = capturedMeshSet.get(eventObject)
890
- if (captured && captured.localState.stopped) return
891
- }
910
+ /*
911
+ MAYBE TODO, DELETE IF NOT:
912
+ Check if the object is captured, captured events should not have intersects running in parallel
913
+ But wouldn't it be better to just replace capturedMap with a single entry?
914
+ Also, are we OK with straight up making picking up multiple objects impossible?
915
+
916
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
917
+ if (pointerId !== undefined) {
918
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
919
+ if (capturedMeshSet) {
920
+ const captured = capturedMeshSet.get(eventObject)
921
+ if (captured && captured.localState.stopped) return
922
+ }
892
923
  }*/
893
924
 
894
925
  if (isPointerMove) {
@@ -1179,11 +1210,11 @@ const createStore = (invalidate, advance) => {
1179
1210
  return rootStore;
1180
1211
  };
1181
1212
 
1182
- /**
1183
- * Exposes an object's {@link Instance}.
1184
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1185
- *
1186
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1213
+ /**
1214
+ * Exposes an object's {@link Instance}.
1215
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1216
+ *
1217
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1187
1218
  */
1188
1219
  function useInstanceHandle(ref) {
1189
1220
  const instance = React__namespace.useRef(null);
@@ -1191,9 +1222,9 @@ function useInstanceHandle(ref) {
1191
1222
  return instance;
1192
1223
  }
1193
1224
 
1194
- /**
1195
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1196
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1225
+ /**
1226
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1227
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1197
1228
  */
1198
1229
  function useStore() {
1199
1230
  const store = React__namespace.useContext(context);
@@ -1201,18 +1232,18 @@ function useStore() {
1201
1232
  return store;
1202
1233
  }
1203
1234
 
1204
- /**
1205
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1206
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1235
+ /**
1236
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1237
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1207
1238
  */
1208
1239
  function useThree(selector = state => state, equalityFn) {
1209
1240
  return useStore()(selector, equalityFn);
1210
1241
  }
1211
1242
 
1212
- /**
1213
- * Executes a callback before render in a shared frame loop.
1214
- * Can order effects with render priority or manually render with a positive priority.
1215
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1243
+ /**
1244
+ * Executes a callback before render in a shared frame loop.
1245
+ * Can order effects with render priority or manually render with a positive priority.
1246
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1216
1247
  */
1217
1248
  function useFrame(callback, renderPriority = 0) {
1218
1249
  const store = useStore();
@@ -1224,9 +1255,9 @@ function useFrame(callback, renderPriority = 0) {
1224
1255
  return null;
1225
1256
  }
1226
1257
 
1227
- /**
1228
- * Returns a node graph of an object with named nodes & materials.
1229
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1258
+ /**
1259
+ * Returns a node graph of an object with named nodes & materials.
1260
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1230
1261
  */
1231
1262
  function useGraph(object) {
1232
1263
  return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1262,11 +1293,11 @@ function loadingFn(extensions, onProgress) {
1262
1293
  };
1263
1294
  }
1264
1295
 
1265
- /**
1266
- * Synchronously loads and caches assets with a three loader.
1267
- *
1268
- * Note: this hook's caller must be wrapped with `React.Suspense`
1269
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1296
+ /**
1297
+ * Synchronously loads and caches assets with a three loader.
1298
+ *
1299
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1300
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1270
1301
  */
1271
1302
  function useLoader(loader, input, extensions, onProgress) {
1272
1303
  // Use suspense to load async assets
@@ -1278,16 +1309,16 @@ function useLoader(loader, input, extensions, onProgress) {
1278
1309
  return Array.isArray(input) ? results : results[0];
1279
1310
  }
1280
1311
 
1281
- /**
1282
- * Preloads an asset into cache as a side-effect.
1312
+ /**
1313
+ * Preloads an asset into cache as a side-effect.
1283
1314
  */
1284
1315
  useLoader.preload = function (loader, input, extensions) {
1285
1316
  const keys = Array.isArray(input) ? input : [input];
1286
1317
  return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
1287
1318
  };
1288
1319
 
1289
- /**
1290
- * Removes a loaded asset from cache.
1320
+ /**
1321
+ * Removes a loaded asset from cache.
1291
1322
  */
1292
1323
  useLoader.clear = function (loader, input) {
1293
1324
  const keys = Array.isArray(input) ? input : [input];
@@ -1309,7 +1340,7 @@ useLoader.clear = function (loader, input) {
1309
1340
 
1310
1341
  var packageData = {
1311
1342
  name: "@react-three/fiber",
1312
- version: "9.6.0",
1343
+ version: "9.6.1",
1313
1344
  description: "A React renderer for Threejs",
1314
1345
  keywords: [
1315
1346
  "react",
@@ -7078,11 +7109,11 @@ function swapInstances() {
7078
7109
  const target = catalogue[toPascalCase(instance.type)];
7079
7110
 
7080
7111
  // Create object
7112
+ const prevObject = instance.object;
7081
7113
  instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
7082
7114
  instance.object.__r3f = instance;
7083
7115
  setFiberRef(fiber, instance.object);
7084
-
7085
- // Set initial props
7116
+ swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
7086
7117
  applyProps(instance.object, instance.props);
7087
7118
  if (instance.props.attach) {
7088
7119
  attach(parent, instance);
@@ -7692,10 +7723,10 @@ function Portal({
7692
7723
  children,
7693
7724
  container
7694
7725
  }) {
7695
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
7696
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
7697
- * the "R3F hooks can only be used within the Canvas component!" warning:
7698
- * <Canvas>
7726
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
7727
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
7728
+ * the "R3F hooks can only be used within the Canvas component!" warning:
7729
+ * <Canvas>
7699
7730
  * {createPortal(...)} */
7700
7731
  const {
7701
7732
  events,
@@ -7776,11 +7807,11 @@ function Portal({
7776
7807
  );
7777
7808
  }
7778
7809
 
7779
- /**
7780
- * Force React to flush any updates inside the provided callback synchronously and immediately.
7781
- * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
7782
- * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
7783
- * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
7810
+ /**
7811
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
7812
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
7813
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
7814
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
7784
7815
  */
7785
7816
  function flushSync(fn) {
7786
7817
  // @ts-ignore - reconciler types are not maintained
@@ -7798,21 +7829,21 @@ const globalEffects = new Set();
7798
7829
  const globalAfterEffects = new Set();
7799
7830
  const globalTailEffects = new Set();
7800
7831
 
7801
- /**
7802
- * Adds a global render callback which is called each frame.
7803
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
7832
+ /**
7833
+ * Adds a global render callback which is called each frame.
7834
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
7804
7835
  */
7805
7836
  const addEffect = callback => createSubs(callback, globalEffects);
7806
7837
 
7807
- /**
7808
- * Adds a global after-render callback which is called each frame.
7809
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
7838
+ /**
7839
+ * Adds a global after-render callback which is called each frame.
7840
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
7810
7841
  */
7811
7842
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
7812
7843
 
7813
- /**
7814
- * Adds a global callback which is called when rendering stops.
7815
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
7844
+ /**
7845
+ * Adds a global callback which is called when rendering stops.
7846
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
7816
7847
  */
7817
7848
  const addTail = callback => createSubs(callback, globalTailEffects);
7818
7849
  function run(effects, timestamp) {
@@ -7900,9 +7931,9 @@ function loop(timestamp) {
7900
7931
  }
7901
7932
  }
7902
7933
 
7903
- /**
7904
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
7905
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
7934
+ /**
7935
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
7936
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
7906
7937
  */
7907
7938
  function invalidate(state, frames = 1) {
7908
7939
  var _state$gl$xr2;
@@ -7929,9 +7960,9 @@ function invalidate(state, frames = 1) {
7929
7960
  }
7930
7961
  }
7931
7962
 
7932
- /**
7933
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
7934
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
7963
+ /**
7964
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
7965
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
7935
7966
  */
7936
7967
  function advance(timestamp, runGlobalEffects = true, state, frame) {
7937
7968
  if (runGlobalEffects) flushGlobalEffects('before', timestamp);