@react-three/fiber 8.0.0-beta.5 → 8.0.0-beta.6

package/dist/{index-32069e53.esm.js → index-74b1fd6b.esm.js}

@@ -15,6 +15,15 @@ const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
 }
+/**
+ * Returns instance root state
+ */
+
+const getRootState = obj => {
+  var _r3f;
+
+  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.
@@ -24,11 +33,7 @@ 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;
-    }
-
+    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
     return acc;
   }, {});
 }
@@ -382,6 +387,7 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
+    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -389,6 +395,7 @@ function removeInteractivity(store, object) {
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
     if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
       internal.hovered.delete(key);
     }
   });
@@ -398,31 +405,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE.Vector3();
-  /** Sets up defaultRaycaster */
-
-  function prepareRay(event) {
-    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
-
-    const state = store.getState();
-    const {
-      raycaster,
-      mouse,
-      camera,
-      size
-    } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
-    // Events trigger outside of canvas when moved
-
-    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);
-  }
   /** Calculates delta */
 
-
   function calculateDistance(event) {
     const {
       internal
@@ -442,55 +426,70 @@ function createEvents(store) {
     }));
   }
 
-  function intersect(filter) {
+  function intersect(event, filter) {
     const state = store.getState();
-    const {
-      raycaster,
-      internal
-    } = state; // Skip event handling when noEvents is set
-
-    if (!raycaster.enabled) return [];
-    const seen = new Set();
+    const duplicates = new Set();
     const intersections = []; // Allow callers to eliminate event objects
 
-    const eventsObjects = filter ? filter(internal.interaction) : internal.interaction; // Intersect known handler objects and filter against duplicates
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
+
+    eventsObjects.forEach(obj => {
+      const state = getRootState(obj);
+
+      if (state) {
+        state.raycaster.camera = undefined;
+      }
+    }); // Collect events
+
+    let hits = eventsObjects // Intersect objects
+    .flatMap(obj => {
+      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
+
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
+
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      } // Intersect object by object
+
+
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }) // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return 0;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    }) // Filter out duplicates
+    .filter(item => {
       const id = makeId(item);
-      if (seen.has(id)) return false;
-      seen.add(id);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
       return true;
     }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
 
-    if (raycaster.filter) intersects = raycaster.filter(intersects, state);
+    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
 
-    for (const intersect of intersects) {
-      let eventObject = intersect.object; // Bubble event up
+    for (const hit of hits) {
+      let eventObject = hit.object; // Bubble event up
 
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    }
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
-
-
-  function patchIntersects(intersections, event) {
-    const {
-      internal
-    } = store.getState(); // If the interaction is captured, make all capturing targets  part of the
-    // intersect.
 
-    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         intersections.push(captureData.intersection);
       }
     }
@@ -503,13 +502,13 @@ function createEvents(store) {
   function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
-      mouse,
+      pointer,
       camera,
       internal
     } = store.getState(); // If anything has been found, forward it to the event listeners
 
     if (intersections.length) {
-      const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
+      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
@@ -560,8 +559,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -598,8 +596,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -664,14 +660,15 @@ function createEvents(store) {
       const {
         onPointerMissed,
         internal
-      } = store.getState();
-      prepareRay(event);
+      } = store.getState(); //prepareRay(event)
+
       internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = patchIntersects(intersect(filter), event);
+      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
+
+      const hits = intersect(event, filter);
       const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
 
       if (name === 'onPointerDown') {
@@ -1151,16 +1148,18 @@ const createStore = (invalidate, advance) => {
     }));
 
     return {
+      set,
+      get,
       // Mock objects that have to be configured
       gl: null,
       camera: null,
       raycaster: null,
       events: {
+        priority: 1,
+        enabled: true,
         connected: false
       },
       xr: null,
-      set,
-      get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       linear: false,
@@ -1168,7 +1167,7 @@ const createStore = (invalidate, advance) => {
       scene: prepare(new THREE.Scene()),
       controls: null,
       clock: new THREE.Clock(),
-      mouse: new THREE.Vector2(),
+      pointer: new THREE.Vector2(),
       frameloop: 'always',
       onPointerMissed: undefined,
       performance: {
@@ -1237,6 +1236,7 @@ const createStore = (invalidate, advance) => {
           frameloop
         }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
@@ -1438,43 +1438,6 @@ function useStore() {
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
-function useInject(state) {
-  const useOriginalStore = useStore();
-  const useInjectStore = React.useMemo(() => {
-    const useInjected = (sel = state => state) => {
-      // Execute the useStore hook with the selector once, to maintain reactivity, result doesn't matter
-      useOriginalStore(sel); // Inject data and return the result, either selected or raw
-
-      return sel({ ...useOriginalStore.getState(),
-        ...state
-      });
-    };
-
-    useInjected.setState = useOriginalStore.setState;
-    useInjected.destroy = useOriginalStore.destroy; // Patch getState
-
-    useInjected.getState = () => {
-      return { ...useOriginalStore.getState(),
-        ...state
-      };
-    }; // Patch subscribe
-
-
-    useInjected.subscribe = listener => {
-      return useOriginalStore.subscribe((current, previous) => listener({ ...current,
-        ...state
-      }, previous));
-    };
-
-    return useInjected;
-  }, [useOriginalStore, state]); // Return the patched store and a provider component
-
-  return React.useMemo(() => [({
-    children
-  }) => /*#__PURE__*/React.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore], [useInjectStore]);
-}
 function useFrame(callback, renderPriority = 0) {
   const subscribe = useStore().getState().internal.subscribe; // Update ref
 
@@ -1501,6 +1464,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React.useRef(fn);
+  React.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];
@@ -1600,9 +1568,7 @@ function createRoot(canvas) {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-        enabled: true,
-        ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
         params: { ...raycaster.params,
@@ -1756,9 +1722,10 @@ function Provider({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    state.events.connect == null ? void 0 : state.events.connect(target.parentNode); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
     if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -1805,20 +1772,56 @@ function createPortal(children, container, state) {
 }
 
 function Portal({
-  state,
+  state = {},
   children,
   container
 }) {
   /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are in in r3f's renderer but in react-dom, it would trigger
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
    *  the "R3F hooks can only be used within the Canvas component!" warning:
    *  <Canvas>
    *    {createPortal(...)} */
-  const portalState = React.useMemo(() => ({ ...state,
-    scene: container
-  }), [state, container]);
-  const [PortalProvider, portalRoot] = useInject(portalState);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(PortalProvider, null, children), portalRoot, null));
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React.useState(() => new THREE.Raycaster());
+  const inject = React.useCallback((state, injectState) => {
+    const intersect = { ...state
+    };
+
+    if (injectState) {
+      // Only the fields of "state" that do not differ from injectState
+      Object.keys(state).forEach(key => {
+        if (state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
+
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React.useState(() => {
+    const store = create((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1828,4 +1831,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { createRoot as a, context as b, createEvents as c, createPortal as d, extend as e, reconciler as f, applyProps as g, dispose as h, invalidate as i, advance as j, addEffect as k, addAfterEffect as l, addTail as m, act as n, omit as o, pick as p, roots as q, render as r, useStore as s, threeTypes as t, unmountComponentAtNode as u, useThree as v, useInject as w, useFrame as x, useGraph as y, useLoader as z };
+export { useLoader as A, createRoot as a, unmountComponentAtNode as b, createEvents as c, context as d, extend as e, createPortal as f, reconciler as g, applyProps as h, dispose as i, invalidate as j, advance as k, addEffect as l, addAfterEffect as m, addTail as n, omit as o, pick as p, getRootState as q, render as r, act as s, threeTypes as t, useMemoizedFn as u, roots as v, useStore as w, useThree as x, useFrame as y, useGraph as z };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-5dc2de40.cjs.dev.js');
+var index = require('./index-4782ba04.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -58,7 +58,17 @@ function createPointerEvents(store) {
     handlePointer
   } = index.createEvents(store);
   return {
-    connected: false,
+    priority: 1,
+    enabled: true,
+
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+
+    connected: undefined,
     handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
       [key]: handlePointer(key)
     }), {}),
@@ -99,7 +109,7 @@ function createPointerEvents(store) {
         });
         set(state => ({
           events: { ...state.events,
-            connected: false
+            connected: undefined
           }
         }));
       }
@@ -153,6 +163,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // 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
@@ -166,8 +177,12 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const divProps = index.omit(props, CANVAS_PROPS);
+  const canvasProps = index.pick({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
+  const divProps = index.omit({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -230,14 +245,15 @@ exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;
 exports.render = index.render;
 exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
-exports.useInject = index.useInject;
 exports.useLoader = index.useLoader;
+exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-e2a317e2.cjs.prod.js');
+var index = require('./index-45f5b2a2.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -58,7 +58,17 @@ function createPointerEvents(store) {
     handlePointer
   } = index.createEvents(store);
   return {
-    connected: false,
+    priority: 1,
+    enabled: true,
+
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+
+    connected: undefined,
     handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
       [key]: handlePointer(key)
     }), {}),
@@ -99,7 +109,7 @@ function createPointerEvents(store) {
         });
         set(state => ({
           events: { ...state.events,
-            connected: false
+            connected: undefined
           }
         }));
       }
@@ -153,6 +163,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // 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
@@ -166,8 +177,12 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const divProps = index.omit(props, CANVAS_PROPS);
+  const canvasProps = index.pick({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
+  const divProps = index.omit({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -230,14 +245,15 @@ exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;
 exports.extend = index.extend;
+exports.getRootState = index.getRootState;
 exports.invalidate = index.invalidate;
 exports.reconciler = index.reconciler;
 exports.render = index.render;
 exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
-exports.useInject = index.useInject;
 exports.useLoader = index.useLoader;
+exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-32069e53.esm.js';
-export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, x as useFrame, y as useGraph, w as useInject, z as useLoader, s as useStore, v as useThree } from './index-32069e53.esm.js';
+import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-74b1fd6b.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-74b1fd6b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -28,7 +28,17 @@ function createPointerEvents(store) {
     handlePointer
   } = createEvents(store);
   return {
-    connected: false,
+    priority: 1,
+    enabled: true,
+
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+
+    connected: undefined,
     handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
       [key]: handlePointer(key)
     }), {}),
@@ -69,7 +79,7 @@ function createPointerEvents(store) {
         });
         set(state => ({
           events: { ...state.events,
-            connected: false
+            connected: undefined
           }
         }));
       }
@@ -123,6 +133,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // 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
@@ -136,8 +147,12 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   });
   const canvasRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const divProps = omit(props, CANVAS_PROPS);
+  const canvasProps = pick({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
+  const divProps = omit({ ...props,
+    onPointerMissed
+  }, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)