@react-three/fiber 7.0.20 → 7.0.24

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @react-three/fiber
 
+## 7.0.24
+
+### Patch Changes
+
+- 7f46ddf: cleanup captured pointers when released (#1914)
+
+## 7.0.23
+
+### Patch Changes
+
+- 30d38b1: remove logs
+
+## 7.0.22
+
+### Patch Changes
+
+- 259e1fa: add camera:manual
+
+## 7.0.21
+
+### Patch Changes
+
+- 65e4147: up usemeasure, add last event to internals"
+
 ## 7.0.20
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ import type { RootState } from './store';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
-export interface IntesectionEvent<TSourceEvent> extends Intersection {
+export interface IntersectionEvent<TSourceEvent> extends Intersection {
     intersections: Intersection[];
     stopped: boolean;
     unprojectedPoint: THREE.Vector3;
@@ -18,8 +18,8 @@ export interface IntesectionEvent<TSourceEvent> extends Intersection {
     spaceY: number;
 }
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
-export declare type ThreeEvent<TEvent> = TEvent & IntesectionEvent<TEvent>;
-export declare type DomEvent = ThreeEvent<PointerEvent | MouseEvent | WheelEvent>;
+export declare type ThreeEvent<TEvent> = IntersectionEvent<TEvent>;
+export declare type DomEvent = PointerEvent | MouseEvent | WheelEvent;
 export declare type Events = {
     onClick: EventListener;
     onContextMenu: EventListener;
@@ -43,7 +43,7 @@ export declare type EventHandlers = {
     onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void;
     onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void;
     onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
-    onPointerMissed?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMissed?: (event: MouseEvent) => void;
     onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
     onWheel?: (event: ThreeEvent<WheelEvent>) => void;
 };

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

@@ -47,8 +47,9 @@ export declare type InternalState = {
     priority: number;
     frames: number;
     lastProps: StoreProps;
+    lastEvent: React.MutableRefObject<DomEvent | null>;
     interaction: THREE.Object3D[];
-    hovered: Map<string, DomEvent>;
+    hovered: Map<string, ThreeEvent<DomEvent>>;
     subscribers: Subscription[];
     capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
     initialClick: [x: number, y: number];
@@ -58,7 +59,9 @@ export declare type InternalState = {
 export declare type RootState = {
     gl: THREE.WebGLRenderer;
     scene: THREE.Scene;
-    camera: Camera;
+    camera: Camera & {
+        manual?: boolean;
+    };
     controls: THREE.EventDispatcher | null;
     raycaster: Raycaster;
     mouse: THREE.Vector2;
@@ -78,7 +81,8 @@ export declare type RootState = {
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setSize: (width: number, height: number) => void;
     setDpr: (dpr: Dpr) => void;
-    onPointerMissed?: (event: ThreeEvent<PointerEvent>) => void;
+    setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
+    onPointerMissed?: (event: MouseEvent) => void;
     events: EventManager<any>;
     internal: InternalState;
 };
@@ -100,8 +104,10 @@ export declare type StoreProps = {
     dpr?: Dpr;
     clock?: THREE.Clock;
     raycaster?: Partial<Raycaster>;
-    camera?: Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>;
-    onPointerMissed?: (event: ThreeEvent<PointerEvent>) => void;
+    camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
+        manual?: boolean;
+    };
+    onPointerMissed?: (event: MouseEvent) => void;
 };
 export declare type ApplyProps = (instance: Instance, newProps: InstanceProps) => void;
 export declare function calculateDpr(dpr: Dpr): number;

package/dist/declarations/src/three-types.d.ts

@@ -23,7 +23,7 @@ export interface NodeProps<T, P> {
     attachFns?: [AttachCallback, AttachCallback];
     args?: Args<P>;
     children?: React.ReactNode;
-    ref?: React.Ref<React.ReactNode>;
+    ref?: React.RefCallback<T> | React.RefObject<React.ReactNode> | null;
     key?: React.Key;
     onUpdate?: (self: T) => void;
 }
@@ -174,6 +174,7 @@ export declare type Matrix3Props = Node<THREE.Matrix3, typeof THREE.Matrix3>;
 export declare type Matrix4Props = Node<THREE.Matrix4, typeof THREE.Matrix4>;
 export declare type QuaternionProps = Node<THREE.Quaternion, typeof THREE.Quaternion>;
 export declare type BufferAttributeProps = Node<THREE.BufferAttribute, typeof THREE.BufferAttribute>;
+export declare type Float32BufferAttributeProps = Node<THREE.Float32BufferAttribute, typeof THREE.Float32BufferAttribute>;
 export declare type InstancedBufferAttributeProps = Node<THREE.InstancedBufferAttribute, typeof THREE.InstancedBufferAttribute>;
 export declare type ColorProps = Node<THREE.Color, ColorArray>;
 export declare type FogProps = Node<THREE.Fog, typeof THREE.Fog>;
@@ -307,6 +308,7 @@ declare global {
             matrix4: Matrix4Props;
             quaternion: QuaternionProps;
             bufferAttribute: BufferAttributeProps;
+            float32BufferAttribute: Float32BufferAttributeProps;
             instancedBufferAttribute: InstancedBufferAttributeProps;
             color: ColorProps;
             fog: FogProps;

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

@@ -74,7 +74,8 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
-/** Release pointer captures.
+/**
+ * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
@@ -361,13 +362,16 @@ function createEvents(store) {
 
       case 'onLostPointerCapture':
         return event => {
-          if ('pointerId' in 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.
-            store.getState().internal.capturedMap.delete(event.pointerId);
+            internal.capturedMap.delete(event.pointerId);
+            cancelPointer([]);
           }
-
-          cancelPointer([]);
         };
     } // Any other pointer goes here ...
 
@@ -377,7 +381,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(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';
@@ -435,12 +440,17 @@ function createEvents(store) {
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
-            if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+            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
 
               handler(data);
             }
+          } else {
+            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+            }
           }
         }
       });
@@ -643,7 +653,7 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+    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
@@ -696,7 +706,9 @@ function createRenderer(roots) {
       });
     } else {
       const target = catalogue[name] || THREE__namespace[name];
-      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Instanciate new object, link it to the root
+      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Throw if an object or literal was passed for args
+
+      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -829,7 +841,7 @@ function createRenderer(roots) {
         parentInstance[child.attachArray] = parentInstance[child.attachArray].filter(x => x !== child);
       } else if (child.attachObject) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
-      } else if (child.attach && !is.fun(child.attach)) {
+      } else if (child.attach && !is.fun(child.attach) && parentInstance[child.attach] === child) {
         parentInstance[child.attach] = null;
       } else if (is.arr(child.attachFns)) {
         const [, detachFn] = child.attachFns;
@@ -970,12 +982,24 @@ function createRenderer(roots) {
           args: argsOld = [],
           children: cO,
           ...restOld
-        } = oldProps; // If it has new props or arguments, then it needs to be re-instanciated
+        } = oldProps; // Throw if an object or literal was passed for args
+
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
 
         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]; // If instance was never attached, attach it
+
+        if (instance.attach && typeof instance.attach !== 'function') {
+          const localState = instance.__r3f;
+          const parent = localState.parent;
+
+          if (parent && parent[instance.attach] !== instance) {
+            appendChild(parent, instance);
+          }
+        } // Otherwise do not touch the instance
+
 
         return null;
       }
@@ -1020,11 +1044,24 @@ function createRenderer(roots) {
 
     createTextInstance() {},
 
-    finalizeInitialChildren() {
-      return false;
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f7;
+
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      const localState = (_instance$__r3f7 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f7 : {};
+      return !!localState.handlers;
     },
 
-    commitMount() {// noop
+    commitMount(instance)
+    /*, type, props*/
+    {
+      var _instance$__r3f8;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f8 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f8 : {};
+      if (instance.raycast && localState.handlers && localState.eventCount) instance.__r3f.root.getState().internal.interaction.push(instance);
     },
 
     shouldDeprioritizeSubtree() {
@@ -1231,6 +1268,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1239,6 +1279,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React__namespace.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1294,7 +1335,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1719,7 +1760,9 @@ function render(element, canvas, {
     // Check pixelratio
     if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+    if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
     // Changes to the color-space
 
     const linearChanged = props.linear !== state.internal.lastProps.linear;

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

@@ -74,7 +74,8 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
-/** Release pointer captures.
+/**
+ * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
@@ -361,13 +362,16 @@ function createEvents(store) {
 
       case 'onLostPointerCapture':
         return event => {
-          if ('pointerId' in 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.
-            store.getState().internal.capturedMap.delete(event.pointerId);
+            internal.capturedMap.delete(event.pointerId);
+            cancelPointer([]);
           }
-
-          cancelPointer([]);
         };
     } // Any other pointer goes here ...
 
@@ -377,7 +381,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(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';
@@ -435,12 +440,17 @@ function createEvents(store) {
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
-            if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+            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
 
               handler(data);
             }
+          } else {
+            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+            }
           }
         }
       });
@@ -643,7 +653,7 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+    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
@@ -696,7 +706,9 @@ function createRenderer(roots) {
       });
     } else {
       const target = catalogue[name] || THREE__namespace[name];
-      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Instanciate new object, link it to the root
+      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Throw if an object or literal was passed for args
+
+      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -829,7 +841,7 @@ function createRenderer(roots) {
         parentInstance[child.attachArray] = parentInstance[child.attachArray].filter(x => x !== child);
       } else if (child.attachObject) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
-      } else if (child.attach && !is.fun(child.attach)) {
+      } else if (child.attach && !is.fun(child.attach) && parentInstance[child.attach] === child) {
         parentInstance[child.attach] = null;
       } else if (is.arr(child.attachFns)) {
         const [, detachFn] = child.attachFns;
@@ -970,12 +982,24 @@ function createRenderer(roots) {
           args: argsOld = [],
           children: cO,
           ...restOld
-        } = oldProps; // If it has new props or arguments, then it needs to be re-instanciated
+        } = oldProps; // Throw if an object or literal was passed for args
+
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
 
         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]; // If instance was never attached, attach it
+
+        if (instance.attach && typeof instance.attach !== 'function') {
+          const localState = instance.__r3f;
+          const parent = localState.parent;
+
+          if (parent && parent[instance.attach] !== instance) {
+            appendChild(parent, instance);
+          }
+        } // Otherwise do not touch the instance
+
 
         return null;
       }
@@ -1020,11 +1044,24 @@ function createRenderer(roots) {
 
     createTextInstance() {},
 
-    finalizeInitialChildren() {
-      return false;
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f7;
+
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      const localState = (_instance$__r3f7 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f7 : {};
+      return !!localState.handlers;
     },
 
-    commitMount() {// noop
+    commitMount(instance)
+    /*, type, props*/
+    {
+      var _instance$__r3f8;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f8 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f8 : {};
+      if (instance.raycast && localState.handlers && localState.eventCount) instance.__r3f.root.getState().internal.interaction.push(instance);
     },
 
     shouldDeprioritizeSubtree() {
@@ -1231,6 +1268,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1239,6 +1279,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React__namespace.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1294,7 +1335,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1719,7 +1760,9 @@ function render(element, canvas, {
     // Check pixelratio
     if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+    if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
     // Changes to the color-space
 
     const linearChanged = props.linear !== state.internal.lastProps.linear;

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

@@ -41,7 +41,8 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
-/** Release pointer captures.
+/**
+ * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
@@ -328,13 +329,16 @@ function createEvents(store) {
 
       case 'onLostPointerCapture':
         return event => {
-          if ('pointerId' in 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.
-            store.getState().internal.capturedMap.delete(event.pointerId);
+            internal.capturedMap.delete(event.pointerId);
+            cancelPointer([]);
           }
-
-          cancelPointer([]);
         };
     } // Any other pointer goes here ...
 
@@ -344,7 +348,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(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';
@@ -402,12 +407,17 @@ function createEvents(store) {
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
-            if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+            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
 
               handler(data);
             }
+          } else {
+            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+            }
           }
         }
       });
@@ -610,7 +620,7 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+    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
@@ -663,7 +673,9 @@ function createRenderer(roots) {
       });
     } else {
       const target = catalogue[name] || THREE[name];
-      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Instanciate new object, link it to the root
+      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Throw if an object or literal was passed for args
+
+      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -796,7 +808,7 @@ function createRenderer(roots) {
         parentInstance[child.attachArray] = parentInstance[child.attachArray].filter(x => x !== child);
       } else if (child.attachObject) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
-      } else if (child.attach && !is.fun(child.attach)) {
+      } else if (child.attach && !is.fun(child.attach) && parentInstance[child.attach] === child) {
         parentInstance[child.attach] = null;
       } else if (is.arr(child.attachFns)) {
         const [, detachFn] = child.attachFns;
@@ -937,12 +949,24 @@ function createRenderer(roots) {
           args: argsOld = [],
           children: cO,
           ...restOld
-        } = oldProps; // If it has new props or arguments, then it needs to be re-instanciated
+        } = oldProps; // Throw if an object or literal was passed for args
+
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
 
         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]; // If instance was never attached, attach it
+
+        if (instance.attach && typeof instance.attach !== 'function') {
+          const localState = instance.__r3f;
+          const parent = localState.parent;
+
+          if (parent && parent[instance.attach] !== instance) {
+            appendChild(parent, instance);
+          }
+        } // Otherwise do not touch the instance
+
 
         return null;
       }
@@ -987,11 +1011,24 @@ function createRenderer(roots) {
 
     createTextInstance() {},
 
-    finalizeInitialChildren() {
-      return false;
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f7;
+
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      const localState = (_instance$__r3f7 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f7 : {};
+      return !!localState.handlers;
     },
 
-    commitMount() {// noop
+    commitMount(instance)
+    /*, type, props*/
+    {
+      var _instance$__r3f8;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f8 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f8 : {};
+      if (instance.raycast && localState.handlers && localState.eventCount) instance.__r3f.root.getState().internal.interaction.push(instance);
     },
 
     shouldDeprioritizeSubtree() {
@@ -1198,6 +1235,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1206,6 +1246,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1261,7 +1302,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!(internal.lastProps.camera instanceof THREE.Camera)) {
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1686,7 +1727,9 @@ function render(element, canvas, {
     // Check pixelratio
     if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+    if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
     // Changes to the color-space
 
     const linearChanged = props.linear !== state.internal.lastProps.linear;