@react-three/fiber 7.0.9 → 7.0.13

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @react-three/fiber
 
+## 7.0.13
+
+### Patch Changes
+
+- f256558: fix(core): don't overwrite camera rotation
+- 51e6fc9: fix(core): safely handle external instances
+
+## 7.0.12
+
+### Patch Changes
+
+- 0df6073: fix: missed events
+
+## 7.0.11
+
+### Patch Changes
+
+- 62b0a3a: fix: event order of missed pointers
+
+## 7.0.10
+
+### Patch Changes
+
+- e019dd4: fixes
+
 ## 7.0.9
 
 ### Patch Changes

package/dist/declarations/src/core/renderer.d.ts

@@ -10,6 +10,7 @@ export declare type Root = {
 export declare type LocalState = {
     root: UseStore<RootState>;
     objects: Instance[];
+    parent: Instance | null;
     primitive?: boolean;
     handlers: {
         count: number;
@@ -23,9 +24,8 @@ export declare type ClassConstructor = {
 };
 export declare type AttachFnType = (self: Instance, parent: Instance) => void;
 export declare type AttachFnsType = [attach: string | AttachFnType, detach: string | AttachFnType];
-export declare type BaseInstance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
+export declare type BaseInstance = Omit<THREE.Object3D, 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
     __r3f: LocalState;
-    parent: Instance | null;
     children: Instance[];
     attach?: string;
     attachFns?: AttachFnsType;

package/dist/declarations/src/core/store.d.ts

@@ -101,6 +101,7 @@ export declare type StoreProps = {
     onPointerMissed?: (event: ThreeEvent<PointerEvent>) => void;
 };
 export declare type ApplyProps = (instance: Instance, newProps: InstanceProps) => void;
+export declare function calculateDpr(dpr: Dpr): number;
 declare const context: React.Context<UseStore<RootState>>;
 declare const createStore: (applyProps: ApplyProps, invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined) => void, props: StoreProps) => UseStore<RootState>;
 export { createStore, context };

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

@@ -58,7 +58,8 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    if (is.obj(a) && a === b) return true; // Array, shallow compare first to see if it's a match
 
     if (is.arr(a) && a == b) return true; // Last resort, go through keys
 
@@ -132,7 +133,11 @@ function createEvents(store) {
 
 
   function filterPointerEvents(objects) {
-    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => obj.__r3f.handlers['onPointer' + name]));
+    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
+      var _r3f;
+
+      return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
+    }));
   }
 
   function intersect(filter) {
@@ -162,7 +167,9 @@ function createEvents(store) {
       let eventObject = intersect.object; // Bubble event up
 
       while (eventObject) {
-        if (eventObject.__r3f.handlers.count) intersections.push({ ...intersect,
+        var _r3f2;
+
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -189,7 +196,7 @@ function createEvents(store) {
   /**  Handles intersections by forwarding them to handlers */
 
 
-  function handleIntersects(intersections, event, callback) {
+  function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
       mouse,
@@ -199,7 +206,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-      const delta = event.type === 'click' ? calculateDistance(event) : 0;
 
       const releasePointerCapture = id => event.target.releasePointerCapture(id);
 
@@ -300,11 +306,13 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+        var _r3f3;
+
         const eventObject = hoveredObj.eventObject;
-        const handlers = eventObject.__r3f.handlers;
+        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers.count) {
+        if (handlers != null && handlers.count) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -345,15 +353,34 @@ function createEvents(store) {
       prepareRay(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); // Take care of unhover
+      const hits = patchIntersects(intersect(filter), event);
+      const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
+
+      if (name === 'onPointerDown') {
+        internal.initialClick = [event.offsetX, event.offsetY];
+        internal.initialHits = hits.map(hit => hit.eventObject);
+      } // If a click yields no results, pass it back to the user as a miss
+      // Missed events have to come first in order to establish user-land side-effect clean up
+
+
+      if (isClickEvent && !hits.length) {
+        if (delta <= 2) {
+          pointerMissed(event, internal.interaction);
+          if (onPointerMissed) onPointerMissed(event);
+        }
+      } // Take care of unhover
+
 
       if (isPointerMove) cancelPointer(hits);
-      handleIntersects(hits, event, data => {
+      handleIntersects(hits, event, delta, data => {
+        var _r3f4;
+
         const eventObject = data.eventObject;
-        const handlers = eventObject.__r3f.handlers; // Check presence of handlers
+        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
 
-        if (!handlers.count) return;
+        if (!(handlers != null && handlers.count)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -383,33 +410,22 @@ function createEvents(store) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+              // Missed events have to come first
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
+
               handler(data);
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
             }
           }
         }
-      }); // Save initial coordinates on pointer-down
-
-      if (name === 'onPointerDown') {
-        internal.initialClick = [event.offsetX, event.offsetY];
-        internal.initialHits = hits.map(hit => hit.eventObject);
-      } // If a click yields no results, pass it back to the user as a miss
-
-
-      if ((name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick') && !hits.length) {
-        if (calculateDistance(event) <= 2) {
-          pointerMissed(event, internal.interaction);
-          if (onPointerMissed) onPointerMissed(event);
-        }
-      }
+      });
     };
   };
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f$handlers$onPoin, _r3f$handlers;
+      var _r3f5;
 
-      return (_r3f$handlers$onPoin = (_r3f$handlers = object.__r3f.handlers).onPointerMissed) == null ? void 0 : _r3f$handlers$onPoin.call(_r3f$handlers, event);
+      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
     });
   }
 
@@ -464,6 +480,7 @@ function prepare(object, state) {
         count: 0
       },
       objects: [],
+      parent: null,
       ...state
     };
   }
