@react-three/fiber 8.10.0 → 8.10.2

package/dist/{index-27a1523b.esm.js → index-fb77d67d.esm.js}

@@ -13,6 +13,7 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 var _window$document, _window$navigator;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -22,7 +23,6 @@ const isRef = obj => obj && obj.hasOwnProperty('current');
  *
  * @see https://github.com/facebook/react/issues/14927
  */
-
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
   const ref = React.useRef(fn);
@@ -39,40 +39,31 @@ function Block({
   return null;
 }
 class ErrorBoundary extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-
+  state = {
+    error: false
+  };
+  static getDerivedStateFromError = () => ({
+    error: true
+  });
   componentDidCatch(err) {
     this.props.set(err);
   }
-
   render() {
     return this.state.error ? null : this.props.children;
   }
-
 }
-
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
-
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
   const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
+
 /**
  * Returns instance root state
  */
-
 const getRootState = obj => {
   var _r3f;
-
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
 // A collection of compare functions
@@ -84,68 +75,61 @@ const is = {
   boo: a => typeof a === 'boolean',
   und: a => a === void 0,
   arr: a => Array.isArray(a),
-
   equ(a, b, {
     arrays = 'shallow',
     objects = 'reference',
     strict = true
   } = {}) {
     // 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 (typeof a !== typeof b || !!a !== !!b) return false;
+    // Atomic, just compare a against b
     if (is.str(a) || is.num(a)) return a === b;
     const isObj = is.obj(a);
     if (isObj && objects === 'reference') return a === b;
     const isArr = is.arr(a);
-    if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
-
-    if ((isArr || isObj) && a === b) return true; // Last resort, go through keys
-
+    if (isArr && arrays === 'reference') return a === b;
+    // Array or Object, shallow compare first to see if it's a match
+    if ((isArr || isObj) && a === b) return true;
+    // Last resort, go through keys
     let i;
-
     for (i in a) if (!(i in b)) return false;
-
     for (i in strict ? b : a) if (a[i] !== b[i]) return false;
-
     if (is.und(i)) {
       if (isArr && a.length === 0 && b.length === 0) return true;
       if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0) return true;
       if (a !== b) return false;
     }
-
     return true;
   }
+};
 
-}; // Collects nodes and materials from a THREE.Object3D
-
+// Collects nodes and materials from a THREE.Object3D
 function buildGraph(object) {
   const data = {
     nodes: {},
     materials: {}
   };
-
   if (object) {
     object.traverse(obj => {
       if (obj.name) data.nodes[obj.name] = obj;
       if (obj.material && !data.materials[obj.material.name]) data.materials[obj.material.name] = obj.material;
     });
   }
-
   return data;
-} // Disposes an object and all its properties
+}
 
+// Disposes an object and all its properties
 function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
-
   for (const p in obj) {
     p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
-} // Each object in the scene carries a small LocalState descriptor
+}
 
+// Each object in the scene carries a small LocalState descriptor
 function prepare(object, state) {
   const instance = object;
-
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
@@ -159,13 +143,10 @@ function prepare(object, state) {
       ...state
     };
   }
-
   return object;
 }
-
 function resolve(instance, key) {
   let target = instance;
-
   if (key.includes('-')) {
     const entries = key.split('-');
     const last = entries.pop();
@@ -178,9 +159,9 @@ function resolve(instance, key) {
     target,
     key
   };
-} // Checks if a dash-cased string ends with an integer
-
+}
 
+// Checks if a dash-cased string ends with an integer
 const INDEX_REGEX = /-\d+$/;
 function attach(parent, child, type) {
   if (is.str(type)) {
@@ -193,7 +174,6 @@ function attach(parent, child, type) {
       } = resolve(parent, root);
       if (!Array.isArray(target[key])) target[key] = [];
     }
-
     const {
       target,
       key
@@ -204,21 +184,21 @@ function attach(parent, child, type) {
 }
 function detach(parent, child, type) {
   var _child$__r3f, _child$__r3f2;
-
   if (is.str(type)) {
     const {
       target,
       key
     } = resolve(parent, type);
-    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    const previous = child.__r3f.previousAttach;
+    // When the previous value was undefined, it means the value was never set to begin with
+    if (previous === undefined) delete target[key];
+    // Otherwise set the previous value
     else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
-
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
-} // This function prepares a set of changes to be applied to the instance
+}
 
+// This function prepares a set of changes to be applied to the instance
 function diffProps(instance, {
   children: cN,
   key: kN,
@@ -231,39 +211,38 @@ function diffProps(instance, {
   ...previous
 } = {}, remove = false) {
   var _instance$__r3f;
-
   const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
   const entries = Object.entries(props);
-  const changes = []; // Catch removed props, prepend them so they can be reset or removed
+  const changes = [];
 
+  // Catch removed props, prepend them so they can be reset or removed
   if (remove) {
     const previousKeys = Object.keys(previous);
-
     for (let i = 0; i < previousKeys.length; i++) {
       if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
     }
   }
-
   entries.forEach(([key, value]) => {
     var _instance$__r3f2;
-
     // Bail out on primitive object
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return; // When props match bail out
-
-    if (is.equ(value, previous[key])) return; // Collect handlers and bail out
-
-    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
-
+    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return;
+    // When props match bail out
+    if (is.equ(value, previous[key])) return;
+    // Collect handlers and bail out
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
-    changes.push([key, value, false, entries]); // Reset pierced props
+    changes.push([key, value, false, entries]);
 
+    // Reset pierced props
     for (const prop in props) {
       const value = props[prop];
       if (prop.startsWith(`${key}-`)) changes.push([prop, value, false, prop.split('-')]);
     }
   });
-  const memoized = { ...props
+  const memoized = {
+    ...props
   };
   if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
   if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
@@ -271,11 +250,11 @@ function diffProps(instance, {
     memoized,
     changes
   };
-} // This function applies a set of changes to the instance
+}
 
+// This function applies a set of changes to the instance
 function applyProps$1(instance, data) {
   var _instance$__r3f3, _root$getState, _instance$__r3f4;
-
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
   const root = localState.root;
@@ -284,104 +263,102 @@ function applyProps$1(instance, data) {
     memoized,
     changes
   } = isDiffSet(data) ? data : diffProps(instance, data);
-  const prevHandlers = localState.eventCount; // Prepare memoized props
+  const prevHandlers = localState.eventCount;
 
+  // Prepare memoized props
   if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-
   for (let i = 0; i < changes.length; i++) {
     let [key, value, isEvent, keys] = changes[i];
     let currentInstance = instance;
-    let targetProp = currentInstance[key]; // Revolve dashed props
+    let targetProp = currentInstance[key];
 
+    // Revolve dashed props
     if (keys.length) {
-      targetProp = keys.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
+      targetProp = keys.reduce((acc, key) => acc[key], instance);
+      // If the target is atomic, it forces us to switch the root
       if (!(targetProp && targetProp.set)) {
         const [name, ...reverseEntries] = keys.reverse();
         currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
         key = name;
       }
-    } // https://github.com/mrdoob/three.js/issues/21209
+    }
+
+    // https://github.com/mrdoob/three.js/issues/21209
     // HMR/fast-refresh relies on the ability to cancel out props, but threejs
     // has no means to do this. Hence we curate a small collection of value-classes
     // with their respective constructor/set arguments
     // For removed props, try to set default values, if possible
-
-
     if (value === DEFAULT + 'remove') {
-      if (targetProp && targetProp.constructor) {
-        var _memoized$args;
-
-        // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
-      } else if (currentInstance.constructor) {
+      if (currentInstance.constructor) {
         var _currentInstance$__r;
-
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
         const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
-        value = defaultClassCall[targetProp]; // destory the instance
-
-        if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
+        value = defaultClassCall[key];
+        // destroy the instance
+        if (defaultClassCall.dispose) defaultClassCall.dispose();
       } else {
+        // instance does not have constructor, just set it to 0
         value = 0;
       }
-    } // Deal with pointer events ...
-
+    }
 
+    // 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
+    }
+    // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.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 ...
+      }
+      // 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
+      }
+      // 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.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.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        const isColor = targetProp instanceof THREE.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.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask;
+        // Otherwise just set ...
+        else targetProp.set(value);
+        // For versions of three which don't support THREE.ColorManagement,
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
-
         const supportsColorManagement = ('ColorManagement' in THREE);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-      } // Else, just overwrite the value
-
+      }
+      // Else, just overwrite the value
     } else {
-      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      currentInstance[key] = value;
+      // Auto-convert sRGB textures, for now ...
       // https://github.com/pmndrs/react-three-fiber/issues/344
-
       if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
         currentInstance[key].encoding = THREE.sRGBEncoding;
       }
     }
