@react-three/fiber 9.1.1 → 9.1.3

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 +1148 -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-66111f5e.cjs.dev.js} +83 -85
  18. package/dist/{events-fed10990.cjs.prod.js → events-a96a0963.cjs.prod.js} +83 -85
  19. package/dist/{events-9ea6854d.esm.js → events-f681e724.esm.js} +83 -85
  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 +12 -8
  24. package/native/dist/react-three-fiber-native.cjs.prod.js +12 -8
  25. package/native/dist/react-three-fiber-native.esm.js +14 -10
  26. package/native/package.json +5 -5
  27. package/package.json +2 -2
  28. package/readme.md +253 -253
@@ -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];
@@ -2009,7 +2007,7 @@ function Provider({
2009
2007
  active: true
2010
2008
  }
2011
2009
  }));
2012
- // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
2010
+ // Notify that init is completed, the scene graph exists, but nothing has yet rendered
2013
2011
  if (onCreated) onCreated(state);
2014
2012
  // Connect events to the targets parent, this is done to ensure events are registered on
2015
2013
  // a shared target, and not on the canvas itself
@@ -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);
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var events = require('./events-b2f77bcf.cjs.dev.js');
5
+ var events = require('./events-66111f5e.cjs.dev.js');
6
6
  var React = require('react');
7
7
  var THREE = require('three');
8
8
  var useMeasure = require('react-use-measure');
@@ -179,9 +179,9 @@ function CanvasImpl({
179
179
  });
180
180
  }
181
181
 
182
- /**
183
- * A DOM canvas which accepts threejs elements as children.
184
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
182
+ /**
183
+ * A DOM canvas which accepts threejs elements as children.
184
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
185
185
  */
186
186
  function Canvas(props) {
187
187
  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var events = require('./events-fed10990.cjs.prod.js');
5
+ var events = require('./events-a96a0963.cjs.prod.js');
6
6
  var React = require('react');
7
7
  var THREE = require('three');
8
8
  var useMeasure = require('react-use-measure');
@@ -179,9 +179,9 @@ function CanvasImpl({
179
179
  });
180
180
  }
181
181
 
182
- /**
183
- * A DOM canvas which accepts threejs elements as children.
184
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
182
+ /**
183
+ * A DOM canvas which accepts threejs elements as children.
184
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
185
185
  */
186
186
  function Canvas(props) {
187
187
  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
@@ -1,5 +1,5 @@
1
- import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-9ea6854d.esm.js';
2
- export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, f as events, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './events-9ea6854d.esm.js';
1
+ import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-f681e724.esm.js';
2
+ export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, f as events, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './events-f681e724.esm.js';
3
3
  import * as React from 'react';
4
4
  import * as THREE from 'three';
5
5
  import useMeasure from 'react-use-measure';
@@ -152,9 +152,9 @@ function CanvasImpl({
152
152
  });
153
153
  }
154
154
 
155
- /**
156
- * A DOM canvas which accepts threejs elements as children.
157
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
155
+ /**
156
+ * A DOM canvas which accepts threejs elements as children.
157
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
158
158
  */
159
159
  function Canvas(props) {
160
160
  return /*#__PURE__*/jsx(FiberProvider, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var events = require('../../dist/events-b2f77bcf.cjs.dev.js');
5
+ var events = require('../../dist/events-66111f5e.cjs.dev.js');
6
6
  var React = require('react');
7
7
  var THREE = require('three');
8
8
  var reactNative = require('react-native');
@@ -61,6 +61,7 @@ function CanvasImpl({
61
61
  onPointerMissed,
62
62
  onCreated,
63
63
  ref,
64
+ pointerEvents,
64
65
  ...props
65
66
  }) {
66
67
  // Create a known catalogue of Threejs-native elements
@@ -252,7 +253,7 @@ function CanvasImpl({
252
253
  return () => events.unmountComponentAtNode(canvas);
253
254
  }
254
255
  }, [canvas]);
255
- return /*#__PURE__*/jsxRuntime.jsx(_View, {
256
+ return /*#__PURE__*/jsxRuntime.jsxs(_View, {
256
257
  ...props,
257
258
  ref: viewRef,
258
259
  onLayout: onLayout,
@@ -260,18 +261,21 @@ function CanvasImpl({
260
261
  flex: 1,
261
262
  ...style
262
263
  },
263
- ...bind,
264
- children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
264
+ children: [width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
265
265
  msaaSamples: antialias ? 4 : 0,
266
266
  onContextCreate: onContextCreate,
267
267
  style: reactNative.StyleSheet.absoluteFill
268
- })
268
+ }), /*#__PURE__*/jsxRuntime.jsx(_View, {
269
+ style: reactNative.StyleSheet.absoluteFill,
270
+ pointerEvents: pointerEvents,
271
+ ...bind
272
+ })]
269
273
  });
270
274
  }
271
275
 
272
- /**
273
- * A native canvas which accepts threejs elements as children.
274
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
276
+ /**
277
+ * A native canvas which accepts threejs elements as children.
278
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
275
279
  */