@@ -522,7 +539,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2;
+    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -607,16 +624,16 @@ function createRenderer(roots) {
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
       if (localState.handlers.count) rootState.internal.interaction.push(instance);
-    } // Call the update lifecycle when it is being updated, but only when it is part of the scene
+    } // Call the update lifecycle when it is being updated
 
 
-    if (changes.length && instance.parent) updateInstance(instance);
+    if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
   }
 
   function invalidateInstance(instance) {
-    var _instance$__r3f4, _instance$__r3f4$root;
+    var _instance$__r3f5, _instance$__r3f5$root;
 
-    const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
+    const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
     if (state && state.internal.frames === 0) state.invalidate();
   }
 
@@ -708,7 +725,7 @@ function createRenderer(roots) {
         } else if (is.fun(attachFn)) {
           attachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         addedAsChild = true;
@@ -718,10 +735,13 @@ function createRenderer(roots) {
         // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
         // that is, anything that's a child in React but not a child in the scenegraph.
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -738,7 +758,7 @@ function createRenderer(roots) {
       } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
         // attach and attachObject don't have an order anyway, so just append
         return appendChild(parentInstance, child);
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -751,10 +771,13 @@ function createRenderer(roots) {
 
       if (!added) {
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -766,17 +789,14 @@ function createRenderer(roots) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _child$__r3f2;
+      var _parentInstance$__r3f, _child$__r3f2;
 
-      if (parentInstance.__r3f.objects) {
-        const oldLength = parentInstance.__r3f.objects.length;
-        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
-        const newLength = parentInstance.__r3f.objects.length; // was it in the list?
+      if (child.__r3f) {
+        child.__r3f.parent = null;
+      }
 
-        if (newLength < oldLength) {
-          // we had also set this, so we must clear it now
-          child.parent = null;
-        }
+      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) {
+        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
       } // Remove attachment
 
 
@@ -849,7 +869,9 @@ function createRenderer(roots) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    const parent = instance.parent;
+    var _instance$__r3f6;
+
+    const parent = (_instance$__r3f6 = instance.__r3f) == null ? void 0 : _instance$__r3f6.parent;
     if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
@@ -1012,6 +1034,9 @@ function createRenderer(roots) {
 
 const isRenderer = def => def && !!def.render;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+function calculateDpr(dpr) {
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+}
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (applyProps, invalidate, advance, props) => {
@@ -1068,14 +1093,10 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera.position.z = 5;
       if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
 
-      camera.lookAt(0, 0, 0);
+      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
     }
 
-    function setDpr(dpr) {
-      return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
-    }
-
-    const initialDpr = setDpr(dpr);
+    const initialDpr = calculateDpr(dpr);
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1182,7 +1203,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       },
       setDpr: dpr => set(state => ({
         viewport: { ...state.viewport,
-          dpr: setDpr(dpr)
+          dpr: calculateDpr(dpr)
         }
       })),
       events: {
@@ -1473,7 +1494,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
-  const [containerRef, size] = useMeasure__default['default']({
+  const [containerRef, {
+    width,
+    height
+  }] = useMeasure__default['default']({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1490,7 +1514,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error; // Execute JSX in the reconciler as a layout-effect
 
   useIsomorphicLayoutEffect(() => {
-    if (size.width > 0 && size.height > 0) {
+    if (width > 0 && height > 0) {
       render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
         set: setError
       }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
@@ -1498,11 +1522,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           set: setBlock
         })
       }, children)), canvasRef.current, { ...props,
-        size,
+        size: {
+          width,
+          height
+        },
         events: events || createPointerEvents
       });
     }
-  }, [size, children]);
+  }, [width, height, children]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1646,15 +1673,14 @@ function render(element, canvas, {
   let state = (_store = store) == null ? void 0 : _store.getState();
 
   if (fiber && state) {
-    const lastProps = state.internal.lastProps; // When a root was found, see if any fundamental props must be changed or exchanged
+    // When a root was found, see if any fundamental props must be changed or exchanged
     // Check pixelratio
+    if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (props.dpr !== undefined && !is.equ(lastProps.dpr, props.dpr)) state.setDpr(props.dpr); // Check size
-
-    if (!is.equ(lastProps.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (!is.equ(state.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
     // Changes to the color-space
 
-    const linearChanged = props.linear !== lastProps.linear;
+    const linearChanged = props.linear !== state.internal.lastProps.linear;
 
     if (linearChanged) {
       unmountComponentAtNode(canvas);

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

@@ -58,7 +58,8 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    if (is.obj(a) && a === b) return true; // Array, shallow compare first to see if it's a match
 
     if (is.arr(a) && a == b) return true; // Last resort, go through keys
 
@@ -132,7 +133,11 @@ function createEvents(store) {
 
 
   function filterPointerEvents(objects) {
-    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => obj.__r3f.handlers['onPointer' + name]));
+    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
+      var _r3f;
+
+      return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
+    }));
   }
 
   function intersect(filter) {
@@ -162,7 +167,9 @@ function createEvents(store) {
       let eventObject = intersect.object; // Bubble event up
 
       while (eventObject) {
-        if (eventObject.__r3f.handlers.count) intersections.push({ ...intersect,
+        var _r3f2;
+
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -189,7 +196,7 @@ function createEvents(store) {
   /**  Handles intersections by forwarding them to handlers */
 
 
-  function handleIntersects(intersections, event, callback) {
+  function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
       mouse,
@@ -199,7 +206,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-      const delta = event.type === 'click' ? calculateDistance(event) : 0;
 
       const releasePointerCapture = id => event.target.releasePointerCapture(id);
 
@@ -300,11 +306,13 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+        var _r3f3;
+
         const eventObject = hoveredObj.eventObject;
-        const handlers = eventObject.__r3f.handlers;
+        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers.count) {
+        if (handlers != null && handlers.count) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -345,15 +353,34 @@ function createEvents(store) {
       prepareRay(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); // Take care of unhover
+      const hits = patchIntersects(intersect(filter), event);
+      const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
+
+      if (name === 'onPointerDown') {
+        internal.initialClick = [event.offsetX, event.offsetY];
+        internal.initialHits = hits.map(hit => hit.eventObject);
+      } // If a click yields no results, pass it back to the user as a miss
+      // Missed events have to come first in order to establish user-land side-effect clean up
+
+
+      if (isClickEvent && !hits.length) {
+        if (delta <= 2) {
+          pointerMissed(event, internal.interaction);
+          if (onPointerMissed) onPointerMissed(event);
+        }
+      } // Take care of unhover
+
 
       if (isPointerMove) cancelPointer(hits);
-      handleIntersects(hits, event, data => {
+      handleIntersects(hits, event, delta, data => {
+        var _r3f4;
+
         const eventObject = data.eventObject;
-        const handlers = eventObject.__r3f.handlers; // Check presence of handlers
+        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
 
-        if (!handlers.count) return;
+        if (!(handlers != null && handlers.count)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -383,33 +410,22 @@ function createEvents(store) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+              // Missed events have to come first
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
+
               handler(data);
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
             }
           }
         }
-      }); // Save initial coordinates on pointer-down
-
-      if (name === 'onPointerDown') {
-        internal.initialClick = [event.offsetX, event.offsetY];
-        internal.initialHits = hits.map(hit => hit.eventObject);
-      } // If a click yields no results, pass it back to the user as a miss
-
-
-      if ((name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick') && !hits.length) {
-        if (calculateDistance(event) <= 2) {
-          pointerMissed(event, internal.interaction);
-          if (onPointerMissed) onPointerMissed(event);
-        }
-      }
+      });
     };
   };
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f$handlers$onPoin, _r3f$handlers;
+      var _r3f5;
 
-      return (_r3f$handlers$onPoin = (_r3f$handlers = object.__r3f.handlers).onPointerMissed) == null ? void 0 : _r3f$handlers$onPoin.call(_r3f$handlers, event);
+      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
     });
   }
 
@@ -464,6 +480,7 @@ function prepare(object, state) {
         count: 0
       },
       objects: [],
+      parent: null,
       ...state
     };
   }
@@ -522,7 +539,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2;
+    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -607,16 +624,16 @@ function createRenderer(roots) {
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
       if (localState.handlers.count) rootState.internal.interaction.push(instance);
-    } // Call the update lifecycle when it is being updated, but only when it is part of the scene
+    } // Call the update lifecycle when it is being updated
 
 
-    if (changes.length && instance.parent) updateInstance(instance);
+    if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
   }
 
   function invalidateInstance(instance) {
-    var _instance$__r3f4, _instance$__r3f4$root;
+    var _instance$__r3f5, _instance$__r3f5$root;
 
-    const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
+    const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
     if (state && state.internal.frames === 0) state.invalidate();
   }
 
@@ -708,7 +725,7 @@ function createRenderer(roots) {
         } else if (is.fun(attachFn)) {
           attachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         addedAsChild = true;
@@ -718,10 +735,13 @@ function createRenderer(roots) {
         // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
         // that is, anything that's a child in React but not a child in the scenegraph.
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -738,7 +758,7 @@ function createRenderer(roots) {
       } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
         // attach and attachObject don't have an order anyway, so just append
         return appendChild(parentInstance, child);
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -751,10 +771,13 @@ function createRenderer(roots) {
 
       if (!added) {
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -766,17 +789,14 @@ function createRenderer(roots) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _child$__r3f2;
+      var _parentInstance$__r3f, _child$__r3f2;
 
-      if (parentInstance.__r3f.objects) {
-        const oldLength = parentInstance.__r3f.objects.length;
-        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
-        const newLength = parentInstance.__r3f.objects.length; // was it in the list?
+      if (child.__r3f) {
+        child.__r3f.parent = null;
+      }
 
-        if (newLength < oldLength) {
-          // we had also set this, so we must clear it now
-          child.parent = null;
-        }
+      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) {
+        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
       } // Remove attachment
 
 
@@ -849,7 +869,9 @@ function createRenderer(roots) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    const parent = instance.parent;
+    var _instance$__r3f6;
+
+    const parent = (_instance$__r3f6 = instance.__r3f) == null ? void 0 : _instance$__r3f6.parent;
     if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
@@ -1012,6 +1034,9 @@ function createRenderer(roots) {
 
 const isRenderer = def => def && !!def.render;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+function calculateDpr(dpr) {
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+}
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (applyProps, invalidate, advance, props) => {
@@ -1068,14 +1093,10 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera.position.z = 5;
       if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
 
-      camera.lookAt(0, 0, 0);
+      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
     }
 
-    function setDpr(dpr) {
-      return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
-    }
-
-    const initialDpr = setDpr(dpr);
+    const initialDpr = calculateDpr(dpr);
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1182,7 +1203,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       },
       setDpr: dpr => set(state => ({
         viewport: { ...state.viewport,
-          dpr: setDpr(dpr)
+          dpr: calculateDpr(dpr)
         }
       })),
       events: {
@@ -1473,7 +1494,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
-  const [containerRef, size] = useMeasure__default['default']({
+  const [containerRef, {
+    width,
+    height
+  }] = useMeasure__default['default']({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1490,7 +1514,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error; // Execute JSX in the reconciler as a layout-effect
 
   useIsomorphicLayoutEffect(() => {
-    if (size.width > 0 && size.height > 0) {
+    if (width > 0 && height > 0) {
       render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
         set: setError
       }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
@@ -1498,11 +1522,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           set: setBlock
         })
       }, children)), canvasRef.current, { ...props,
-        size,
+        size: {
+          width,
+          height
+        },
         events: events || createPointerEvents
       });
     }
-  }, [size, children]);
+  }, [width, height, children]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1646,15 +1673,14 @@ function render(element, canvas, {
   let state = (_store = store) == null ? void 0 : _store.getState();
 
   if (fiber && state) {
-    const lastProps = state.internal.lastProps; // When a root was found, see if any fundamental props must be changed or exchanged
+    // When a root was found, see if any fundamental props must be changed or exchanged
     // Check pixelratio
+    if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (props.dpr !== undefined && !is.equ(lastProps.dpr, props.dpr)) state.setDpr(props.dpr); // Check size
-
-    if (!is.equ(lastProps.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (!is.equ(state.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
     // Changes to the color-space
 
-    const linearChanged = props.linear !== lastProps.linear;
+    const linearChanged = props.linear !== state.internal.lastProps.linear;
 
     if (linearChanged) {
       unmountComponentAtNode(canvas);

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

@@ -24,7 +24,8 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    if (is.obj(a) && a === b) return true; // Array, shallow compare first to see if it's a match
 
     if (is.arr(a) && a == b) return true; // Last resort, go through keys
 
@@ -98,7 +99,11 @@ function createEvents(store) {
 
 
   function filterPointerEvents(objects) {
-    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => obj.__r3f.handlers['onPointer' + name]));
+    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
+      var _r3f;
+
+      return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
+    }));
   }
 
   function intersect(filter) {
@@ -128,7 +133,9 @@ function createEvents(store) {
       let eventObject = intersect.object; // Bubble event up
 
       while (eventObject) {
-        if (eventObject.__r3f.handlers.count) intersections.push({ ...intersect,
+        var _r3f2;
+
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.handlers.count) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -155,7 +162,7 @@ function createEvents(store) {
   /**  Handles intersections by forwarding them to handlers */
 
 
-  function handleIntersects(intersections, event, callback) {
+  function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
       mouse,
@@ -165,7 +172,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-      const delta = event.type === 'click' ? calculateDistance(event) : 0;
 
       const releasePointerCapture = id => event.target.releasePointerCapture(id);
 
@@ -266,11 +272,13 @@ function createEvents(store) {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
       if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+        var _r3f3;
+
         const eventObject = hoveredObj.eventObject;
-        const handlers = eventObject.__r3f.handlers;
+        const handlers = (_r3f3 = eventObject.__r3f) == null ? void 0 : _r3f3.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers.count) {
+        if (handlers != null && handlers.count) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -311,15 +319,34 @@ function createEvents(store) {
       prepareRay(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); // Take care of unhover
+      const hits = patchIntersects(intersect(filter), event);
+      const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
+
+      if (name === 'onPointerDown') {
+        internal.initialClick = [event.offsetX, event.offsetY];
+        internal.initialHits = hits.map(hit => hit.eventObject);
+      } // If a click yields no results, pass it back to the user as a miss
+      // Missed events have to come first in order to establish user-land side-effect clean up
+
+
+      if (isClickEvent && !hits.length) {
+        if (delta <= 2) {
+          pointerMissed(event, internal.interaction);
+          if (onPointerMissed) onPointerMissed(event);
+        }
+      } // Take care of unhover
+
 
       if (isPointerMove) cancelPointer(hits);
-      handleIntersects(hits, event, data => {
+      handleIntersects(hits, event, delta, data => {
+        var _r3f4;
+
         const eventObject = data.eventObject;
-        const handlers = eventObject.__r3f.handlers; // Check presence of handlers
+        const handlers = (_r3f4 = eventObject.__r3f) == null ? void 0 : _r3f4.handlers; // Check presence of handlers
 
-        if (!handlers.count) return;
+        if (!(handlers != null && handlers.count)) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -349,33 +376,22 @@ function createEvents(store) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+              // Missed events have to come first
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
+
               handler(data);
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
             }
           }
         }
-      }); // Save initial coordinates on pointer-down
-
-      if (name === 'onPointerDown') {
-        internal.initialClick = [event.offsetX, event.offsetY];
-        internal.initialHits = hits.map(hit => hit.eventObject);
-      } // If a click yields no results, pass it back to the user as a miss
-
-
-      if ((name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick') && !hits.length) {
-        if (calculateDistance(event) <= 2) {
-          pointerMissed(event, internal.interaction);
-          if (onPointerMissed) onPointerMissed(event);
-        }
-      }
+      });
     };
   };
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f$handlers$onPoin, _r3f$handlers;
+      var _r3f5;
 
-      return (_r3f$handlers$onPoin = (_r3f$handlers = object.__r3f.handlers).onPointerMissed) == null ? void 0 : _r3f$handlers$onPoin.call(_r3f$handlers, event);
+      return (_r3f5 = object.__r3f) == null ? void 0 : _r3f5.handlers.onPointerMissed == null ? void 0 : _r3f5.handlers.onPointerMissed(event);
     });
   }
 
@@ -430,6 +446,7 @@ function prepare(object, state) {
         count: 0
       },
       objects: [],
+      parent: null,
       ...state
     };
   }
@@ -488,7 +505,7 @@ function createRenderer(roots) {
   }
 
   function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2;
+    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2, _instance$__r3f4;
 
     // Filter equals, events and reserved props
     const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -573,16 +590,16 @@ function createRenderer(roots) {
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
       if (localState.handlers.count) rootState.internal.interaction.push(instance);
-    } // Call the update lifecycle when it is being updated, but only when it is part of the scene
+    } // Call the update lifecycle when it is being updated
 
 
-    if (changes.length && instance.parent) updateInstance(instance);
+    if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
   }
 
   function invalidateInstance(instance) {
-    var _instance$__r3f4, _instance$__r3f4$root;
+    var _instance$__r3f5, _instance$__r3f5$root;
 
-    const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
+    const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
     if (state && state.internal.frames === 0) state.invalidate();
   }
 
@@ -674,7 +691,7 @@ function createRenderer(roots) {
         } else if (is.fun(attachFn)) {
           attachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         addedAsChild = true;
@@ -684,10 +701,13 @@ function createRenderer(roots) {
         // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
         // that is, anything that's a child in React but not a child in the scenegraph.
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -704,7 +724,7 @@ function createRenderer(roots) {
       } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
         // attach and attachObject don't have an order anyway, so just append
         return appendChild(parentInstance, child);
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -717,10 +737,13 @@ function createRenderer(roots) {
 
       if (!added) {
         parentInstance.__r3f.objects.push(child);
+      }
 
-        child.parent = parentInstance;
+      if (!child.__r3f) {
+        prepare(child, {});
       }
 
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -732,17 +755,14 @@ function createRenderer(roots) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _child$__r3f2;
+      var _parentInstance$__r3f, _child$__r3f2;
 
-      if (parentInstance.__r3f.objects) {
-        const oldLength = parentInstance.__r3f.objects.length;
-        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
-        const newLength = parentInstance.__r3f.objects.length; // was it in the list?
+      if (child.__r3f) {
+        child.__r3f.parent = null;
+      }
 
-        if (newLength < oldLength) {
-          // we had also set this, so we must clear it now
-          child.parent = null;
-        }
+      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) {
+        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
       } // Remove attachment
 
 
@@ -815,7 +835,9 @@ function createRenderer(roots) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    const parent = instance.parent;
+    var _instance$__r3f6;
+
+    const parent = (_instance$__r3f6 = instance.__r3f) == null ? void 0 : _instance$__r3f6.parent;
     if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
@@ -978,6 +1000,9 @@ function createRenderer(roots) {
 
 const isRenderer = def => def && !!def.render;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+function calculateDpr(dpr) {
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+}
 const context = /*#__PURE__*/React.createContext(null);
 
 const createStore = (applyProps, invalidate, advance, props) => {
@@ -1034,14 +1059,10 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera.position.z = 5;
       if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
 
-      camera.lookAt(0, 0, 0);
+      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
     }
 
-    function setDpr(dpr) {
-      return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
-    }
-
-    const initialDpr = setDpr(dpr);
+    const initialDpr = calculateDpr(dpr);
     const position = new THREE.Vector3();
     const defaultTarget = new THREE.Vector3();
     const tempTarget = new THREE.Vector3();
@@ -1148,7 +1169,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       },
       setDpr: dpr => set(state => ({
         viewport: { ...state.viewport,
-          dpr: setDpr(dpr)
+          dpr: calculateDpr(dpr)
         }
       })),
       events: {
@@ -1439,7 +1460,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
-  const [containerRef, size] = useMeasure({
+  const [containerRef, {
+    width,
+    height
+  }] = useMeasure({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1456,7 +1480,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (error) throw error; // Execute JSX in the reconciler as a layout-effect
 
   useIsomorphicLayoutEffect(() => {
-    if (size.width > 0 && size.height > 0) {
+    if (width > 0 && height > 0) {
       render( /*#__PURE__*/React.createElement(ErrorBoundary, {
         set: setError
       }, /*#__PURE__*/React.createElement(React.Suspense, {
@@ -1464,11 +1488,14 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
           set: setBlock
         })
       }, children)), canvasRef.current, { ...props,
-        size,
+        size: {
+          width,
+          height
+        },
         events: events || createPointerEvents
       });
     }
-  }, [size, children]);
+  }, [width, height, children]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1612,15 +1639,14 @@ function render(element, canvas, {
   let state = (_store = store) == null ? void 0 : _store.getState();
 
   if (fiber && state) {
-    const lastProps = state.internal.lastProps; // When a root was found, see if any fundamental props must be changed or exchanged
+    // When a root was found, see if any fundamental props must be changed or exchanged
     // Check pixelratio
+    if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (props.dpr !== undefined && !is.equ(lastProps.dpr, props.dpr)) state.setDpr(props.dpr); // Check size
-
-    if (!is.equ(lastProps.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (!is.equ(state.size, size)) state.setSize(size.width, size.height); // For some props we want to reset the entire root
     // Changes to the color-space
 
-    const linearChanged = props.linear !== lastProps.linear;
+    const linearChanged = props.linear !== state.internal.lastProps.linear;
 
     if (linearChanged) {
       unmountComponentAtNode(canvas);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.9",
+  "version": "7.0.13",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",