@react-three/fiber 8.15.12 → 8.15.13

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 +913 -907
  2. package/dist/declarations/src/core/events.d.ts +93 -93
  3. package/dist/declarations/src/core/hooks.d.ts +57 -57
  4. package/dist/declarations/src/core/index.d.ts +87 -87
  5. package/dist/declarations/src/core/loop.d.ts +33 -33
  6. package/dist/declarations/src/core/renderer.d.ts +58 -58
  7. package/dist/declarations/src/core/store.d.ts +137 -137
  8. package/dist/declarations/src/core/utils.d.ts +125 -125
  9. package/dist/declarations/src/index.d.ts +12 -12
  10. package/dist/declarations/src/native/Canvas.d.ts +14 -14
  11. package/dist/declarations/src/native/events.d.ts +5 -5
  12. package/dist/declarations/src/native/polyfills.d.ts +1 -1
  13. package/dist/declarations/src/native.d.ts +12 -12
  14. package/dist/declarations/src/three-types.d.ts +392 -392
  15. package/dist/declarations/src/web/Canvas.d.ts +24 -24
  16. package/dist/declarations/src/web/events.d.ts +5 -5
  17. package/dist/{index-e9909912.cjs.dev.js → index-0ee5ddc9.cjs.dev.js} +75 -75
  18. package/dist/{index-710e63a4.cjs.prod.js → index-2003c0bb.cjs.prod.js} +75 -75
  19. package/dist/{index-5bde93f1.esm.js → index-710fb441.esm.js} +75 -75
  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 +15 -9
  24. package/native/dist/react-three-fiber-native.cjs.prod.js +15 -9
  25. package/native/dist/react-three-fiber-native.esm.js +16 -10
  26. package/native/package.json +5 -5
  27. package/package.json +1 -1
  28. package/readme.md +253 -253
@@ -354,12 +354,12 @@ function createRenderer(_roots, _getEventPriority) {
354
354
  }
355
355
 
356
356
  var _window$document, _window$navigator;
357
- /**
358
- * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
357
+ /**
358
+ * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
359
359
  */
360
360
  const hasColorSpace = object => 'colorSpace' in object || 'outputColorSpace' in object;
361
- /**
362
- * The current THREE.ColorManagement instance, if present.
361
+ /**
362
+ * The current THREE.ColorManagement instance, if present.
363
363
  */
