@react-three/fiber 8.0.8 → 8.0.11

package/dist/{index-b8ee55f0.cjs.dev.js → index-f7939a95.cjs.dev.js}

@@ -39,11 +39,17 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -75,11 +81,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -94,29 +95,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-const pick = (obj, keys) => filterKeys(obj, false, ...keys);
-/**
- * Clones an object and prunes or omits keys.
- */
-
-const omit = (obj, keys) => filterKeys(obj, true, ...keys);
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -342,12 +320,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -416,6 +398,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1188,8 +1189,8 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1396,24 +1397,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1580,12 +1564,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -1953,6 +1936,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1964,45 +1948,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
         if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
         state[key] !== injectState[key]) delete intersect[key];
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React__namespace.useState(() => {
-    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React__namespace.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE__namespace.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React__namespace.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -2028,8 +2046,6 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
-exports.omit = omit;
-exports.pick = pick;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;
@@ -2039,6 +2055,6 @@ exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b8ee55f0.cjs.dev.js');
+var index = require('./index-f7939a95.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -119,25 +119,35 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -149,15 +159,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
+  const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -168,16 +173,29 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -189,10 +207,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }
 
   index.useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
-    return () => index.unmountComponentAtNode(canvas);
+    setCanvas(canvasRef.current);
   }, []);
+  React__namespace.useEffect(() => {
+    if (canvas) return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
@@ -202,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
+  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
     ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
     style: {
       display: 'block'

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-c4e0ac66.cjs.prod.js');
+var index = require('./index-e936c560.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -119,25 +119,35 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -149,15 +159,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
+  const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -168,16 +173,29 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -189,10 +207,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }
 
   index.useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
-    return () => index.unmountComponentAtNode(canvas);
+    setCanvas(canvasRef.current);
   }, []);
+  React__namespace.useEffect(() => {
+    if (canvas) return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
@@ -202,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
+  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
     ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
     style: {
       display: 'block'

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-548cf96a.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-548cf96a.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-3c7aae97.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-3c7aae97.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -89,25 +89,35 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -119,15 +129,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const meshRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
-  const canvasProps = pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -138,16 +143,29 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
@@ -159,10 +177,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }
 
   useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
-    return () => unmountComponentAtNode(canvas);
+    setCanvas(canvasRef.current);
   }, []);
+  React.useEffect(() => {
+    if (canvas) return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs([meshRef, containerRef]),
     style: {
@@ -172,7 +191,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React.createElement("canvas", {
+  }, props), /*#__PURE__*/React.createElement("canvas", {
     ref: mergeRefs([canvasRef, forwardedRef]),
     style: {
       display: 'block'