-
     invalidateInstance(instance);
   }
-
   if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
-    if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
-
+    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    // Add the instance to the interaction manager only when it has handlers
     if (localState.eventCount) 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, but only when it is part of the scene
   if (changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
   return instance;
 }
 function invalidateInstance(instance) {
   var _instance$__r3f5, _instance$__r3f5$root;
-
   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();
 }
@@ -400,17 +377,16 @@ function updateCamera(camera, size) {
     } else {
       camera.aspect = size.width / size.height;
     }
-
-    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    camera.updateProjectionMatrix();
+    // https://github.com/pmndrs/react-three-fiber/issues/178
     // Update matrix world since the renderer is a frame late
-
     camera.updateMatrixWorld();
   }
 }
+
 /**
  * Safely sets a deeply-nested value on an object.
  */
-
 function setDeep(obj, value, keys) {
   const key = keys.pop();
   const target = keys.reduce((acc, key) => acc[key], obj);
@@ -419,19 +395,17 @@ function setDeep(obj, value, keys) {
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
-} // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
-// Gives React a clue as to how import the current interaction is
-
+}
 
+// https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
+// Gives React a clue as to how import the current interaction is
 function getEventPriority() {
   var _globalScope$event;
-
   // Get a handle to the current global scope in window and worker contexts if able
   // https://github.com/pmndrs/react-three-fiber/pull/2493
   const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
   if (!globalScope) return DefaultEventPriority;
   const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
-
   switch (name) {
     case 'click':
     case 'contextmenu':
@@ -440,7 +414,6 @@ function getEventPriority() {
     case 'pointerdown':
     case 'pointerup':
       return DiscreteEventPriority;
-
     case 'pointermove':
     case 'pointerout':
     case 'pointerover':
@@ -448,34 +421,31 @@ function getEventPriority() {
     case 'pointerleave':
     case 'wheel':
       return ContinuousEventPriority;
-
     default:
       return DefaultEventPriority;
   }
 }
+
 /**
  * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
-
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
-
   if (captureData) {
-    captures.delete(obj); // If this was the last capturing object for this pointer
-
+    captures.delete(obj);
+    // If this was the last capturing object for this pointer
     if (captures.size === 0) {
       capturedMap.delete(pointerId);
       captureData.target.releasePointerCapture(pointerId);
     }
   }
 }
-
 function removeInteractivity(store, object) {
   const {
     internal
-  } = store.getState(); // Removes every trace of an object from the data store
-
+  } = store.getState();
+  // Removes every trace of an object from the data store
   internal.interaction = internal.interaction.filter(o => o !== object);
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
@@ -498,106 +468,103 @@ function createEvents(store) {
     const dy = event.offsetY - internal.initialClick[1];
     return Math.round(Math.sqrt(dx * dx + dy * dy));
   }
-  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
-
 
+  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
   function filterPointerEvents(objects) {
     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(event, filter) {
     const state = store.getState();
     const duplicates = new Set();
-    const intersections = []; // Allow callers to eliminate event objects
-
-    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
-
+    const intersections = [];
+    // Allow callers to eliminate event objects
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+    // Reset all raycaster cameras to undefined
     for (let i = 0; i < eventsObjects.length; i++) {
       const state = getRootState(eventsObjects[i]);
-
       if (state) {
         state.raycaster.camera = undefined;
       }
     }
-
     if (!state.previousRoot) {
       // Make sure root-level pointer and ray are set up
       state.events.compute == null ? void 0 : state.events.compute(event, state);
     }
-
     function handleRaycast(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
+      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
-
+        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
         if (state.raycaster.camera === undefined) state.raycaster.camera = null;
-      } // Intersect object by object
-
+      }
 
+      // Intersect object by object
       return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
-    } // Collect events
-
+    }
 
-    let hits = eventsObjects // Intersect objects
-    .flatMap(handleRaycast) // Sort by event priority and distance
+    // Collect events
+    let hits = eventsObjects
+    // Intersect objects
+    .flatMap(handleRaycast)
+    // Sort by event priority and distance
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
       if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
-    }) // Filter out duplicates
+    })
+    // Filter out duplicates
     .filter(item => {
       const id = makeId(item);
       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, this likely only makes sense on the root filter
+    });
 
-    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
+    // https://github.com/mrdoob/three.js/issues/16031
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+    if (state.events.filter) hits = state.events.filter(hits, state);
 
+    // Bubble up the events, find the event source (eventObject)
     for (const hit of hits) {
-      let eventObject = hit.object; // Bubble event up
-
+      let eventObject = hit.object;
+      // Bubble event up
       while (eventObject) {
         var _r3f2;
-
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
+        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.
-
+    }
 
+    // If the interaction is captured, make all capturing targets part of the intersect.
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
-
     return intersections;
   }
-  /**  Handles intersections by forwarding them to handlers */
-
 
+  /**  Handles intersections by forwarding them to handlers */
   function handleIntersects(intersections, event, delta, callback) {
-    const rootState = store.getState(); // If anything has been found, forward it to the event listeners
+    const rootState = store.getState();
 
+    // If anything has been found, forward it to the event listeners
     if (intersections.length) {
       const localState = {
         stopped: false
       };
-
       for (const hit of intersections) {
         const state = getRootState(hit.object) || rootState;
         const {
@@ -607,19 +574,15 @@ function createEvents(store) {
           internal
         } = state;
         const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-
         const hasPointerCapture = id => {
           var _internal$capturedMap, _internal$capturedMap2;
-
           return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
         };
-
         const setPointerCapture = id => {
           const captureData = {
             intersection: hit,
             target: event.target
           };
-
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
@@ -629,29 +592,27 @@ function createEvents(store) {
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
             internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          } // Call the original event now
+          }
           event.target.setPointerCapture(id);
         };
-
         const releasePointerCapture = id => {
           const captures = internal.capturedMap.get(id);
-
           if (captures) {
             releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
           }
-        }; // Add native event props
-
-
-        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+        };
 
+        // Add native event props
+        let extractEventProps = {};
+        // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
         for (let prop in event) {
-          let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+          let property = event[prop];
+          // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
-
           if (typeof property !== 'function') extractEventProps[prop] = property;
         }
-
-        let raycastEvent = { ...hit,
+        let raycastEvent = {
+          ...hit,
           ...extractEventProps,
           pointer,
           intersections,
@@ -660,19 +621,21 @@ function createEvents(store) {
           unprojectedPoint,
           ray: raycaster.ray,
           camera: camera,
-
           // Hijack stopPropagation, which just sets a flag
           stopPropagation() {
             // https://github.com/pmndrs/react-three-fiber/issues/596
             // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
 
-            if ( // ...if this pointer hasn't been captured
-            !capturesForPointer || // ... or if the hit object is capturing the pointer
+            // We only authorize stopPropagation...
+            if (
+            // ...if this pointer hasn't been captured
+            !capturesForPointer ||
+            // ... or if the hit object is capturing the pointer
             capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+              raycastEvent.stopped = localState.stopped = true;
+              // Propagation is stopped, remove all other hover records
               // An event handler is only allowed to flush other handlers if it is hovered itself
-
               if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
                 // Objects cannot flush out higher up objects that have already caught the event
                 const higher = intersections.slice(0, intersections.indexOf(hit));
@@ -680,7 +643,6 @@ function createEvents(store) {
               }
             }
           },
-
           // there should be a distinction between target and currentTarget
           target: {
             hasPointerCapture,
@@ -693,22 +655,20 @@ function createEvents(store) {
             releasePointerCapture
           },
           nativeEvent: event
-        }; // Call subscribers
-
-        callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+        };
 
+        // Call subscribers
+        callback(raycastEvent);
+        // Event bubbling may be interrupted by stopPropagation
         if (localState.stopped === true) break;
       }
     }
-
     return intersections;
   }
-
   function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
-
     for (const hoveredObj of internal.hovered.values()) {
       // 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
@@ -717,10 +677,10 @@ function createEvents(store) {
         const instance = eventObject.__r3f;
         const handlers = instance == null ? void 0 : instance.handlers;
         internal.hovered.delete(makeId(hoveredObj));
-
         if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
-          const data = { ...hoveredObj,
+          const data = {
+            ...hoveredObj,
             intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
@@ -729,27 +689,23 @@ function createEvents(store) {
       }
     }
   }
-
   function pointerMissed(event, objects) {
     for (let i = 0; i < objects.length; i++) {
       const instance = objects[i].__r3f;
       instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
     }
   }
-
   function handlePointer(name) {
     // Deal with cancelation
     switch (name) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
-
       case 'onLostPointerCapture':
         return event => {
           const {
             internal
           } = store.getState();
-
           if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
@@ -757,55 +713,54 @@ function createEvents(store) {
             cancelPointer([]);
           }
         };
-    } // Any other pointer goes here ...
-
+    }
 
+    // Any other pointer goes here ...
     return function handleEvent(event) {
       const {
         onPointerMissed,
         internal
-      } = store.getState(); // prepareRay(event)
+      } = store.getState();
 
-      internal.lastEvent.current = event; // Get fresh intersects
+      // 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 = intersect(event, filter);
-      const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
+      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 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
-
-
+      }
+      // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
-
       function onIntersect(data) {
         const eventObject = data.eventObject;
         const instance = eventObject.__r3f;
-        const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
+        const handlers = instance == null ? void 0 : instance.handlers;
 
+        // Check presence of handlers
         if (!(instance != null && instance.eventCount)) return;
-
         if (isPointerMove) {
           // Move event ...
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
             // When enter or out is present take care of hover-state
             const id = makeId(data);
             const hoveredItem = internal.hovered.get(id);
-
             if (!hoveredItem) {
               // If the object wasn't previously hovered, book it and call its handler
               internal.hovered.set(id, data);
@@ -815,21 +770,19 @@ function createEvents(store) {
               // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
               data.stopPropagation();
             }
-          } // Call mouse move
-
-
+          }
+          // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
         } else {
           // All other events ...
           const handler = handlers[name];
-
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (!isClickEvent || internal.initialHits.includes(eventObject)) {
               // Missed events have to come first
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
-
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+              // Now call the handler
               handler(data);
             }
           } else {
@@ -840,22 +793,19 @@ function createEvents(store) {
           }
         }
       }
-
       handleIntersects(hits, event, delta, onIntersect);
     };
   }
-
   return {
     handlePointer
   };
 }
 
 let catalogue = {};