364
364
  const getColorManagement = () => {
365
365
  var _ColorManagement;
@@ -368,14 +368,14 @@ const getColorManagement = () => {
368
368
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
369
369
  const isRef = obj => obj && obj.hasOwnProperty('current');
370
370
 
371
- /**
372
- * An SSR-friendly useLayoutEffect.
373
- *
374
- * React currently throws a warning when using useLayoutEffect on the server.
375
- * To get around it, we can conditionally useEffect on the server (no-op) and
376
- * useLayoutEffect elsewhere.
377
- *
378
- * @see https://github.com/facebook/react/issues/14927
371
+ /**
372
+ * An SSR-friendly useLayoutEffect.
373
+ *
374
+ * React currently throws a warning when using useLayoutEffect on the server.
375
+ * To get around it, we can conditionally useEffect on the server (no-op) and
376
+ * useLayoutEffect elsewhere.
377
+ *
378
+ * @see https://github.com/facebook/react/issues/14927
379
379
  */
380
380
  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;
381
381
  function useMutableCallback(fn) {
@@ -420,8 +420,8 @@ function calculateDpr(dpr) {
420
420
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
421
421
  }
422
422
 
423
- /**
424
- * Returns instance root state
423
+ /**
424
+ * Returns instance root state
425
425
  */
426
426
  const getRootState = obj => {
427
427
  var _r3f;
@@ -477,8 +477,8 @@ const is = {
477
477
  }
478
478
  };
479
479
 
480
- /**
481
- * Collects nodes and materials from a THREE.Object3D.
480
+ /**
481
+ * Collects nodes and materials from a THREE.Object3D.
482
482
  */
483
483
  function buildGraph(object) {
484
484
  const data = {
@@ -818,9 +818,9 @@ function getEventPriority() {
818
818
  }
819
819
  }
820
820
 
821
- /**
822
- * Release pointer captures.
823
- * This is called by releasePointerCapture in the API, and when an object is removed.
821
+ /**
822
+ * Release pointer captures.
823
+ * This is called by releasePointerCapture in the API, and when an object is removed.
824
824
  */
825
825
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
826
826
  const captureData = captures.get(obj);
@@ -1155,19 +1155,19 @@ function createEvents(store) {
1155
1155
  // Check presence of handlers
1156
1156
  if (!(instance != null && instance.eventCount)) return;
1157
1157
 
1158
- /*
1159
- MAYBE TODO, DELETE IF NOT:
1160
- Check if the object is captured, captured events should not have intersects running in parallel
1161
- But wouldn't it be better to just replace capturedMap with a single entry?
1162
- Also, are we OK with straight up making picking up multiple objects impossible?
1163
-
1164
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1165
- if (pointerId !== undefined) {
1166
- const capturedMeshSet = internal.capturedMap.get(pointerId)
1167
- if (capturedMeshSet) {
1168
- const captured = capturedMeshSet.get(eventObject)
1169
- if (captured && captured.localState.stopped) return
1170
- }
1158
+ /*
1159
+ MAYBE TODO, DELETE IF NOT:
1160
+ Check if the object is captured, captured events should not have intersects running in parallel
1161
+ But wouldn't it be better to just replace capturedMap with a single entry?
1162
+ Also, are we OK with straight up making picking up multiple objects impossible?
1163
+
1164
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
1165
+ if (pointerId !== undefined) {
1166
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
1167
+ if (capturedMeshSet) {
1168
+ const captured = capturedMeshSet.get(eventObject)
1169
+ if (captured && captured.localState.stopped) return
1170
+ }
1171
1171
  }*/
1172
1172
 
1173
1173
  if (isPointerMove) {
@@ -1473,21 +1473,21 @@ let globalEffects = new Set();
1473
1473
  let globalAfterEffects = new Set();
1474
1474
  let globalTailEffects = new Set();
1475
1475
 
1476
- /**
1477
- * Adds a global render callback which is called each frame.
1478
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1476
+ /**
1477
+ * Adds a global render callback which is called each frame.
1478
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
1479
1479
  */
1480
1480
  const addEffect = callback => createSubs(callback, globalEffects);
1481
1481
 
1482
- /**
1483
- * Adds a global after-render callback which is called each frame.
1484
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1482
+ /**
1483
+ * Adds a global after-render callback which is called each frame.
1484
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
1485
1485
  */
1486
1486
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
1487
1487
 
1488
- /**
1489
- * Adds a global callback which is called when rendering stops.
1490
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1488
+ /**
1489
+ * Adds a global callback which is called when rendering stops.
1490
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
1491
1491
  */
1492
1492
  const addTail = callback => createSubs(callback, globalTailEffects);
1493
1493
  function run(effects, timestamp) {
@@ -1586,24 +1586,24 @@ function createLoop(roots) {
1586
1586
  }
1587
1587
  return {
1588
1588
  loop,
1589
- /**
1590
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1591
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1589
+ /**
1590
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
1591
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
1592
1592
  */
1593
1593
  invalidate,
1594
- /**
1595
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1596
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1594
+ /**
1595
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
1596
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
1597
1597
  */
1598
1598
  advance
1599
1599
  };
1600
1600
  }
1601
1601
 
1602
- /**
1603
- * Exposes an object's {@link LocalState}.
1604
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1605
- *
1606
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1602
+ /**
1603
+ * Exposes an object's {@link LocalState}.
1604
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1605
+ *
1606
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1607
1607
  */
1608
1608
  function useInstanceHandle(ref) {
1609
1609
  const instance = React.useRef(null);
@@ -1616,18 +1616,18 @@ function useStore() {
1616
1616
  return store;
1617
1617
  }
1618
1618
 
1619
- /**
1620
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1621
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1619
+ /**
1620
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1621
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1622
1622
  */
1623
1623
  function useThree(selector = state => state, equalityFn) {
1624
1624
  return useStore()(selector, equalityFn);
1625
1625
  }
1626
1626
 
1627
- /**
1628
- * Executes a callback before render in a shared frame loop.
1629
- * Can order effects with render priority or manually render with a positive priority.
1630
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1627
+ /**
1628
+ * Executes a callback before render in a shared frame loop.
1629
+ * Can order effects with render priority or manually render with a positive priority.
1630
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1631
1631
  */
1632
1632
  function useFrame(callback, renderPriority = 0) {
1633
1633
  const store = useStore();
@@ -1639,9 +1639,9 @@ function useFrame(callback, renderPriority = 0) {
1639
1639
  return null;
1640
1640
  }
1641
1641
 
1642
- /**
1643
- * Returns a node graph of an object with named nodes & materials.
1644
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1642
+ /**
1643
+ * Returns a node graph of an object with named nodes & materials.
1644
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1645
1645
  */
1646
1646
  function useGraph(object) {
1647
1647
  return React.useMemo(() => buildGraph(object), [object]);
@@ -1663,11 +1663,11 @@ function loadingFn(extensions, onProgress) {
1663
1663
  }, onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
1664
1664
  };
1665
1665
  }
1666
- /**
1667
- * Synchronously loads and caches assets with a three loader.
1668
- *
1669
- * Note: this hook's caller must be wrapped with `React.Suspense`
1670
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1666
+ /**
1667
+ * Synchronously loads and caches assets with a three loader.
1668
+ *
1669
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1670
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1671
1671
  */
1672
1672
  function useLoader(Proto, input, extensions, onProgress) {
1673
1673
  // Use suspense to load async assets
@@ -1679,16 +1679,16 @@ function useLoader(Proto, input, extensions, onProgress) {
1679
1679
  return Array.isArray(input) ? results : results[0];
1680
1680
  }
1681
1681
 
1682
- /**
1683
- * Preloads an asset into cache as a side-effect.
1682
+ /**
1683
+ * Preloads an asset into cache as a side-effect.
1684
1684
  */
1685
1685
  useLoader.preload = function (Proto, input, extensions) {
1686
1686
  const keys = Array.isArray(input) ? input : [input];
1687
1687
  return preload(loadingFn(extensions), [Proto, ...keys]);
1688
1688
  };
1689
1689
 
1690
- /**
1691
- * Removes a loaded asset from cache.
1690
+ /**
1691
+ * Removes a loaded asset from cache.
1692
1692
  */
1693
1693
  useLoader.clear = function (Proto, input) {
1694
1694
  const keys = Array.isArray(input) ? input : [input];
@@ -2084,10 +2084,10 @@ function Portal({
2084
2084
  children,
2085
2085
  container
2086
2086
  }) {
2087
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2088
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2089
- * the "R3F hooks can only be used within the Canvas component!" warning:
2090
- * <Canvas>
2087
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2088
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2089
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2090
+ * <Canvas>
2091
2091
  * {createPortal(...)} */
2092
2092
  const {
2093
2093
  events,
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-e9909912.cjs.dev.js');
5
+ var index = require('./index-0ee5ddc9.cjs.dev.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -251,9 +251,9 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
251
251
  }, fallback)));
252
252
  });
253
253
 
254
- /**
255
- * A DOM canvas which accepts threejs elements as children.
256
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
254
+ /**
255
+ * A DOM canvas which accepts threejs elements as children.
256
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
257
257
  */
258
258
  const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
259
259
  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-710e63a4.cjs.prod.js');
5
+ var index = require('./index-2003c0bb.cjs.prod.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -251,9 +251,9 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
251
251
  }, fallback)));
252
252
  });
253
253
 
254
- /**
255
- * A DOM canvas which accepts threejs elements as children.
256
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
254
+ /**
255
+ * A DOM canvas which accepts threejs elements as children.
256
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
257
257
  */
258
258
  const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
259
259
  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
@@ -1,5 +1,5 @@
1
- import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-5bde93f1.esm.js';
2
- export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-5bde93f1.esm.js';
1
+ import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-710fb441.esm.js';
2
+ export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-710fb441.esm.js';
3
3
  import _extends from '@babel/runtime/helpers/esm/extends';
4
4
  import * as React from 'react';
5
5
  import * as THREE from 'three';
@@ -224,9 +224,9 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
224
224
  }, fallback)));
