@react-three/fiber 9.1.1 → 9.1.2

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 +1142 -1136
  2. package/dist/declarations/src/core/events.d.ts +92 -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 +191 -190
  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 +67 -67
  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-b2f77bcf.cjs.dev.js → events-485b18b5.cjs.dev.js} +82 -84
  18. package/dist/{events-9ea6854d.esm.js → events-dc44c1b8.esm.js} +82 -84
  19. package/dist/{events-fed10990.cjs.prod.js → events-ff8a8ea8.cjs.prod.js} +82 -84
  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,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>;
@@ -38,35 +38,33 @@ var threeTypes = /*#__PURE__*/Object.freeze({
38
38
  __proto__: null
39
39
  });
40
40
 
41
- /**
42
- * Returns the instance's initial (outmost) root.
41
+ /**
42
+ * Returns the instance's initial (outmost) root.
43
43
  */
44
44
  function findInitialRoot(instance) {
45
45
  let root = instance.root;
46
46
  while (root.getState().previousRoot) root = root.getState().previousRoot;
47
47
  return root;
48
48
  }
49
- /**
50
- * Safely flush async effects when testing, simulating a legacy root.
49
+ /**
50
+ * Safely flush async effects when testing, simulating a legacy root.
51
+ * @deprecated Import from React instead. import { act } from 'react'
51
52
  */
52
- const act = cb => {
53
- if ('act' in React__namespace) {
54
- return React__namespace.act(cb);
55
- }
56
- throw new Error('act(...) is not supported in production builds of React');
57
- };
53
+ // Reference with computed key to break Webpack static analysis
54
+ // https://github.com/webpack/webpack/issues/14814
55
+ const act = React__namespace['act' + ''];
58
56
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
59
57
  const isRef = obj => obj && obj.hasOwnProperty('current');
60
58
  const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
61
59
 
62
- /**
63
- * An SSR-friendly useLayoutEffect.
64
- *
65
- * React currently throws a warning when using useLayoutEffect on the server.
66
- * To get around it, we can conditionally useEffect on the server (no-op) and
67
- * useLayoutEffect elsewhere.
68
- *
69
- * @see https://github.com/facebook/react/issues/14927
60
+ /**
61
+ * An SSR-friendly useLayoutEffect.
62
+ *
63
+ * React currently throws a warning when using useLayoutEffect on the server.
64
+ * To get around it, we can conditionally useEffect on the server (no-op) and
65
+ * useLayoutEffect elsewhere.
66
+ *
67
+ * @see https://github.com/facebook/react/issues/14927
70
68
  */
71
69
  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;
