@react-three/fiber 8.14.6 → 8.14.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- export declare function _polyfills(): void;
1
+ export declare function polyfills(): void;
@@ -347,12 +347,12 @@ function createRenderer(_roots, _getEventPriority) {
347
347
  }
348
348
 
349
349
  var _window$document, _window$navigator;
350
- /**
351
- * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
350
+ /**
351
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
352
352
  */
353
353
  const hasColorSpace = object => 'colorSpace' in object || 'outputColorSpace' in object;
354
- /**
355
- * The current THREE.ColorManagement instance, if present.
354
+ /**
355
+ * The current THREE.ColorManagement instance, if present.
356
356
  */
357
357
  const getColorManagement = () => {
358
358
  var _ColorManagement;
@@ -361,14 +361,14 @@ const getColorManagement = () => {
361
361
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
362
362
  const isRef = obj => obj && obj.hasOwnProperty('current');
363
363
 
364
- /**
365
- * An SSR-friendly useLayoutEffect.
366
- *
367
- * React currently throws a warning when using useLayoutEffect on the server.
368
- * To get around it, we can conditionally useEffect on the server (no-op) and
369
- * useLayoutEffect elsewhere.
370
- *
371
- * @see https://github.com/facebook/react/issues/14927
364
+ /**
365
+ * An SSR-friendly useLayoutEffect.
366
+ *
367
+ * React currently throws a warning when using useLayoutEffect on the server.
368
+ * To get around it, we can conditionally useEffect on the server (no-op) and
369
+ * useLayoutEffect elsewhere.
370
+ *
371
+ * @see https://github.com/facebook/react/issues/14927
372
372
  */
373
373
  const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
374
374
  function useMutableCallback(fn) {
@@ -413,8 +413,8 @@ function calculateDpr(dpr) {
413
413
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
414
414
  }
415
415
 
416
- /**
417
- * Returns instance root state
416
+ /**
417
+ * Returns instance root state
418
418
  */
419
419
  const getRootState = obj => {
420
420
  var _r3f;
@@ -809,9 +809,9 @@ function getEventPriority() {
809
809
  }
810
810
  }
811
811
 
812
- /**
813
- * Release pointer captures.
814
- * This is called by releasePointerCapture in the API, and when an object is removed.
812
+ /**
813
+ * Release pointer captures.
814
+ * This is called by releasePointerCapture in the API, and when an object is removed.
815
815
  */
816
816
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
817
817
  const captureData = captures.get(obj);
@@ -1146,19 +1146,19 @@ function createEvents(store) {
1146
1146
  // Check presence of handlers
1147
1147
  if (!(instance != null && instance.eventCount)) return;
1148
1148
 
1149
- /*
1150
- MAYBE TODO, DELETE IF NOT:
1151
- Check if the object is captured, captured events should not have intersects running in parallel
1152
- But wouldn't it be better to just replace capturedMap with a single entry?
1153
- Also, are we OK with straight up making picking up multiple objects impossible?
1154
-
1155
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1156
- if (pointerId !== undefined) {
1157
- const capturedMeshSet = internal.capturedMap.get(pointerId)
1158
- if (capturedMeshSet) {
1159
- const captured = capturedMeshSet.get(eventObject)
1160
- if (captured && captured.localState.stopped) return
1161
- }
1149
+ /*
1150
+ MAYBE TODO, DELETE IF NOT:
1151
+ Check if the object is captured, captured events should not have intersects running in parallel
1152
+ But wouldn't it be better to just replace capturedMap with a single entry?
1153
+ Also, are we OK with straight up making picking up multiple objects impossible?
1154
+
1155
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1156
+ if (pointerId !== undefined) {
1157
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
1158
+ if (capturedMeshSet) {
1159
+ const captured = capturedMeshSet.get(eventObject)
1160
+ if (captured && captured.localState.stopped) return
1161
+ }
1162
1162
  }*/
1163
1163
 
1164
1164
  if (isPointerMove) {
@@ -1464,21 +1464,21 @@ let globalEffects = new Set();
1464
1464
  let globalAfterEffects = new Set();
1465
1465
  let globalTailEffects = new Set();
1466
1466
 
1467
- /**
1468
- * Adds a global render callback which is called each frame.
1469
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1467
+ /**
1468
+ * Adds a global render callback which is called each frame.
1469
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1470
1470
  */
1471
1471
  const addEffect = callback => createSubs(callback, globalEffects);
1472
1472
 
1473
- /**
1474
- * Adds a global after-render callback which is called each frame.
1475
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1473
+ /**
1474
+ * Adds a global after-render callback which is called each frame.
1475
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1476
1476
  */
1477
1477
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
1478
1478
 
1479
- /**
1480
- * Adds a global callback which is called when rendering stops.
1481
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1479
+ /**
1480
+ * Adds a global callback which is called when rendering stops.
1481
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1482
1482
  */
1483
1483
  const addTail = callback => createSubs(callback, globalTailEffects);
1484
1484
  function run(effects, timestamp) {
@@ -1577,24 +1577,24 @@ function createLoop(roots) {
1577
1577
  }
1578
1578
  return {
1579
1579
  loop,
1580
- /**
1581
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1582
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1580
+ /**
1581
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1582
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1583
1583
  */
1584
1584
  invalidate,
1585
- /**
1586
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1587
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1585
+ /**
1586
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1587
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1588
1588
  */
1589
1589
  advance
1590
1590
  };
1591
1591
  }
1592
1592
 
1593
- /**
1594
- * Exposes an object's {@link LocalState}.
1595
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1596
- *
1597
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1593
+ /**
1594
+ * Exposes an object's {@link LocalState}.
1595
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1596
+ *
1597
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1598
1598
  */
1599
1599
  function useInstanceHandle(ref) {
1600
1600
  const instance = React.useRef(null);
@@ -1607,18 +1607,18 @@ function useStore() {
1607
1607
  return store;
1608
1608
  }
1609
1609
 
1610
- /**
1611
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1612
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1610
+ /**
1611
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1612
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1613
1613
  */
1614
1614
  function useThree(selector = state => state, equalityFn) {
1615
1615
  return useStore()(selector, equalityFn);
1616
1616
  }
1617
1617
 
1618
- /**
1619
- * Executes a callback before render in a shared frame loop.
1620
- * Can order effects with render priority or manually render with a positive priority.
1621
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1618
+ /**
1619
+ * Executes a callback before render in a shared frame loop.
1620
+ * Can order effects with render priority or manually render with a positive priority.
1621
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1622
1622
  */
1623
1623
  function useFrame(callback, renderPriority = 0) {
1624
1624
  const store = useStore();
@@ -1630,9 +1630,9 @@ function useFrame(callback, renderPriority = 0) {
1630
1630
  return null;
1631
1631
  }
1632
1632
 
1633
- /**
1634
- * Returns a node graph of an object with named nodes & materials.
1635
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1633
+ /**
1634
+ * Returns a node graph of an object with named nodes & materials.
1635
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1636
1636
  */
1637
1637
  function useGraph(object) {
1638
1638
  return React.useMemo(() => buildGraph(object), [object]);
@@ -1655,11 +1655,11 @@ function loadingFn(extensions, onProgress) {
1655
1655
  };
1656
1656
  }
1657
1657
 
1658
- /**
1659
- * Synchronously loads and caches assets with a three loader.
1660
- *
1661
- * Note: this hook's caller must be wrapped with `React.Suspense`
1662
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1658
+ /**
1659
+ * Synchronously loads and caches assets with a three loader.
1660
+ *
1661
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1662
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1663
1663
  */
1664
1664
  function useLoader(Proto, input, extensions, onProgress) {
1665
1665
  // Use suspense to load async assets
@@ -1671,16 +1671,16 @@ function useLoader(Proto, input, extensions, onProgress) {
1671
1671
  return Array.isArray(input) ? results : results[0];
1672
1672
  }
1673
1673
 
1674
- /**
1675
- * Preloads an asset into cache as a side-effect.
1674
+ /**
1675
+ * Preloads an asset into cache as a side-effect.
1676
1676
  */
1677
1677
  useLoader.preload = function (Proto, input, extensions) {
1678
1678
  const keys = Array.isArray(input) ? input : [input];
1679
1679
  return preload(loadingFn(extensions), [Proto, ...keys]);
1680
1680
  };
1681
1681
 
1682
- /**
1683
- * Removes a loaded asset from cache.
1682
+ /**
1683
+ * Removes a loaded asset from cache.
1684
1684
  */
1685
1685
  useLoader.clear = function (Proto, input) {
1686
1686
  const keys = Array.isArray(input) ? input : [input];
@@ -2055,10 +2055,10 @@ function Portal({
2055
2055
  children,
2056
2056
  container
2057
2057
  }) {
2058
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2059
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2060
- * the "R3F hooks can only be used within the Canvas component!" warning:
2061
- * <Canvas>
2058
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2059
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2060
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2061
+ * <Canvas>
2062
2062
  * {createPortal(...)} */
2063
2063
  const {
2064
2064
  events,
@@ -374,12 +374,12 @@ function createRenderer(_roots, _getEventPriority) {
374
374
  }
375
375
 
376
376
  var _window$document, _window$navigator;
377
- /**
378
- * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
377
+ /**
378
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
379
379
  */
380
380
  const hasColorSpace = object => 'colorSpace' in object || 'outputColorSpace' in object;
381
- /**
382
- * The current THREE.ColorManagement instance, if present.
381
+ /**
382
+ * The current THREE.ColorManagement instance, if present.
383
383
  */
384
384
  const getColorManagement = () => {
385
385
  var _ColorManagement;
@@ -388,14 +388,14 @@ const getColorManagement = () => {
388
388
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
389
389
  const isRef = obj => obj && obj.hasOwnProperty('current');
390
390
 
391
- /**
392
- * An SSR-friendly useLayoutEffect.
393
- *
394
- * React currently throws a warning when using useLayoutEffect on the server.
395
- * To get around it, we can conditionally useEffect on the server (no-op) and
396
- * useLayoutEffect elsewhere.
397
- *
398
- * @see https://github.com/facebook/react/issues/14927
391
+ /**
392
+ * An SSR-friendly useLayoutEffect.
393
+ *
394
+ * React currently throws a warning when using useLayoutEffect on the server.
395
+ * To get around it, we can conditionally useEffect on the server (no-op) and
396
+ * useLayoutEffect elsewhere.
397
+ *
398
+ * @see https://github.com/facebook/react/issues/14927
399
399
  */
400
400
  const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React__namespace.useLayoutEffect : React__namespace.useEffect;
401
401
  function useMutableCallback(fn) {
@@ -440,8 +440,8 @@ function calculateDpr(dpr) {
440
440
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
441
441
  }
442
442
 
443
- /**
444
- * Returns instance root state
443
+ /**
444
+ * Returns instance root state
445
445
  */
446
446
  const getRootState = obj => {
447
447
  var _r3f;
@@ -836,9 +836,9 @@ function getEventPriority() {
836
836
  }
837
837
  }
838
838
 
839
- /**
840
- * Release pointer captures.
841
- * This is called by releasePointerCapture in the API, and when an object is removed.
839
+ /**
840
+ * Release pointer captures.
841
+ * This is called by releasePointerCapture in the API, and when an object is removed.
842
842
  */
843
843
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
844
844
  const captureData = captures.get(obj);
@@ -1173,19 +1173,19 @@ function createEvents(store) {
1173
1173
  // Check presence of handlers
1174
1174
  if (!(instance != null && instance.eventCount)) return;
1175
1175
 
1176
- /*
1177
- MAYBE TODO, DELETE IF NOT:
1178
- Check if the object is captured, captured events should not have intersects running in parallel
1179
- But wouldn't it be better to just replace capturedMap with a single entry?
1180
- Also, are we OK with straight up making picking up multiple objects impossible?
1181
-
1182
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1183
- if (pointerId !== undefined) {
1184
- const capturedMeshSet = internal.capturedMap.get(pointerId)
1185
- if (capturedMeshSet) {
1186
- const captured = capturedMeshSet.get(eventObject)
1187
- if (captured && captured.localState.stopped) return
1188
- }
1176
+ /*
1177
+ MAYBE TODO, DELETE IF NOT:
1178
+ Check if the object is captured, captured events should not have intersects running in parallel
1179
+ But wouldn't it be better to just replace capturedMap with a single entry?
1180
+ Also, are we OK with straight up making picking up multiple objects impossible?
1181
+
1182
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1183
+ if (pointerId !== undefined) {
1184
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
1185
+ if (capturedMeshSet) {
1186
+ const captured = capturedMeshSet.get(eventObject)
1187
+ if (captured && captured.localState.stopped) return
1188
+ }
1189
1189
  }*/
1190
1190
 
1191
1191
  if (isPointerMove) {
@@ -1491,21 +1491,21 @@ let globalEffects = new Set();
1491
1491
  let globalAfterEffects = new Set();
1492
1492
  let globalTailEffects = new Set();
1493
1493
 
1494
- /**
1495
- * Adds a global render callback which is called each frame.
1496
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1494
+ /**
1495
+ * Adds a global render callback which is called each frame.
1496
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1497
1497
  */
1498
1498
  const addEffect = callback => createSubs(callback, globalEffects);
1499
1499
 
1500
- /**
1501
- * Adds a global after-render callback which is called each frame.
1502
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1500
+ /**
1501
+ * Adds a global after-render callback which is called each frame.
1502
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1503
1503
  */
1504
1504
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
1505
1505
 
1506
- /**
1507
- * Adds a global callback which is called when rendering stops.
1508
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1506
+ /**
1507
+ * Adds a global callback which is called when rendering stops.
1508
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1509
1509
  */
1510
1510
  const addTail = callback => createSubs(callback, globalTailEffects);
1511
1511
  function run(effects, timestamp) {
@@ -1604,24 +1604,24 @@ function createLoop(roots) {
1604
1604
  }
1605
1605
  return {
1606
1606
  loop,
1607
- /**
1608
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1609
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1607
+ /**
1608
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1609
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1610
1610
  */
1611
1611
  invalidate,
1612
- /**
1613
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1614
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1612
+ /**
1613
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1614
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1615
1615
  */
1616
1616
  advance
1617
1617
  };
1618
1618
  }
1619
1619
 
1620
- /**
1621
- * Exposes an object's {@link LocalState}.
1622
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1623
- *
1624
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1620
+ /**
1621
+ * Exposes an object's {@link LocalState}.
1622
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1623
+ *
1624
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1625
1625
  */
1626
1626
  function useInstanceHandle(ref) {
1627
1627
  const instance = React__namespace.useRef(null);
@@ -1634,18 +1634,18 @@ function useStore() {
1634
1634
  return store;
1635
1635
  }
1636
1636
 
1637
- /**
1638
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1639
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1637
+ /**
1638
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1639
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1640
1640
  */
1641
1641
  function useThree(selector = state => state, equalityFn) {
1642
1642
  return useStore()(selector, equalityFn);
1643
1643
  }
1644
1644
 
1645
- /**
1646
- * Executes a callback before render in a shared frame loop.
1647
- * Can order effects with render priority or manually render with a positive priority.
1648
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1645
+ /**
1646
+ * Executes a callback before render in a shared frame loop.
1647
+ * Can order effects with render priority or manually render with a positive priority.
1648
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1649
1649
  */
1650
1650
  function useFrame(callback, renderPriority = 0) {
1651
1651
  const store = useStore();
@@ -1657,9 +1657,9 @@ function useFrame(callback, renderPriority = 0) {
1657
1657
  return null;
1658
1658
  }
1659
1659
 
1660
- /**
1661
- * Returns a node graph of an object with named nodes & materials.
1662
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1660
+ /**
1661
+ * Returns a node graph of an object with named nodes & materials.
1662
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1663
1663
  */
1664
1664
  function useGraph(object) {
1665
1665
  return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1682,11 +1682,11 @@ function loadingFn(extensions, onProgress) {
1682
1682
  };
1683
1683
  }
1684
1684
 
1685
- /**
1686
- * Synchronously loads and caches assets with a three loader.
1687
- *
1688
- * Note: this hook's caller must be wrapped with `React.Suspense`
1689
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1685
+ /**
1686
+ * Synchronously loads and caches assets with a three loader.
1687
+ *
1688
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1689
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1690
1690
  */
1691
1691
  function useLoader(Proto, input, extensions, onProgress) {
1692
1692
  // Use suspense to load async assets
@@ -1698,16 +1698,16 @@ function useLoader(Proto, input, extensions, onProgress) {
1698
1698
  return Array.isArray(input) ? results : results[0];
1699
1699
  }
1700
1700
 
1701
- /**
1702
- * Preloads an asset into cache as a side-effect.
1701
+ /**
1702
+ * Preloads an asset into cache as a side-effect.
1703
1703
  */
1704
1704
  useLoader.preload = function (Proto, input, extensions) {
1705
1705
  const keys = Array.isArray(input) ? input : [input];
1706
1706
  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
1707
1707
  };
1708
1708
 
1709
- /**
1710
- * Removes a loaded asset from cache.
1709
+ /**
1710
+ * Removes a loaded asset from cache.
1711
1711
  */
1712
1712
  useLoader.clear = function (Proto, input) {
1713
1713
  const keys = Array.isArray(input) ? input : [input];
@@ -2082,10 +2082,10 @@ function Portal({
2082
2082
  children,
2083
2083
  container
2084
2084
  }) {
2085
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2086
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2087
- * the "R3F hooks can only be used within the Canvas component!" warning:
2088
- * <Canvas>
2085
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2086
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2087
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2088
+ * <Canvas>
2089
2089
  * {createPortal(...)} */
2090
2090
  const {
2091
2091
  events,