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