@react-three/fiber 8.0.4 → 8.0.7

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

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

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

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

package/dist/{index-227921b7.cjs.prod.js → index-4fb4daff.cjs.prod.js}

@@ -211,7 +211,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    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;
@@ -304,9 +307,11 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r, _currentInstance$__r2;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.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
@@ -480,7 +485,13 @@ function createEvents(store) {
       if (state) {
         state.raycaster.camera = undefined;
       }
-    }); // Collect events
+    });
+
+    if (!state.previousRoot) {
+      // Make sure root-level pointer and ray are set up
+      state.events.compute == null ? void 0 : state.events.compute(event, state);
+    } // Collect events
+
 
     let hits = eventsObjects // Intersect objects
     .flatMap(obj => {
@@ -854,8 +865,10 @@ function createRenderer(roots, getEventPriority) {
     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.attach) {
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
@@ -865,7 +878,7 @@ function createRenderer(roots, getEventPriority) {
       // that is, anything that's a child in React but not a child in the scenegraph.
 
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -877,7 +890,9 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.__r3f.attach) {
+      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) {
         child.parent = parentInstance;
@@ -890,7 +905,7 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -904,21 +919,21 @@ function createRenderer(roots, getEventPriority) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _parentInstance$__r3f, _child$__r3f2;
+      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$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.__r3f.attach) {
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f;
+        var _child$__r3f4;
 
         parentInstance.remove(child); // Remove interactivity
 
-        if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
       } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -932,14 +947,14 @@ function createRenderer(roots, getEventPriority) {
       // when the reconciler calls it, but then carry our own check recursively
 
 
-      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
+      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 ...
 
       if (!isPrimitive) {
-        var _child$__r3f3;
+        var _child$__r3f6;
 
-        removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
       } // Remove references
 
@@ -1297,7 +1312,7 @@ const createStore = (invalidate, advance) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        subscribe: (ref, priority = 0) => {
+        subscribe: (ref, priority, store) => {
           set(({
             internal
           }) => ({
@@ -1311,7 +1326,8 @@ const createStore = (invalidate, advance) => {
               // highest priority renders last (on top of the other frames)
               subscribers: [...internal.subscribers, {
                 ref,
-                priority
+                priority,
+                store
               }].sort((a, b) => a.priority - b.priority)
             }
           }));
@@ -1394,10 +1410,12 @@ function run(effects, timestamp) {
 }
 
 let subscribers;
+let subscription;
+let delta;
 
 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
+  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;
@@ -1408,7 +1426,10 @@ function render$1(timestamp, state, frame) {
 
   subscribers = state.internal.subscribers;
 
-  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
+  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
@@ -1487,12 +1508,13 @@ function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
+  const store = useStore();
+  const subscribe = store.getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
   React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 function useGraph(object) {
@@ -1827,6 +1849,7 @@ function unmountComponentAtNode(canvas, callback) {
 
 function createPortal(children, container, state) {
   return /*#__PURE__*/React__namespace.createElement(Portal, {
+    key: container.uuid,
     children: children,
     container: container,
     state: state
@@ -1849,6 +1872,7 @@ function Portal({
   } = state;
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = React__namespace.useCallback((state, injectState) => {
     const intersect = { ...state
     };
@@ -1868,6 +1892,8 @@ function Portal({
       raycaster,
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
+        pointer,
+        mouse: pointer,
         ...events
       },
       ...rest

package/dist/{index-6cf8dd4b.cjs.dev.js → index-75d39ab1.cjs.dev.js}

@@ -211,7 +211,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    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;
@@ -304,9 +307,11 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r, _currentInstance$__r2;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.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
@@ -480,7 +485,13 @@ function createEvents(store) {
       if (state) {
         state.raycaster.camera = undefined;
       }
-    }); // Collect events
+    });
+
+    if (!state.previousRoot) {
+      // Make sure root-level pointer and ray are set up
+      state.events.compute == null ? void 0 : state.events.compute(event, state);
+    } // Collect events
+
 
     let hits = eventsObjects // Intersect objects
     .flatMap(obj => {
@@ -854,8 +865,10 @@ function createRenderer(roots, getEventPriority) {
     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.attach) {
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
@@ -865,7 +878,7 @@ function createRenderer(roots, getEventPriority) {
       // that is, anything that's a child in React but not a child in the scenegraph.
 
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -877,7 +890,9 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.__r3f.attach) {
+      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) {
         child.parent = parentInstance;
@@ -890,7 +905,7 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -904,21 +919,21 @@ function createRenderer(roots, getEventPriority) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _parentInstance$__r3f, _child$__r3f2;
+      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$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.__r3f.attach) {
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f;
+        var _child$__r3f4;
 
         parentInstance.remove(child); // Remove interactivity
 
-        if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
       } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -932,14 +947,14 @@ function createRenderer(roots, getEventPriority) {
       // when the reconciler calls it, but then carry our own check recursively
 
 
-      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
+      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 ...
 
       if (!isPrimitive) {
-        var _child$__r3f3;
+        var _child$__r3f6;
 
-        removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
       } // Remove references
 
@@ -1297,7 +1312,7 @@ const createStore = (invalidate, advance) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        subscribe: (ref, priority = 0) => {
+        subscribe: (ref, priority, store) => {
           set(({
             internal
           }) => ({
@@ -1311,7 +1326,8 @@ const createStore = (invalidate, advance) => {
               // highest priority renders last (on top of the other frames)
               subscribers: [...internal.subscribers, {
                 ref,
-                priority
+                priority,
+                store
               }].sort((a, b) => a.priority - b.priority)
             }
           }));
@@ -1394,10 +1410,12 @@ function run(effects, timestamp) {
 }
 
 let subscribers;
+let subscription;
+let delta;
 
 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
+  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;
@@ -1408,7 +1426,10 @@ function render$1(timestamp, state, frame) {
 
   subscribers = state.internal.subscribers;
 
-  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
+  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
@@ -1487,12 +1508,13 @@ function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
+  const store = useStore();
+  const subscribe = store.getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
   React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 function useGraph(object) {
@@ -1827,6 +1849,7 @@ function unmountComponentAtNode(canvas, callback) {
 
 function createPortal(children, container, state) {
   return /*#__PURE__*/React__namespace.createElement(Portal, {
+    key: container.uuid,
     children: children,
     container: container,
     state: state
@@ -1849,6 +1872,7 @@ function Portal({
   } = state;
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = React__namespace.useCallback((state, injectState) => {
     const intersect = { ...state
     };
@@ -1868,6 +1892,8 @@ function Portal({
       raycaster,
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
+        pointer,
+        mouse: pointer,
         ...events
       },
       ...rest

package/dist/{index-de9e845e.esm.js → index-e42f8ac9.esm.js}

@@ -182,7 +182,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    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;
@@ -275,9 +278,11 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r, _currentInstance$__r2;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.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
@@ -451,7 +456,13 @@ function createEvents(store) {
       if (state) {
         state.raycaster.camera = undefined;
       }
-    }); // Collect events
+    });
+
+    if (!state.previousRoot) {
+      // Make sure root-level pointer and ray are set up
+      state.events.compute == null ? void 0 : state.events.compute(event, state);
+    } // Collect events
+
 
     let hits = eventsObjects // Intersect objects
     .flatMap(obj => {
@@ -825,8 +836,10 @@ function createRenderer(roots, getEventPriority) {
     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.attach) {
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
@@ -836,7 +849,7 @@ function createRenderer(roots, getEventPriority) {
       // that is, anything that's a child in React but not a child in the scenegraph.
 
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -848,7 +861,9 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.__r3f.attach) {
+      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) {
         child.parent = parentInstance;
@@ -861,7 +876,7 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -875,21 +890,21 @@ function createRenderer(roots, getEventPriority) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _parentInstance$__r3f, _child$__r3f2;
+      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$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.__r3f.attach) {
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f;
+        var _child$__r3f4;
 
         parentInstance.remove(child); // Remove interactivity
 
-        if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
       } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -903,14 +918,14 @@ function createRenderer(roots, getEventPriority) {
       // when the reconciler calls it, but then carry our own check recursively
 
 
-      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
+      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 ...
 
       if (!isPrimitive) {
-        var _child$__r3f3;
+        var _child$__r3f6;
 
-        removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
       } // Remove references
 
@@ -1268,7 +1283,7 @@ const createStore = (invalidate, advance) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        subscribe: (ref, priority = 0) => {
+        subscribe: (ref, priority, store) => {
           set(({
             internal
           }) => ({
@@ -1282,7 +1297,8 @@ const createStore = (invalidate, advance) => {
               // highest priority renders last (on top of the other frames)
               subscribers: [...internal.subscribers, {
                 ref,
-                priority
+                priority,
+                store
               }].sort((a, b) => a.priority - b.priority)
             }
           }));
@@ -1365,10 +1381,12 @@ function run(effects, timestamp) {
 }
 
 let subscribers;
+let subscription;
+let delta;
 
 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
+  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;
@@ -1379,7 +1397,10 @@ function render$1(timestamp, state, frame) {
 
   subscribers = state.internal.subscribers;
 
-  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
+  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
@@ -1458,12 +1479,13 @@ function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
+  const store = useStore();
+  const subscribe = store.getState().internal.subscribe; // Update ref
 
   const ref = React.useRef(callback);
   React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  React.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 function useGraph(object) {
@@ -1798,6 +1820,7 @@ function unmountComponentAtNode(canvas, callback) {
 
 function createPortal(children, container, state) {
   return /*#__PURE__*/React.createElement(Portal, {
+    key: container.uuid,
     children: children,
     container: container,
     state: state
@@ -1820,6 +1843,7 @@ function Portal({
   } = state;
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
+  const [pointer] = React.useState(() => new THREE.Vector2());
   const inject = React.useCallback((state, injectState) => {
     const intersect = { ...state
     };
@@ -1839,6 +1863,8 @@ function Portal({
       raycaster,
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
+        pointer,
+        mouse: pointer,
         ...events
       },
       ...rest