276
280
  function Canvas(props) {
277
281
  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var events = require('../../dist/events-fed10990.cjs.prod.js');
5
+ var events = require('../../dist/events-a96a0963.cjs.prod.js');
6
6
  var React = require('react');
7
7
  var THREE = require('three');
8
8
  var reactNative = require('react-native');
@@ -61,6 +61,7 @@ function CanvasImpl({
61
61
  onPointerMissed,
62
62
  onCreated,
63
63
  ref,
64
+ pointerEvents,
64
65
  ...props
65
66
  }) {
66
67
  // Create a known catalogue of Threejs-native elements
@@ -252,7 +253,7 @@ function CanvasImpl({
252
253
  return () => events.unmountComponentAtNode(canvas);
253
254
  }
254
255
  }, [canvas]);
255
- return /*#__PURE__*/jsxRuntime.jsx(_View, {
256
+ return /*#__PURE__*/jsxRuntime.jsxs(_View, {
256
257
  ...props,
257
258
  ref: viewRef,
258
259
  onLayout: onLayout,
@@ -260,18 +261,21 @@ function CanvasImpl({
260
261
  flex: 1,
261
262
  ...style
262
263
  },
263
- ...bind,
264
- children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
264
+ children: [width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
265
265
  msaaSamples: antialias ? 4 : 0,
266
266
  onContextCreate: onContextCreate,
267
267
  style: reactNative.StyleSheet.absoluteFill
268
- })
268
+ }), /*#__PURE__*/jsxRuntime.jsx(_View, {
269
+ style: reactNative.StyleSheet.absoluteFill,
270
+ pointerEvents: pointerEvents,
271
+ ...bind
272
+ })]
269
273
  });
270
274
  }
271
275
 
272
- /**
273
- * A native canvas which accepts threejs elements as children.
274
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
276
+ /**
277
+ * A native canvas which accepts threejs elements as children.
278
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
275
279
  */
276
280
  function Canvas(props) {
277
281
  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
@@ -1,11 +1,11 @@
1
- import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-9ea6854d.esm.js';
2
- export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-9ea6854d.esm.js';
1
+ import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-f681e724.esm.js';
2
+ export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-f681e724.esm.js';
3
3
  import * as React from 'react';
4
4
  import * as THREE from 'three';
5
5
  import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
6
6
  import { GLView } from 'expo-gl';
7
7
  import { FiberProvider } from 'its-fine';
8
- import { jsx } from 'react/jsx-runtime';
8
+ import { jsx, jsxs } from 'react/jsx-runtime';
9
9
  import { Asset } from 'expo-asset';
10
10
  import * as fs from 'expo-file-system';
11
11
  import { fromByteArray } from 'base64-js';
@@ -36,6 +36,7 @@ function CanvasImpl({
36
36
  onPointerMissed,
37
37
  onCreated,
38
38
  ref,
39
+ pointerEvents,
39
40
  ...props
40
41
  }) {
41
42
  // Create a known catalogue of Threejs-native elements
@@ -227,7 +228,7 @@ function CanvasImpl({
227
228
  return () => unmountComponentAtNode(canvas);
228
229
  }
229
230
  }, [canvas]);
230
- return /*#__PURE__*/jsx(_View, {
231
+ return /*#__PURE__*/jsxs(_View, {
231
232
  ...props,
232
233
  ref: viewRef,
233
234
  onLayout: onLayout,
@@ -235,18 +236,21 @@ function CanvasImpl({
235
236
  flex: 1,
236
237
  ...style
237
238
  },
238
- ...bind,
239
- children: width > 0 && /*#__PURE__*/jsx(GLView, {
239
+ children: [width > 0 && /*#__PURE__*/jsx(GLView, {
240
240
  msaaSamples: antialias ? 4 : 0,
241
241
  onContextCreate: onContextCreate,
242
242
  style: StyleSheet.absoluteFill
243
- })
243
+ }), /*#__PURE__*/jsx(_View, {
244
+ style: StyleSheet.absoluteFill,
245
+ pointerEvents: pointerEvents,
246
+ ...bind
247
+ })]
244
248
  });
245
249
  }
246
250
 
247
- /**
248
- * A native canvas which accepts threejs elements as children.
249
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
251
+ /**
252
+ * A native canvas which accepts threejs elements as children.
253
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
250
254
  */
251
255
  function Canvas(props) {
252
256
  return /*#__PURE__*/jsx(FiberProvider, {
@@ -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": "9.1.1",
3
+ "version": "9.1.3",
4
4
  "description": "A React renderer for Threejs",
5
5
  "keywords": [
6
6
  "react",
@@ -14,7 +14,7 @@
14
14
  "maintainers": [
15
15
  "Josh Ellis (https://github.com/joshuaellis)",
16
16
  "Cody Bennett (https://github.com/codyjasonbennett)",
17
- "Kris Baumgarnter (https://github.com/krispya)"
17
+ "Kris Baumgarter (https://github.com/krispya)"
18
18
  ],
19
19
  "bugs": {
20
20
  "url": "https://github.com/pmndrs/react-three-fiber/issues"