72
70
  function useMutableCallback(fn) {
@@ -74,8 +72,8 @@ function useMutableCallback(fn) {
74
72
  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
75
73
  return ref;
76
74
  }
77
- /**
78
- * Bridges renderer Context and StrictMode from a primary renderer.
75
+ /**
76
+ * Bridges renderer Context and StrictMode from a primary renderer.
79
77
  */
80
78
  function useBridge() {
81
79
  const fiber = itsFine.useFiber();
@@ -127,8 +125,8 @@ function calculateDpr(dpr) {
127
125
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
128
126
  }
129
127
 
130
- /**
131
- * Returns instance root state
128
+ /**
129
+ * Returns instance root state
132
130
  */
133
131
  function getRootState(obj) {
134
132
  var _r3f;
@@ -491,9 +489,9 @@ function makeId(event) {
491
489
  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
492
490
  }
493
491
 
494
- /**
495
- * Release pointer captures.
496
- * This is called by releasePointerCapture in the API, and when an object is removed.
492
+ /**
493
+ * Release pointer captures.
494
+ * This is called by releasePointerCapture in the API, and when an object is removed.
497
495
  */
498
496
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
499
497
  const captureData = captures.get(obj);
@@ -840,19 +838,19 @@ function createEvents(store) {
840
838
  if (!(instance != null && instance.eventCount)) return;
841
839
  const handlers = instance.handlers;
842
840
 
843
- /*
844
- MAYBE TODO, DELETE IF NOT:
845
- Check if the object is captured, captured events should not have intersects running in parallel
846
- But wouldn't it be better to just replace capturedMap with a single entry?
847
- Also, are we OK with straight up making picking up multiple objects impossible?
848
-
849
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
850
- if (pointerId !== undefined) {
851
- const capturedMeshSet = internal.capturedMap.get(pointerId)
852
- if (capturedMeshSet) {
853
- const captured = capturedMeshSet.get(eventObject)
854
- if (captured && captured.localState.stopped) return
855
- }
841
+ /*
842
+ MAYBE TODO, DELETE IF NOT:
843
+ Check if the object is captured, captured events should not have intersects running in parallel
844
+ But wouldn't it be better to just replace capturedMap with a single entry?
845
+ Also, are we OK with straight up making picking up multiple objects impossible?
846
+
847
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
848
+ if (pointerId !== undefined) {
849
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
850
+ if (capturedMeshSet) {
851
+ const captured = capturedMeshSet.get(eventObject)
852
+ if (captured && captured.localState.stopped) return
853
+ }
856
854
  }*/
857
855
 
858
856
  if (isPointerMove) {
@@ -1143,11 +1141,11 @@ const createStore = (invalidate, advance) => {
1143
1141
  return rootStore;
1144
1142
  };
1145
1143
 
1146
- /**
1147
- * Exposes an object's {@link Instance}.
1148
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1149
- *
1150
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1144
+ /**
1145
+ * Exposes an object's {@link Instance}.
1146
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1147
+ *
1148
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1151
1149
  */
1152
1150
  function useInstanceHandle(ref) {
1153
1151
  const instance = React__namespace.useRef(null);
@@ -1155,9 +1153,9 @@ function useInstanceHandle(ref) {
1155
1153
  return instance;
1156
1154
  }
1157
1155
 
1158
- /**
1159
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1160
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1156
+ /**
1157
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1158
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1161
1159
  */
1162
1160
  function useStore() {
1163
1161
  const store = React__namespace.useContext(context);
@@ -1165,18 +1163,18 @@ function useStore() {
1165
1163
  return store;
1166
1164
  }
1167
1165
 
1168
- /**
1169
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1170
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1166
+ /**
1167
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1168
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1171
1169
  */
1172
1170
  function useThree(selector = state => state, equalityFn) {
1173
1171
  return useStore()(selector, equalityFn);
1174
1172
  }
1175
1173
 
1176
- /**
1177
- * Executes a callback before render in a shared frame loop.
1178
- * Can order effects with render priority or manually render with a positive priority.
1179
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1174
+ /**
1175
+ * Executes a callback before render in a shared frame loop.
1176
+ * Can order effects with render priority or manually render with a positive priority.
1177
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1180
1178
  */
1181
1179
  function useFrame(callback, renderPriority = 0) {
1182
1180
  const store = useStore();
@@ -1188,9 +1186,9 @@ function useFrame(callback, renderPriority = 0) {
1188
1186
  return null;
1189
1187
  }
1190
1188
 
1191
- /**
1192
- * Returns a node graph of an object with named nodes & materials.
1193
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1189
+ /**
1190
+ * Returns a node graph of an object with named nodes & materials.
1191
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1194
1192
  */
1195
1193
  function useGraph(object) {
1196
1194
  return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1226,11 +1224,11 @@ function loadingFn(extensions, onProgress) {
1226
1224
  };
1227
1225
  }
1228
1226
 
1229
- /**
1230
- * Synchronously loads and caches assets with a three loader.
1231
- *
1232
- * Note: this hook's caller must be wrapped with `React.Suspense`
1233
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1227
+ /**
1228
+ * Synchronously loads and caches assets with a three loader.
1229
+ *
1230
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1231
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1234
1232
  */
1235
1233
  function useLoader(loader, input, extensions, onProgress) {
1236
1234
  // Use suspense to load async assets
@@ -1242,16 +1240,16 @@ function useLoader(loader, input, extensions, onProgress) {
1242
1240
  return Array.isArray(input) ? results : results[0];
1243
1241
  }
1244
1242
 
1245
- /**
1246
- * Preloads an asset into cache as a side-effect.
1243
+ /**
1244
+ * Preloads an asset into cache as a side-effect.
1247
1245
  */
1248
1246
  useLoader.preload = function (loader, input, extensions) {
1249
1247
  const keys = Array.isArray(input) ? input : [input];
1250
1248
  return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
1251
1249
  };
1252
1250
 
1253
- /**
1254
- * Removes a loaded asset from cache.
1251
+ /**
1252
+ * Removes a loaded asset from cache.
1255
1253
  */
1256
1254
  useLoader.clear = function (loader, input) {
1257
1255
  const keys = Array.isArray(input) ? input : [input];
@@ -2085,10 +2083,10 @@ function Portal({
2085
2083
  children,
2086
2084
  container
2087
2085
  }) {
2088
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2089
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2090
- * the "R3F hooks can only be used within the Canvas component!" warning:
2091
- * <Canvas>
2086
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2087
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2088
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2089
+ * <Canvas>
2092
2090
  * {createPortal(...)} */
2093
2091
  const {
2094
2092
  events,
@@ -2180,21 +2178,21 @@ const globalEffects = new Set();
2180
2178
  const globalAfterEffects = new Set();
2181
2179
  const globalTailEffects = new Set();
2182
2180
 
2183
- /**
2184
- * Adds a global render callback which is called each frame.
2185
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2181
+ /**
2182
+ * Adds a global render callback which is called each frame.
2183
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2186
2184
  */
2187
2185
  const addEffect = callback => createSubs(callback, globalEffects);
2188
2186
 
2189
- /**
2190
- * Adds a global after-render callback which is called each frame.
2191
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2187
+ /**
2188
+ * Adds a global after-render callback which is called each frame.
2189
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2192
2190
  */
2193
2191
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
2194
2192
 
2195
- /**
2196
- * Adds a global callback which is called when rendering stops.
2197
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2193
+ /**
2194
+ * Adds a global callback which is called when rendering stops.
2195
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2198
2196
  */
2199
2197
  const addTail = callback => createSubs(callback, globalTailEffects);
2200
2198
  function run(effects, timestamp) {
@@ -2282,9 +2280,9 @@ function loop(timestamp) {
2282
2280
  }
2283
2281
  }
2284
2282
 
2285
- /**
2286
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2287
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2283
+ /**
2284
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2285
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2288
2286
  */
2289
2287
  function invalidate(state, frames = 1) {
2290
2288
  var _state$gl$xr2;
@@ -2311,9 +2309,9 @@ function invalidate(state, frames = 1) {
2311
2309
  }
2312
2310
  }
2313
2311
 
2314
- /**
2315
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2316
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2312
+ /**
2313
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2314
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2317
2315
  */
2318
2316
  function advance(timestamp, runGlobalEffects = true, state, frame) {
2319
2317
  if (runGlobalEffects) flushGlobalEffects('before', timestamp);
@@ -12,35 +12,33 @@ var threeTypes = /*#__PURE__*/Object.freeze({
12
12
  __proto__: null
13
13
  });
14
14
 
15
- /**
16
- * Returns the instance's initial (outmost) root.
15
+ /**
16
+ * Returns the instance's initial (outmost) root.
17
17
  */
18
18
  function findInitialRoot(instance) {
19
19
  let root = instance.root;
20
20
  while (root.getState().previousRoot) root = root.getState().previousRoot;
21
21
  return root;
22
22
  }
23
- /**
24
- * Safely flush async effects when testing, simulating a legacy root.
23
+ /**
24
+ * Safely flush async effects when testing, simulating a legacy root.
25
+ * @deprecated Import from React instead. import { act } from 'react'
25
26
  */
26
- const act = cb => {
27
- if ('act' in React) {
28
- return React.act(cb);
29
- }
30
- throw new Error('act(...) is not supported in production builds of React');
31
- };
27
+ // Reference with computed key to break Webpack static analysis
28
+ // https://github.com/webpack/webpack/issues/14814
29
+ const act = React['act' + ''];
32
30
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
33
31
  const isRef = obj => obj && obj.hasOwnProperty('current');
34
32
  const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
35
33
 
36
- /**
37
- * An SSR-friendly useLayoutEffect.
38
- *
39
- * React currently throws a warning when using useLayoutEffect on the server.
40
- * To get around it, we can conditionally useEffect on the server (no-op) and
41
- * useLayoutEffect elsewhere.
42
- *
43
- * @see https://github.com/facebook/react/issues/14927
34
+ /**
35
+ * An SSR-friendly useLayoutEffect.
36
+ *
37
+ * React currently throws a warning when using useLayoutEffect on the server.
38
+ * To get around it, we can conditionally useEffect on the server (no-op) and
39
+ * useLayoutEffect elsewhere.
40
+ *
41
+ * @see https://github.com/facebook/react/issues/14927
44
42
  */
45
43
  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.useLayoutEffect : React.useEffect;
46
44
  function useMutableCallback(fn) {
@@ -48,8 +46,8 @@ function useMutableCallback(fn) {
48
46
  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
49
47
  return ref;
50
48
  }
51
- /**
52
- * Bridges renderer Context and StrictMode from a primary renderer.
49
+ /**
50
+ * Bridges renderer Context and StrictMode from a primary renderer.
53
51
  */
54
52
  function useBridge() {
55
53
  const fiber = useFiber();
@@ -101,8 +99,8 @@ function calculateDpr(dpr) {
101
99
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
102
100
  }
103
101
 
104
- /**
105
- * Returns instance root state
102
+ /**
103
+ * Returns instance root state
106
104
  */
107
105
  function getRootState(obj) {
108
106
  var _r3f;
@@ -465,9 +463,9 @@ function makeId(event) {
465
463
  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
466
464
  }
467
465
 
468
- /**
469
- * Release pointer captures.
470
- * This is called by releasePointerCapture in the API, and when an object is removed.
466
+ /**
467
+ * Release pointer captures.
468
+ * This is called by releasePointerCapture in the API, and when an object is removed.
471
469
  */
472
470
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
473
471
  const captureData = captures.get(obj);
@@ -814,19 +812,19 @@ function createEvents(store) {
814
812
  if (!(instance != null && instance.eventCount)) return;
815
813
  const handlers = instance.handlers;
816
814
 
817
- /*
818
- MAYBE TODO, DELETE IF NOT:
819
- Check if the object is captured, captured events should not have intersects running in parallel
820
- But wouldn't it be better to just replace capturedMap with a single entry?
821
- Also, are we OK with straight up making picking up multiple objects impossible?
822
-
823
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
824
- if (pointerId !== undefined) {
825
- const capturedMeshSet = internal.capturedMap.get(pointerId)
826
- if (capturedMeshSet) {
827
- const captured = capturedMeshSet.get(eventObject)
828
- if (captured && captured.localState.stopped) return
829
- }
815
+ /*
816
+ MAYBE TODO, DELETE IF NOT:
817
+ Check if the object is captured, captured events should not have intersects running in parallel
818
+ But wouldn't it be better to just replace capturedMap with a single entry?
819
+ Also, are we OK with straight up making picking up multiple objects impossible?
820
+
821
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
822
+ if (pointerId !== undefined) {
823
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
824
+ if (capturedMeshSet) {
825
+ const captured = capturedMeshSet.get(eventObject)
826
+ if (captured && captured.localState.stopped) return
827
+ }
830
828
  }*/
831
829
 
832
830
  if (isPointerMove) {
@@ -1117,11 +1115,11 @@ const createStore = (invalidate, advance) => {
1117
1115
  return rootStore;
1118
1116
  };
1119
1117
 
1120
- /**
1121
- * Exposes an object's {@link Instance}.
1122
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1123
- *
1124
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1118
+ /**
1119
+ * Exposes an object's {@link Instance}.
1120
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1121
+ *
1122
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1125
1123
  */
1126
1124
  function useInstanceHandle(ref) {
1127
1125
  const instance = React.useRef(null);
@@ -1129,9 +1127,9 @@ function useInstanceHandle(ref) {
1129
1127
  return instance;
1130
1128
  }
1131
1129
 
1132
- /**
1133
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1134
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1130
+ /**
1131
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1132
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1135
1133
  */
1136
1134
  function useStore() {
1137
1135
  const store = React.useContext(context);
@@ -1139,18 +1137,18 @@ function useStore() {
1139
1137
  return store;
1140
1138
  }
1141
1139
 
1142
- /**
1143
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1144
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1140
+ /**
1141
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1142
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1145
1143
  */
1146
1144
  function useThree(selector = state => state, equalityFn) {
1147
1145
  return useStore()(selector, equalityFn);
1148
1146
  }
1149
1147
 
1150
- /**
1151
- * Executes a callback before render in a shared frame loop.
1152
- * Can order effects with render priority or manually render with a positive priority.
1153
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1148
+ /**
1149
+ * Executes a callback before render in a shared frame loop.
1150
+ * Can order effects with render priority or manually render with a positive priority.
1151
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1154
1152
  */
1155
1153
  function useFrame(callback, renderPriority = 0) {
1156
1154
  const store = useStore();
@@ -1162,9 +1160,9 @@ function useFrame(callback, renderPriority = 0) {
1162
1160
  return null;
1163
1161
  }
1164
1162
 
1165
- /**
1166
- * Returns a node graph of an object with named nodes & materials.
1167
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1163
+ /**
1164
+ * Returns a node graph of an object with named nodes & materials.
1165
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1168
1166
  */
1169
1167
  function useGraph(object) {
1170
1168
  return React.useMemo(() => buildGraph(object), [object]);
@@ -1200,11 +1198,11 @@ function loadingFn(extensions, onProgress) {
1200
1198
  };
1201
1199
  }
1202
1200
 
1203
- /**
1204
- * Synchronously loads and caches assets with a three loader.
1205
- *
1206
- * Note: this hook's caller must be wrapped with `React.Suspense`
1207
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1201
+ /**
1202
+ * Synchronously loads and caches assets with a three loader.
1203
+ *
1204
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1205
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1208
1206
  */
1209
1207
  function useLoader(loader, input, extensions, onProgress) {
1210
1208
  // Use suspense to load async assets
@@ -1216,16 +1214,16 @@ function useLoader(loader, input, extensions, onProgress) {
1216
1214
  return Array.isArray(input) ? results : results[0];
1217
1215
  }
1218
1216
 
1219
- /**
1220
- * Preloads an asset into cache as a side-effect.
1217
+ /**
1218
+ * Preloads an asset into cache as a side-effect.
1221
1219
  */
1222
1220
  useLoader.preload = function (loader, input, extensions) {
1223
1221
  const keys = Array.isArray(input) ? input : [input];
1224
1222
  return preload(loadingFn(extensions), [loader, ...keys]);
1225
1223
  };
1226
1224
 
1227
- /**
1228
- * Removes a loaded asset from cache.
1225
+ /**
1226
+ * Removes a loaded asset from cache.
1229
1227
  */
1230
1228
  useLoader.clear = function (loader, input) {
1231
1229
  const keys = Array.isArray(input) ? input : [input];
@@ -2059,10 +2057,10 @@ function Portal({
2059
2057
  children,
2060
2058
  container
2061
2059
  }) {
2062
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2063
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2064
- * the "R3F hooks can only be used within the Canvas component!" warning:
2065
- * <Canvas>
2060
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2061
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2062
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2063
+ * <Canvas>
2066
2064
  * {createPortal(...)} */
2067
2065
  const {
2068
2066
  events,
@@ -2154,21 +2152,21 @@ const globalEffects = new Set();
2154
2152
  const globalAfterEffects = new Set();
2155
2153
  const globalTailEffects = new Set();
2156
2154
 
2157
- /**
2158
- * Adds a global render callback which is called each frame.
2159
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2155
+ /**
2156
+ * Adds a global render callback which is called each frame.
2157
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2160
2158
  */
2161
2159
  const addEffect = callback => createSubs(callback, globalEffects);
2162
2160
 
2163
- /**
2164
- * Adds a global after-render callback which is called each frame.
2165
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2161
+ /**
2162
+ * Adds a global after-render callback which is called each frame.
2163
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2166
2164
  */
2167
2165
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
2168
2166
 
2169
- /**
2170
- * Adds a global callback which is called when rendering stops.
2171
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2167
+ /**
2168
+ * Adds a global callback which is called when rendering stops.
2169
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2172
2170
  */
2173
2171
  const addTail = callback => createSubs(callback, globalTailEffects);
2174
2172
  function run(effects, timestamp) {
@@ -2256,9 +2254,9 @@ function loop(timestamp) {
2256
2254
  }
2257
2255
  }
2258
2256
 
2259
- /**
2260
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2261
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2257
+ /**
2258
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2259
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2262
2260
  */
2263
2261
  function invalidate(state, frames = 1) {
2264
2262
  var _state$gl$xr2;
@@ -2285,9 +2283,9 @@ function invalidate(state, frames = 1) {
2285
2283
  }
2286
2284
  }
2287
2285
 
2288
- /**
2289
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2290
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2286
+ /**
2287
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2288
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2291
2289
  */
2292
2290
  function advance(timestamp, runGlobalEffects = true, state, frame) {
2293
2291
  if (runGlobalEffects) flushGlobalEffects('before', timestamp);