@react-three/fiber 7.0.24 → 7.0.27

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from './index';
-import { UseStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    events?: (store: UseStore<RootState>) => EventManager<any>;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from './index';
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseStore } from 'zustand';
-import { RootState } from '../core/store';
-import type { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import type { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/declarations/src/web/index.d.ts

@@ -1,36 +1,36 @@
-/// <reference types="react-reconciler" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseStore } from 'zustand';
-import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
-import { extend, Root } from '../core/renderer';
-import { addEffect, addAfterEffect, addTail } from '../core/loop';
-import { createPointerEvents as events } from './events';
-import { Canvas } from './Canvas';
-import { EventManager } from '../core/events';
-declare const roots: Map<Element, Root>;
-declare const modes: readonly ["legacy", "blocking", "concurrent"];
-declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").InstanceProps | import("../core/renderer").DiffSet) => import("../core/renderer").Instance;
-declare type Properties<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
-}[keyof T]>;
-declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: GLProps;
-    events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
-    size?: Size;
-    mode?: typeof modes[number];
-    onCreated?: (state: RootState) => void;
-};
-declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseStore<RootState>;
-declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-declare function dispose<TObj extends {
-    dispose?: () => void;
-    type?: string;
-    [key: string]: any;
-}>(obj: TObj): void;
-declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
-export * from '../core/hooks';
-export { context, render, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };
+/// <reference types="react-reconciler" />
+import * as THREE from 'three';
+import * as React from 'react';
+import { UseBoundStore } from 'zustand';
+import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
+import { extend, Root } from '../core/renderer';
+import { addEffect, addAfterEffect, addTail } from '../core/loop';
+import { createPointerEvents as events } from './events';
+import { Canvas } from './Canvas';
+import { EventManager } from '../core/events';
+declare const roots: Map<Element, Root>;
+declare const modes: readonly ["legacy", "blocking", "concurrent"];
+declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
+declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").DiffSet | import("../core/renderer").InstanceProps) => import("../core/renderer").Instance;
+declare type Properties<T> = Pick<T, {
+    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
+}[keyof T]>;
+declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
+export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
+    gl?: GLProps;
+    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
+    size?: Size;
+    mode?: typeof modes[number];
+    onCreated?: (state: RootState) => void;
+};
+declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseBoundStore<RootState>;
+declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
+declare function dispose<TObj extends {
+    dispose?: () => void;
+    type?: string;
+    [key: string]: any;
+}>(obj: TObj): void;
+declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
+export * from '../core/hooks';
+export { context, render, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };

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

@@ -22,14 +22,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -114,7 +112,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -125,14 +123,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -588,6 +583,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -618,37 +615,38 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE__namespace.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
         localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-          // If value is an array
-          if (Array.isArray(value)) {
-            if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-          } // Test again target.copy(class) next ...
-          else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/pmndrs/react-three-fiber/issues/274
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-                if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-                else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                  else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-              } // Else, just overwrite the value
-
-        } else {
-          currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // If value is an array
+        if (Array.isArray(value)) {
+          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+        } // Test again target.copy(class) next ...
+        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
+        // https://github.com/pmndrs/react-three-fiber/issues/274
+        else if (value !== undefined) {
+          const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+          if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+          else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+          else targetProp.set(value); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+          if (!isLinear && isColor) targetProp.convertSRGBToLinear();
+        } // Else, just overwrite the value
+
+      } else {
+        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // https://github.com/pmndrs/react-three-fiber/issues/344
+
+        if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -924,10 +922,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -939,7 +940,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1053,9 +1054,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1133,7 +1132,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     clock.elapsedTime = 0;
   }
 
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     // Create custom raycaster
     const raycaster = new THREE__namespace.Raycaster();
     const {
@@ -1567,10 +1566,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1599,10 +1599,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1620,7 +1621,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }
@@ -1683,6 +1684,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1868,8 +1874,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 }
@@ -1907,5 +1912,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;

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

@@ -22,14 +22,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -114,7 +112,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -125,14 +123,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -588,6 +583,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -618,37 +615,38 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE__namespace.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
         localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-          // If value is an array
-          if (Array.isArray(value)) {
-            if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-          } // Test again target.copy(class) next ...
-          else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/pmndrs/react-three-fiber/issues/274
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-                if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-                else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                  else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-              } // Else, just overwrite the value
-
-        } else {
-          currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // If value is an array
+        if (Array.isArray(value)) {
+          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+        } // Test again target.copy(class) next ...
+        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
+        // https://github.com/pmndrs/react-three-fiber/issues/274
+        else if (value !== undefined) {
+          const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+          if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+          else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+          else targetProp.set(value); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+          if (!isLinear && isColor) targetProp.convertSRGBToLinear();
+        } // Else, just overwrite the value
+
+      } else {
+        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // https://github.com/pmndrs/react-three-fiber/issues/344
+
+        if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -924,10 +922,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -939,7 +940,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1053,9 +1054,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1133,7 +1132,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     clock.elapsedTime = 0;
   }
 
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     // Create custom raycaster
     const raycaster = new THREE__namespace.Raycaster();
     const {
@@ -1567,10 +1566,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1599,10 +1599,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1620,7 +1621,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }
@@ -1683,6 +1684,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1868,8 +1874,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 }
@@ -1907,5 +1912,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;