225
225
  });
226
226
 
227
- /**
228
- * A DOM canvas which accepts threejs elements as children.
229
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
227
+ /**
228
+ * A DOM canvas which accepts threejs elements as children.
229
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
230
230
  */
231
231
  const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
232
232
  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('../../dist/index-e9909912.cjs.dev.js');
5
+ var index = require('../../dist/index-0ee5ddc9.cjs.dev.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -123,9 +123,9 @@ function createTouchEvents(store) {
123
123
  };
124
124
  }
125
125
 
126
- /**
127
- * A native canvas which accepts threejs elements as children.
128
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
126
+ /**
127
+ * A native canvas which accepts threejs elements as children.
128
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
129
129
  */
130
130
  const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
131
131
  children,
@@ -175,6 +175,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
175
175
  if (error) throw error;
176
176
  const viewRef = React__namespace.useRef(null);
177
177
  const root = React__namespace.useRef(null);
178
+ const [antialias, setAntialias] = React__namespace.useState(true);
178
179
  const onLayout = React__namespace.useCallback(e => {
179
180
  const {
180
181
  width,
@@ -200,7 +201,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
200
201
  addEventListener: () => {},
201
202
  removeEventListener: () => {},
202
203
  clientHeight: context.drawingBufferHeight,
203
- getContext: () => context
204
+ getContext: (_, {
205
+ antialias = false
206
+ }) => {
207
+ setAntialias(antialias);
208
+ return context;
209
+ }
204
210
  };
205
211
  root.current = index.createRoot(canvasShim);
206
212
  setCanvas(canvasShim);
@@ -266,15 +272,15 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
266
272
  ...style
267
273
  }
268
274
  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
269
- msaaSamples: 0,
275
+ msaaSamples: antialias ? 4 : 0,
270
276
  onContextCreate: onContextCreate,
271
277
  style: reactNative.StyleSheet.absoluteFill
272
278
  }));