-
-let extend = objects => void (catalogue = { ...catalogue,
+let extend = objects => void (catalogue = {
+  ...catalogue,
   ...objects
 });
-
 function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
@@ -864,7 +814,6 @@ function createRenderer(_roots, _getEventPriority) {
   }, root) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`;
     let instance;
-
     if (type === 'primitive') {
       if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
@@ -876,15 +825,15 @@ function createRenderer(_roots, _getEventPriority) {
       });
     } else {
       const target = catalogue[name];
-
       if (!target) {
         throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
-      } // Throw if an object or literal was passed for args
+      }
 
+      // Throw if an object or literal was passed for args
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!');
 
-      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
+      // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
-
       instance = prepare(new target(...args), {
         type,
         root,
@@ -894,27 +843,24 @@ function createRenderer(_roots, _getEventPriority) {
           args
         }
       });
-    } // Auto-attach geometries and materials
-
+    }
 
+    // Auto-attach geometries and materials
     if (instance.__r3f.attach === undefined) {
       if (instance instanceof THREE.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE.Material) instance.__r3f.attach = 'material';
-    } // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
+    }
+
+    // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
     // view yet. If the callback relies on references for instance, they won't be ready yet, this is
     // why it passes "true" here
     // There is no reason to apply props to injects
-
-
     if (name !== 'inject') applyProps$1(instance, props);
     return instance;
   }
-
   function appendChild(parentInstance, child) {
     let added = false;
-
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
-
       // The attach attribute implies that the object attaches itself on the parent
       if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
@@ -922,10 +868,9 @@ function createRenderer(_roots, _getEventPriority) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
-      } // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
+      }
+      // 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.
-
-
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
@@ -933,13 +878,10 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(child);
     }
   }
-
   function insertBefore(parentInstance, child, beforeChild) {
     let added = false;
-
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
-
       if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
@@ -952,7 +894,6 @@ function createRenderer(_roots, _getEventPriority) {
         parentInstance.children = [...restSiblings.slice(0, index), child, ...restSiblings.slice(index)];
         added = true;
       }
-
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
@@ -960,31 +901,29 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(child);
     }
   }
-
   function removeRecursive(array, parent, dispose = false) {
     if (array) [...array].forEach(child => removeChild(parent, child, dispose));
   }
-
   function removeChild(parentInstance, child, dispose) {
     if (child) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
-
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
-
-      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
-
+      if (child.__r3f) child.__r3f.parent = null;
+      // Remove child from the parents objects
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
+      // Remove attachment
       if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
-
-        parentInstance.remove(child); // Remove interactivity
-
+        parentInstance.remove(child);
+        // Remove interactivity
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
-      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
+      }
+
+      // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
@@ -993,29 +932,27 @@ function createRenderer(_roots, _getEventPriority) {
       //
       // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
       // when the reconciler calls it, but then carry our own check recursively
-
-
       const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
-      const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
-      // attached to them declaratively ...
+      const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose;
 
+      // Remove nested child objects. Primitives should not have objects and children that are
+      // attached to them declaratively ...
       if (!isPrimitive) {
         var _child$__r3f6;
-
         removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
-      } // Remove references
-
+      }
 
+      // Remove references
       if (child.__r3f) {
         delete child.__r3f.root;
         delete child.__r3f.objects;
         delete child.__r3f.handlers;
         delete child.__r3f.memoizedProps;
         if (!isPrimitive) delete child.__r3f;
-      } // Dispose item whenever the reconciler feels like it
-
+      }
 
+      // Dispose item whenever the reconciler feels like it
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
         unstable_scheduleCallback(unstable_IdlePriority, () => {
           try {
@@ -1025,61 +962,51 @@ function createRenderer(_roots, _getEventPriority) {
           }
         });
       }
-
       invalidateInstance(parentInstance);
     }
   }
-
   function switchInstance(instance, type, newProps, fiber) {
     var _instance$__r3f;
-
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
-    const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    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
     // forces r3f to re-parent the children and non-scene objects
-
     if (instance.children) {
       for (const child of instance.children) {
         if (child.__r3f) appendChild(newInstance, child);
       }
-
       instance.children = instance.children.filter(child => !child.__r3f);
     }
-
     instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
-
     instance.__r3f.objects = [];
-
     if (!instance.__r3f.autoRemovedBeforeAppend) {
       removeChild(parent, instance);
     }
-
     if (newInstance.parent) {
       newInstance.__r3f.autoRemovedBeforeAppend = true;
     }
+    appendChild(parent, newInstance);
 
-    appendChild(parent, newInstance); // Re-bind event handlers
-
+    // 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;
-
         if (fiber.ref) {
           if (typeof fiber.ref === 'function') fiber.ref(newInstance);else fiber.ref.current = newInstance;
         }
       }
     });
-  } // Don't handle text instances, warn on undefined behavior
-
+  }
 
+  // Don't handle text instances, warn on undefined behavior
   const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
-
   const reconciler = Reconciler({
     createInstance,
     removeChild,
@@ -1092,11 +1019,13 @@ function createRenderer(_roots, _getEventPriority) {
     supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
-      if (!child) return; // Don't append to unmounted container
+      if (!child) return;
 
+      // Don't append to unmounted container
       const scene = container.getState().scene;
-      if (!scene.__r3f) return; // Link current root to the default scene
+      if (!scene.__r3f) return;
 
+      // Link current root to the default scene
       scene.__r3f.root = container;
       appendChild(scene, child);
     },
@@ -1105,24 +1034,22 @@ function createRenderer(_roots, _getEventPriority) {
       removeChild(container.getState().scene, child);
     },
     insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return; // Don't append to unmounted container
+      if (!child || !beforeChild) return;
 
+      // Don't append to unmounted container
       const scene = container.getState().scene;
       if (!scene.__r3f) return;
       insertBefore(scene, child, beforeChild);
     },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
-
     finalizeInitialChildren(instance) {
       var _instance$__r3f2;
-
-      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
-
       return Boolean(localState.handlers);
     },
-
     prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
@@ -1138,47 +1065,44 @@ function createRenderer(_roots, _getEventPriority) {
           args: argsOld = [],
           children: cO,
           ...restOld
-        } = oldProps; // Throw if an object or literal was passed for args
-
-        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
+        } = oldProps;
 
-        if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
+        // Throw if an object or literal was passed for args
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!');
 
+        // If it has new props or arguments, then it needs to be re-instantiated
+        if (argsNew.some((value, index) => value !== argsOld[index])) return [true];
+        // Create a diff-set, flag if there are any changes
         const diff = diffProps(instance, restNew, restOld, true);
-        if (diff.changes.length) return [false, diff]; // Otherwise do not touch the instance
+        if (diff.changes.length) return [false, diff];
 
+        // Otherwise do not touch the instance
         return null;
       }
     },
-
     commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
-      if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
+      if (reconstruct) switchInstance(instance, type, newProps, fiber);
+      // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
-
     commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
-
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
       const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
       }
     },
-
     getPublicInstance: instance => instance,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-
     hideInstance(instance) {
       var _instance$__r3f4;
-
       // Detach while the instance is hidden
       const {
         attach: type,
@@ -1188,10 +1112,8 @@ function createRenderer(_roots, _getEventPriority) {
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
-
     unhideInstance(instance, props) {
       var _instance$__r3f5;
-
       // Re-attach when the instance is unhidden
       const {
         attach: type,
@@ -1201,7 +1123,6 @@ function createRenderer(_roots, _getEventPriority) {
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
-
     createTextInstance: handleTextInstance,
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
@@ -1222,16 +1143,15 @@ function createRenderer(_roots, _getEventPriority) {
   };
 }
 
+// Keys that shouldn't be copied between R3F stores
 const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
-
 const createStore = (invalidate, advance) => {
   const rootState = create((set, get) => {
     const position = new THREE.Vector3();
     const defaultTarget = new THREE.Vector3();
     const tempTarget = new THREE.Vector3();
-
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
@@ -1242,7 +1162,6 @@ const createStore = (invalidate, advance) => {
       const aspect = width / height;
       if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
       const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-
       if (isOrthographicCamera(camera)) {
         return {
           width: width / camera.zoom,
@@ -1255,9 +1174,7 @@ const createStore = (invalidate, advance) => {
         };
       } else {
         const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
-
         const h = 2 * Math.tan(fov / 2) * distance; // visible height
-
         const w = h * (width / height);
         return {
           width: w,
@@ -1270,15 +1187,13 @@ const createStore = (invalidate, advance) => {
         };
       }
     }
-
     let performanceTimeout = undefined;
-
     const setPerformanceCurrent = current => set(state => ({
-      performance: { ...state.performance,
+      performance: {
+        ...state.performance,
         current
       }
     }));
-
     const pointer = new THREE.Vector2();
     const rootState = {
       set,
@@ -1311,12 +1226,12 @@ const createStore = (invalidate, advance) => {
         max: 1,
         debounce: 200,
         regress: () => {
-          const state = get(); // Clear timeout
-
-          if (performanceTimeout) clearTimeout(performanceTimeout); // Set lower bound performance
-
-          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min); // Go back to upper bound performance after a while unless something regresses meanwhile
-
+          const state = get();
+          // Clear timeout
+          if (performanceTimeout) clearTimeout(performanceTimeout);
+          // Set lower bound performance
+          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min);
+          // Go back to upper bound performance after a while unless something regresses meanwhile
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
@@ -1339,8 +1254,10 @@ const createStore = (invalidate, advance) => {
         factor: 0,
         getCurrentViewport
       },
-      setEvents: events => set(state => ({ ...state,
-        events: { ...state.events,
+      setEvents: events => set(state => ({
+        ...state,
+        events: {
+          ...state.events,
           ...events
         }
       })),
@@ -1355,7 +1272,8 @@ const createStore = (invalidate, advance) => {
         };
         set(state => ({
           size,
-          viewport: { ...state.viewport,
+          viewport: {
+            ...state.viewport,
             ...getCurrentViewport(camera, defaultTarget, size)
           }
         }));
@@ -1363,23 +1281,23 @@ const createStore = (invalidate, advance) => {
       setDpr: dpr => set(state => {
         const resolved = calculateDpr(dpr);
         return {
-          viewport: { ...state.viewport,
+          viewport: {
+            ...state.viewport,
             dpr: resolved,
             initialDpr: state.viewport.initialDpr || resolved
           }
         };
       }),
       setFrameloop: (frameloop = 'always') => {
-        const clock = get().clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+        const clock = get().clock;
 
+        // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
         clock.stop();
         clock.elapsedTime = 0;
-
         if (frameloop !== 'never') {
           clock.start();
           clock.elapsedTime = 0;
         }
-
         set(() => ({
           frameloop
         }));
@@ -1397,27 +1315,26 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: new Map(),
         subscribe: (ref, priority, store) => {
-          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          const internal = get().internal;
+          // If this subscription was given a priority, it takes rendering into its own hands
           // For that reason we switch off automatic rendering and increase the manual flag
           // As long as this flag is positive there can be no internal rendering at all
           // because there could be multiple render subscriptions
-
           internal.priority = internal.priority + (priority > 0 ? 1 : 0);
           internal.subscribers.push({
             ref,
             priority,
             store
-          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          });
+          // Register subscriber and sort layers from lowest to highest, meaning,
           // highest priority renders last (on top of the other frames)
-
           internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
             const internal = get().internal;
-
             if (internal != null && internal.subscribers) {
               // Decrease manual flag if this subscription had a priority
-              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
-
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0);
+              // Remove subscriber from list
               internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
             }
           };
@@ -1437,31 +1354,35 @@ const createStore = (invalidate, advance) => {
       viewport,
       gl,
       set
-    } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
+    } = rootState.getState();
 
+    // Resize camera and renderer on changes to size and pixelratio
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = viewport.dpr; // Update camera & renderer
-
+      oldDpr = viewport.dpr;
+      // Update camera & renderer
       updateCamera(camera, size);
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height, size.updateStyle);
-    } // Update viewport once the camera changes
-
+    }
 
+    // Update viewport once the camera changes
     if (camera !== oldCamera) {
-      oldCamera = camera; // Update viewport
-
+      oldCamera = camera;
+      // Update viewport
       set(state => ({
-        viewport: { ...state.viewport,
+        viewport: {
+          ...state.viewport,
           ...state.viewport.getCurrentViewport(camera)
         }
       }));
     }
-  }); // Invalidate on any change
+  });
 
-  rootState.subscribe(state => invalidate(state)); // Return root state
+  // Invalidate on any change
+  rootState.subscribe(state => invalidate(state));
 
+  // Return root state
   return rootState;
 };
 
@@ -1472,144 +1393,129 @@ function createSubs(callback, subs) {
   subs.add(sub);
   return () => void subs.delete(sub);
 }
-
 let i;
 let globalEffects = new Set();
 let globalAfterEffects = new Set();
 let globalTailEffects = new Set();
+
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
  */
-
 const addEffect = callback => createSubs(callback, globalEffects);
+
 /**
  * Adds a global after-render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
  */
-
 const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
+
 /**
  * Adds a global callback which is called when rendering stops.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
  */
-
 const addTail = callback => createSubs(callback, globalTailEffects);
-
 function run(effects, timestamp) {
   if (!effects.size) return;
-
   for (const {
     callback
   } of effects.values()) {
     callback(timestamp);
   }
 }
-
 function flushGlobalEffects(type, timestamp) {
   switch (type) {
     case 'before':
       return run(globalEffects, timestamp);
-
     case 'after':
       return run(globalAfterEffects, timestamp);
-
     case 'tail':
       return run(globalTailEffects, timestamp);
   }
 }
 let subscribers;
 let subscription;
-
 function render$1(timestamp, state, frame) {
   // Run local effects
-  let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
-
+  let delta = state.clock.getDelta();
+  // In frameloop='never' mode, clock times are updated using the provided timestamp
   if (state.frameloop === 'never' && typeof timestamp === 'number') {
     delta = timestamp - state.clock.elapsedTime;
     state.clock.oldTime = state.clock.elapsedTime;
     state.clock.elapsedTime = timestamp;
-  } // Call subscribers (useFrame)
-
-
+  }
+  // Call subscribers (useFrame)
   subscribers = state.internal.subscribers;
-
   for (i = 0; i < subscribers.length; i++) {
     subscription = subscribers[i];
     subscription.ref.current(subscription.store.getState(), delta, frame);
-  } // Render content
-
-
-  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
-
+  }
+  // Render content
+  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera);
+  // Decrease frame count
   state.internal.frames = Math.max(0, state.internal.frames - 1);
   return state.frameloop === 'always' ? 1 : state.internal.frames;
 }
-
 function createLoop(roots) {
   let running = false;
   let repeat;
   let frame;
   let state;
-
   function loop(timestamp) {
     frame = requestAnimationFrame(loop);
     running = true;
-    repeat = 0; // Run effects
+    repeat = 0;
 
-    flushGlobalEffects('before', timestamp); // Render all roots
+    // Run effects
+    flushGlobalEffects('before', timestamp);
 
+    // Render all roots
     for (const root of roots.values()) {
       var _state$gl$xr;
-
-      state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
-
+      state = root.store.getState();
+      // If the frameloop is invalidated, do not run another frame
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
         repeat += render$1(timestamp, state);
       }
-    } // Run after-effects
-
+    }
 
-    flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
+    // Run after-effects
+    flushGlobalEffects('after', timestamp);
 
+    // Stop the loop if nothing invalidates it
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      flushGlobalEffects('tail', timestamp); // Flag end of operation
+      flushGlobalEffects('tail', timestamp);
 
+      // Flag end of operation
       running = false;
       return cancelAnimationFrame(frame);
     }
   }
-
   function invalidate(state, frames = 1) {
     var _state$gl$xr2;
-
     if (!state) return roots.forEach(root => invalidate(root.store.getState()), frames);
-    if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return; // Increase frames, do not go higher than 60
-
-    state.internal.frames = Math.min(60, state.internal.frames + frames); // If the render-loop isn't active, start it
-
+    if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return;
+    // Increase frames, do not go higher than 60
+    state.internal.frames = Math.min(60, state.internal.frames + frames);
+    // If the render-loop isn't active, start it
     if (!running) {
       running = true;
       requestAnimationFrame(loop);
     }
   }
-
   function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) flushGlobalEffects('before', timestamp);
     if (!state) for (const root of roots.values()) render$1(timestamp, root.store.getState());else render$1(timestamp, state, frame);
     if (runGlobalEffects) flushGlobalEffects('after', timestamp);
   }
-
   return {
     loop,
-
     /**
      * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
      * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
      */
     invalidate,
-
     /**
      * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
      * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
@@ -1634,80 +1540,77 @@ function useStore() {
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
+
 /**
  * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
  */
-
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
+
 /**
  * Executes a callback before render in a shared frame loop.
  * Can order effects with render priority or manually render with a positive priority.
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
  */
-
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Memoize ref
-
-  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
-
+  const subscribe = store.getState().internal.subscribe;
+  // Memoize ref
+  const ref = useMutableCallback(callback);
+  // Subscribe on mount, unsubscribe on unmount
   useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
+
 /**
  * Returns a node graph of an object with named nodes & materials.
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
  */
-
 function useGraph(object) {
   return React.useMemo(() => buildGraph(object), [object]);
 }
-
 function loadingFn(extensions, onProgress) {
   return function (Proto, ...input) {
     // Construct new loader and run extensions
     const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
+    if (extensions) extensions(loader);
+    // Go through the urls and load them
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
     }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-
-
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
   const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
     equal: is.equ
-  }); // Return the object/s
-
+  });
+  // Return the object/s
   return Array.isArray(input) ? results : results[0];
 }
+
 /**
  * Preloads an asset into cache as a side-effect.
  */
-
 useLoader.preload = function (Proto, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
   return preload(loadingFn(extensions), [Proto, ...keys]);
 };
+
 /**
  * Removes a loaded asset from cache.
  */
-
-
 useLoader.clear = function (Proto, input) {
   const keys = Array.isArray(input) ? input : [input];
   return clear([Proto, ...keys]);
@@ -1726,7 +1629,6 @@ const shallowLoose = {
   objects: 'shallow',
   strict: false
 };
-
 const createRendererInstance = (gl, canvas) => {
   const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
   if (isRenderer(customRenderer)) return customRenderer;else return new THREE.WebGLRenderer({
@@ -1737,16 +1639,13 @@ const createRendererInstance = (gl, canvas) => {
     ...gl
   });
 };
-
 function isCanvas(maybeCanvas) {
   return maybeCanvas instanceof HTMLCanvasElement;
 }
-
 function computeInitialSize(canvas, defaultSize) {
   if (defaultSize) {
     return defaultSize;
   }
-
   if (isCanvas(canvas) && canvas.parentElement) {
     const {
       width,
@@ -1761,7 +1660,6 @@ function computeInitialSize(canvas, defaultSize) {
       left
     };
   }
-
   return {
     width: 0,
     height: 0,
@@ -1769,29 +1667,33 @@ function computeInitialSize(canvas, defaultSize) {
     left: 0
   };
 }
-
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
   const prevRoot = roots.get(canvas);
   const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
   const prevStore = prevRoot == null ? void 0 : prevRoot.store;
-  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
-  // https://github.com/pmndrs/react-three-fiber/pull/2261
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!');
 
-  const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
+  // Report when an error was detected in a previous render
+  // https://github.com/pmndrs/react-three-fiber/pull/2261
+  const logRecoverableError = typeof reportError === 'function' ?
+  // In modern browsers, reportError will dispatch an error event,
   // emulating an uncaught JavaScript error.
-  reportError : // In older browsers and test environments, fallback to console.error.
-  console.error; // Create store
-
-  const store = prevStore || createStore(invalidate, advance); // Create renderer
-
-  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
-
+  reportError :
+  // In older browsers and test environments, fallback to console.error.
+  console.error;
+
+  // Create store
+  const store = prevStore || createStore(invalidate, advance);
+  // Create renderer
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, '', logRecoverableError, null);
+  // Map it
   if (!prevRoot) roots.set(canvas, {
     fiber,
     store
-  }); // Locals
+  });
 
+  // Locals
   let onCreated;
   let configured = false;
   return {
@@ -1813,96 +1715,97 @@ function createRoot(canvas) {
         camera: cameraOptions,
         onPointerMissed
       } = props;
-      let state = store.getState(); // Set up renderer (one time only!)
+      let state = store.getState();
 
+      // Set up renderer (one time only!)
       let gl = state.gl;
       if (!state.gl) state.set({
         gl: gl = createRendererInstance(glConfig, canvas)
-      }); // Set up raycaster (one time only!)
+      });
 
+      // Set up raycaster (one time only!)
       let raycaster = state.raycaster;
       if (!raycaster) state.set({
         raycaster: raycaster = new THREE.Raycaster()
-      }); // Set raycaster options
+      });
 
+      // Set raycaster options
       const {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
+        ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
-        params: { ...raycaster.params,
+        params: {
+          ...raycaster.params,
           ...params
         }
-      }); // Create default camera (one time only!)
+      });
 
+      // Create default camera (one time only!)
       if (!state.camera) {
         const isCamera = cameraOptions instanceof THREE.Camera;
         const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
-
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
-
+          if (cameraOptions) applyProps(camera, cameraOptions);
+          // Always look at center by default
           if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
-
         state.set({
           camera
         });
-      } // Set up XR (one time only!)
-
+      }
 
+      // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR
         const handleXRFrame = (timestamp, frame) => {
           const state = store.getState();
           if (state.frameloop === 'never') return;
           advance(timestamp, true, state, frame);
-        }; // Toggle render switching on session
-
+        };
 
+        // Toggle render switching on session
         const handleSessionChange = () => {
           const state = store.getState();
           state.gl.xr.enabled = state.gl.xr.isPresenting;
           state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
           if (!state.gl.xr.isPresenting) invalidate(state);
-        }; // WebXR session manager
-
+        };
 
+        // WebXR session manager
         const xr = {
           connect() {
             const gl = store.getState().gl;
             gl.xr.addEventListener('sessionstart', handleSessionChange);
             gl.xr.addEventListener('sessionend', handleSessionChange);
           },
-
           disconnect() {
             const gl = store.getState().gl;
             gl.xr.removeEventListener('sessionstart', handleSessionChange);
             gl.xr.removeEventListener('sessionend', handleSessionChange);
           }
+        };
 
-        }; // Subscribe to WebXR session events
-
+        // Subscribe to WebXR session events
         if (gl.xr) xr.connect();
         state.set({
           xr
         });
-      } // Set shadowmap
-
+      }
 
+      // Set shadowmap
       if (gl.shadowMap) {
         const oldEnabled = gl.shadowMap.enabled;
         const oldType = gl.shadowMap.type;
         gl.shadowMap.enabled = !!shadows;
-
         if (is.boo(shadows)) {
           gl.shadowMap.type = THREE.PCFSoftShadowMap;
         } else if (is.str(shadows)) {
           var _types$shadows;
-
           const types = {
             basic: THREE.BasicShadowMap,
             percentage: THREE.PCFShadowMap,
@@ -1913,21 +1816,20 @@ function createRoot(canvas) {
         } else if (is.obj(shadows)) {
           Object.assign(gl.shadowMap, shadows);
         }
-
         if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type) gl.shadowMap.needsUpdate = true;
-      } // Safely set color management if available.
-      // Avoid accessing THREE.ColorManagement to play nice with older versions
-
+      }
 
+      // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
       if ('ColorManagement' in THREE) {
         setDeep(THREE, legacy, ['ColorManagement', 'legacyMode']);
       }
-
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
       const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
       if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
-      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping; // Update color management state
+      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping;
 
+      // Update color management state
       if (state.legacy !== legacy) state.set(() => ({
         legacy
       }));
@@ -1936,40 +1838,40 @@ function createRoot(canvas) {
       }));
       if (state.flat !== flat) state.set(() => ({
         flat
-      })); // Set gl props
-
-      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig); // Store events internally
+      }));
 
+      // Set gl props
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
+      // Store events internally
       if (events && !state.events.handlers) state.set({
         events: events(store)
-      }); // Check pixelratio
-
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
-
+      });
+      // Check pixelratio
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      // Check size, allow it to take on container bounds initially
       const size = computeInitialSize(canvas, propsSize);
-
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
-      } // Check frameloop
-
-
-      if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
-
+      }
+      // Check frameloop
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
+      // Check pointer missed
       if (!state.onPointerMissed) state.set({
         onPointerMissed
-      }); // Check performance
-
+      });
+      // Check performance
       if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: { ...state.performance,
+        performance: {
+          ...state.performance,
           ...performance
         }
-      })); // Set locals
+      }));
 
+      // Set locals
       onCreated = onCreatedCallback;
       configured = true;
       return this;
     },
-
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
@@ -1981,21 +1883,17 @@ function createRoot(canvas) {
       }), fiber, null, () => undefined);
       return store;
     },
-
     unmount() {
       unmountComponentAtNode(canvas);
     }
-
   };
 }
-
 function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
   return root.render(children);
 }
-
 function Provider({
   store,
   children,
@@ -2003,28 +1901,28 @@ function Provider({
   rootElement
 }) {
   useIsomorphicLayoutEffect(() => {
-    const state = store.getState(); // Flag the canvas active, rendering will now begin
-
+    const state = store.getState();
+    // Flag the canvas active, rendering will now begin
     state.set(state => ({
-      internal: { ...state.internal,
+      internal: {
+        ...state.internal,
         active: true
       }
-    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
-
-    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    }));
+    // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state);
+    // Connect events to the targets parent, this is done to ensure events are registered on
     // a shared target, and not on the canvas itself
-
-    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: store
   }, children);
 }
-
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
   const fiber = root == null ? void 0 : root.fiber;
-
   if (fiber) {
     const state = root == null ? void 0 : root.store.getState();
     if (state) state.internal.active = false;
@@ -2033,7 +1931,6 @@ function unmountComponentAtNode(canvas, callback) {
         setTimeout(() => {
           try {
             var _state$gl, _state$gl$renderLists, _state$gl2, _state$gl3;
-
             state.events.disconnect == null ? void 0 : state.events.disconnect();
             (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
             (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
@@ -2049,7 +1946,6 @@ function unmountComponentAtNode(canvas, callback) {
     });
   }
 }
-
 function createPortal(children, container, state) {
   return /*#__PURE__*/React.createElement(Portal, {
     key: container.uuid,
@@ -2058,7 +1954,6 @@ function createPortal(children, container, state) {
     state: state
   });
 }
-
 function Portal({
   state = {},
   children,
@@ -2078,30 +1973,33 @@ function Portal({
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
   const inject = React.useCallback((rootState, injectState) => {
-    const intersect = { ...rootState
+    const intersect = {
+      ...rootState
     }; // all prev state props
+
     // Only the fields of "rootState" that do not differ from injectState
     // Some props should be off-limits
     // Otherwise filter out the props that are different and let the inject layer take precedence
-
     Object.keys(rootState).forEach(key => {
-      if ( // Some props should be off-limits
-      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
-      rootState[key] !== injectState[key]) {
+      if (
+      // Some props should be off-limits
+      privateKeys.includes(key) ||
+      // Otherwise filter out the props that are different and let the inject layer take precedence
+      // Unless the inject layer props is undefined, then we keep the root layer
+      rootState[key] !== injectState[key] && injectState[key]) {
         delete intersect[key];
       }
     });
     let viewport = undefined;
-
     if (injectState && size) {
-      const camera = injectState.camera; // Calculate the override viewport, if present
-
-      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
-
+      const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+      // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
-
-    return { // The intersect consists of the previous root state
+    return {
+      // The intersect consists of the previous root state
       ...intersect,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
@@ -2111,14 +2009,17 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...rootState.events,
+      events: {
+        ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...rootState.size,
+      size: {
+        ...rootState.size,
         ...size
       },
-      viewport: { ...rootState.viewport,
+      viewport: {
+        ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -2127,16 +2028,19 @@ function Portal({
   const [usePortalStore] = React.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
     const previousState = previousRoot.getState();
-    const store = create((set, get) => ({ ...previousState,
+    const store = create((set, get) => ({
+      ...previousState,
       scene: container,
       raycaster,
       pointer,
       mouse: pointer,
       previousRoot,
-      events: { ...previousState.events,
+      events: {
+        ...previousState.events,
         ...events
       },
-      size: { ...previousState.size,
+      size: {
+        ...previousState.size,
         ...size
       },
       ...rest,
@@ -2144,8 +2048,10 @@ function Portal({
       set,
       get,
       // Layers are allowed to override events
-      setEvents: events => set(state => ({ ...state,
-        events: { ...state.events,
+      setEvents: events => set(state => ({
+        ...state,
+        events: {
+          ...state.events,
           ...events
         }
       }))
@@ -2167,7 +2073,6 @@ function Portal({
     value: usePortalStore
   }, children), usePortalStore, null));
 }
-
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',