273
279
  });
274
280
 
275
- /**
276
- * A native canvas which accepts threejs elements as children.
277
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
281
+ /**
282
+ * A native canvas which accepts threejs elements as children.
283
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
278
284
  */
279
285
  const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
280
286
  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('../../dist/index-710e63a4.cjs.prod.js');
5
+ var index = require('../../dist/index-2003c0bb.cjs.prod.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -123,9 +123,9 @@ function createTouchEvents(store) {
123
123
  };
124
124
  }
125
125
 
126
- /**
127
- * A native canvas which accepts threejs elements as children.
128
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
126
+ /**
127
+ * A native canvas which accepts threejs elements as children.
128
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
129
129
  */
130
130
  const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
131
131
  children,
@@ -175,6 +175,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
175
175
  if (error) throw error;
176
176
  const viewRef = React__namespace.useRef(null);
177
177
  const root = React__namespace.useRef(null);
178
+ const [antialias, setAntialias] = React__namespace.useState(true);
178
179
  const onLayout = React__namespace.useCallback(e => {
179
180
  const {
180
181
  width,
@@ -200,7 +201,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
200
201
  addEventListener: () => {},
201
202
  removeEventListener: () => {},
202
203
  clientHeight: context.drawingBufferHeight,
203
- getContext: () => context
204
+ getContext: (_, {
205
+ antialias = false
206
+ }) => {
207
+ setAntialias(antialias);
208
+ return context;
209
+ }
204
210
  };
205
211
  root.current = index.createRoot(canvasShim);
206
212
  setCanvas(canvasShim);
@@ -266,15 +272,15 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
266
272
  ...style
267
273
  }
268
274
  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
269
- msaaSamples: 0,
275
+ msaaSamples: antialias ? 4 : 0,
270
276
  onContextCreate: onContextCreate,
271
277
  style: reactNative.StyleSheet.absoluteFill
272
278
  }));
273
279
  });
274
280
 
275
- /**
276
- * A native canvas which accepts threejs elements as children.
277
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
281
+ /**
282
+ * A native canvas which accepts threejs elements as children.
283
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
278
284
  */
279
285
  const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
280
286
  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
@@ -1,5 +1,5 @@
1
- import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-5bde93f1.esm.js';
2
- export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-5bde93f1.esm.js';
1
+ import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-710fb441.esm.js';
2
+ export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-710fb441.esm.js';
3
3
  import _extends from '@babel/runtime/helpers/esm/extends';
4
4
  import * as React from 'react';
5
5
  import * as THREE from 'three';
@@ -98,9 +98,9 @@ function createTouchEvents(store) {
98
98
  };
99
99
  }
100
100
 
101
- /**
102
- * A native canvas which accepts threejs elements as children.
103
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
101
+ /**
102
+ * A native canvas which accepts threejs elements as children.
103
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
104
104
  */
105
105
  const CanvasImpl = /*#__PURE__*/React.forwardRef(({
106
106
  children,
@@ -150,6 +150,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
150
150
  if (error) throw error;
151
151
  const viewRef = React.useRef(null);
152
152
  const root = React.useRef(null);
153
+ const [antialias, setAntialias] = React.useState(true);
153
154
  const onLayout = React.useCallback(e => {
154
155
  const {
155
156
  width,
@@ -175,7 +176,12 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
175
176
  addEventListener: () => {},
176
177
  removeEventListener: () => {},
177
178
  clientHeight: context.drawingBufferHeight,
178
- getContext: () => context
179
+ getContext: (_, {
180
+ antialias = false
181
+ }) => {
182
+ setAntialias(antialias);
183
+ return context;
184
+ }
179
185
  };
180
186
  root.current = createRoot(canvasShim);
181
187
  setCanvas(canvasShim);
@@ -241,15 +247,15 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
241
247
  ...style
242
248
  }
243
249
  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
244
- msaaSamples: 0,
250
+ msaaSamples: antialias ? 4 : 0,
245
251
  onContextCreate: onContextCreate,
246
252
  style: StyleSheet.absoluteFill
247
253
  }));
248
254
  });
249
255
 
250
- /**
251
- * A native canvas which accepts threejs elements as children.
252
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
256
+ /**
257
+ * A native canvas which accepts threejs elements as children.
258
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
253
259
  */
254
260
  const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
255
261
  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
@@ -1,5 +1,5 @@
1
- {
2
- "main": "dist/react-three-fiber-native.cjs.js",
3
- "module": "dist/react-three-fiber-native.esm.js",
4
- "types": "dist/react-three-fiber-native.cjs.d.ts"
5
- }
1
+ {
2
+ "main": "dist/react-three-fiber-native.cjs.js",
3
+ "module": "dist/react-three-fiber-native.esm.js",
4
+ "types": "dist/react-three-fiber-native.cjs.d.ts"
5
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-three/fiber",
3
- "version": "8.15.12",
3
+ "version": "8.15.13",
4
4
  "description": "A React renderer for Threejs",
5
5
  "keywords": [
6
6
  "react",