@react-three/fiber 7.0.22 → 7.0.26

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @react-three/fiber
 
+## 7.0.26
+
+### Patch Changes
+
+- ccda644: passthrough size via raycaster#computeOffsets
+
+## 7.0.25
+
+### Patch Changes
+
+- 8698734: Release latest patches
+
+## 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

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

@@ -90,6 +90,8 @@ export declare type FilterFunction = (items: THREE.Intersection[], state: RootSt
 export declare type ComputeOffsetsFunction = (event: any, state: RootState) => {
     offsetX: number;
     offsetY: number;
+    width?: number;
+    height?: number;
 };
 export declare type StoreProps = {
     gl: THREE.WebGLRenderer;

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

@@ -27,7 +27,10 @@ export interface NodeProps<T, P> {
     key?: React.Key;
     onUpdate?: (self: T) => void;
 }
-export declare type Node<T, P> = Overwrite<Partial<T>, NodeProps<T, P>>;
+export declare type ExtendedColors<T> = {
+    [K in keyof T]: T[K] extends THREE.Color | undefined ? Color : T[K];
+};
+export declare type Node<T, P> = ExtendedColors<Overwrite<Partial<T>, NodeProps<T, P>>>;
 export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
     position?: Vector3;
     up?: Vector3;
@@ -38,13 +41,9 @@ export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
     layers?: Layers;
     dispose?: (() => void) | null;
 }> & EventHandlers;
-export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Overwrite<Node<T, P>, {}>;
-export declare type MaterialNode<T extends THREE.Material, P> = Overwrite<Node<T, P>, {
-    color?: Color;
-}>;
-export declare type LightNode<T extends THREE.Light, P> = Overwrite<Object3DNode<T, P>, {
-    color?: Color;
-}>;
+export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Node<T, P>;
+export declare type MaterialNode<T extends THREE.Material, P> = Node<T, P>;
+export declare type LightNode<T extends THREE.Light, P> = Object3DNode<T, P>;
 export declare type AudioListenerProps = Object3DNode<THREE.AudioListener, typeof THREE.AudioListener>;
 export declare type PositionalAudioProps = Object3DNode<THREE.PositionalAudio, typeof THREE.PositionalAudio>;
 export declare type MeshProps = Object3DNode<THREE.Mesh, typeof THREE.Mesh>;
@@ -75,19 +74,16 @@ export declare type ExtrudeBufferGeometryProps = BufferGeometryNode<THREE.Extrud
 export declare type IcosahedronBufferGeometryProps = BufferGeometryNode<THREE.IcosahedronBufferGeometry, typeof THREE.IcosahedronBufferGeometry>;
 export declare type LatheBufferGeometryProps = BufferGeometryNode<THREE.LatheBufferGeometry, typeof THREE.LatheBufferGeometry>;
 export declare type OctahedronBufferGeometryProps = BufferGeometryNode<THREE.OctahedronBufferGeometry, typeof THREE.OctahedronBufferGeometry>;
-export declare type ParametricBufferGeometryProps = BufferGeometryNode<THREE.ParametricBufferGeometry, typeof THREE.ParametricBufferGeometry>;
 export declare type PlaneBufferGeometryProps = BufferGeometryNode<THREE.PlaneBufferGeometry, typeof THREE.PlaneBufferGeometry>;
 export declare type PolyhedronBufferGeometryProps = BufferGeometryNode<THREE.PolyhedronBufferGeometry, typeof THREE.PolyhedronBufferGeometry>;
 export declare type RingBufferGeometryProps = BufferGeometryNode<THREE.RingBufferGeometry, typeof THREE.RingBufferGeometry>;
 export declare type ShapeBufferGeometryProps = BufferGeometryNode<THREE.ShapeBufferGeometry, typeof THREE.ShapeBufferGeometry>;
 export declare type SphereBufferGeometryProps = BufferGeometryNode<THREE.SphereBufferGeometry, typeof THREE.SphereBufferGeometry>;
 export declare type TetrahedronBufferGeometryProps = BufferGeometryNode<THREE.TetrahedronBufferGeometry, typeof THREE.TetrahedronBufferGeometry>;
-export declare type TextBufferGeometryProps = BufferGeometryNode<THREE.TextBufferGeometry, typeof THREE.TextBufferGeometry>;
 export declare type TorusBufferGeometryProps = BufferGeometryNode<THREE.TorusBufferGeometry, typeof THREE.TorusBufferGeometry>;
 export declare type TorusKnotBufferGeometryProps = BufferGeometryNode<THREE.TorusKnotBufferGeometry, typeof THREE.TorusKnotBufferGeometry>;
 export declare type TubeBufferGeometryProps = BufferGeometryNode<THREE.TubeBufferGeometry, typeof THREE.TubeBufferGeometry>;
 export declare type WireframeGeometryProps = BufferGeometryNode<THREE.WireframeGeometry, typeof THREE.WireframeGeometry>;
-export declare type ParametricGeometryProps = BufferGeometryNode<THREE.ParametricGeometry, typeof THREE.ParametricGeometry>;
 export declare type TetrahedronGeometryProps = BufferGeometryNode<THREE.TetrahedronGeometry, typeof THREE.TetrahedronGeometry>;
 export declare type OctahedronGeometryProps = BufferGeometryNode<THREE.OctahedronGeometry, typeof THREE.OctahedronGeometry>;
 export declare type IcosahedronGeometryProps = BufferGeometryNode<THREE.IcosahedronGeometry, typeof THREE.IcosahedronGeometry>;
@@ -96,7 +92,6 @@ export declare type PolyhedronGeometryProps = BufferGeometryNode<THREE.Polyhedro
 export declare type TubeGeometryProps = BufferGeometryNode<THREE.TubeGeometry, typeof THREE.TubeGeometry>;
 export declare type TorusKnotGeometryProps = BufferGeometryNode<THREE.TorusKnotGeometry, typeof THREE.TorusKnotGeometry>;
 export declare type TorusGeometryProps = BufferGeometryNode<THREE.TorusGeometry, typeof THREE.TorusGeometry>;
-export declare type TextGeometryProps = BufferGeometryNode<THREE.TextGeometry, typeof THREE.TextGeometry>;
 export declare type SphereGeometryProps = BufferGeometryNode<THREE.SphereGeometry, typeof THREE.SphereGeometry>;
 export declare type RingGeometryProps = BufferGeometryNode<THREE.RingGeometry, typeof THREE.RingGeometry>;
 export declare type PlaneGeometryProps = BufferGeometryNode<THREE.PlaneGeometry, typeof THREE.PlaneGeometry>;
@@ -213,19 +208,16 @@ declare global {
             icosahedronBufferGeometry: IcosahedronBufferGeometryProps;
             latheBufferGeometry: LatheBufferGeometryProps;
             octahedronBufferGeometry: OctahedronBufferGeometryProps;
-            parametricBufferGeometry: ParametricBufferGeometryProps;
             planeBufferGeometry: PlaneBufferGeometryProps;
             polyhedronBufferGeometry: PolyhedronBufferGeometryProps;
             ringBufferGeometry: RingBufferGeometryProps;
             shapeBufferGeometry: ShapeBufferGeometryProps;
             sphereBufferGeometry: SphereBufferGeometryProps;
             tetrahedronBufferGeometry: TetrahedronBufferGeometryProps;
-            textBufferGeometry: TextBufferGeometryProps;
             torusBufferGeometry: TorusBufferGeometryProps;
             torusKnotBufferGeometry: TorusKnotBufferGeometryProps;
             tubeBufferGeometry: TubeBufferGeometryProps;
             wireframeGeometry: WireframeGeometryProps;
-            parametricGeometry: ParametricGeometryProps;
             tetrahedronGeometry: TetrahedronGeometryProps;
             octahedronGeometry: OctahedronGeometryProps;
             icosahedronGeometry: IcosahedronGeometryProps;
@@ -234,7 +226,6 @@ declare global {
             tubeGeometry: TubeGeometryProps;
             torusKnotGeometry: TorusKnotGeometryProps;
             torusGeometry: TorusGeometryProps;
-            textGeometry: TextGeometryProps;
             sphereGeometry: SphereGeometryProps;
             ringGeometry: RingGeometryProps;
             planeGeometry: PlaneGeometryProps;

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.
  */
 
@@ -113,7 +114,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -124,14 +125,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -361,13 +359,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 ...
 
@@ -584,6 +585,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -614,8 +617,9 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE__namespace.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
@@ -636,14 +640,14 @@ function createRenderer(roots) {
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
                 // https://github.com/pmndrs/react-three-fiber/issues/344
 
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                if (!isLinear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           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__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+          if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
         }
 
       invalidateInstance(instance);
@@ -837,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;
@@ -920,10 +924,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // 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;
@@ -985,7 +992,17 @@ function createRenderer(roots) {
         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;
       }
@@ -1322,8 +1339,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
       if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-        console.log('update camera');
-
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;

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.
  */
 
@@ -113,7 +114,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -124,14 +125,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -361,13 +359,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 ...
 
@@ -584,6 +585,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -614,8 +617,9 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE__namespace.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
@@ -636,14 +640,14 @@ function createRenderer(roots) {
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
                 // https://github.com/pmndrs/react-three-fiber/issues/344
 
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                if (!isLinear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           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__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+          if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
         }
 
       invalidateInstance(instance);
@@ -837,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;
@@ -920,10 +924,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // 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;
@@ -985,7 +992,17 @@ function createRenderer(roots) {
         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;
       }
@@ -1322,8 +1339,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
       if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-        console.log('update camera');
-
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;

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.
  */
 
@@ -80,7 +81,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -91,14 +92,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -328,13 +326,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 ...
 
@@ -551,6 +552,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -581,8 +584,9 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
@@ -603,14 +607,14 @@ function createRenderer(roots) {
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
                 // https://github.com/pmndrs/react-three-fiber/issues/344
 
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                if (!isLinear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           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;
+          if (!isLinear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
         }
 
       invalidateInstance(instance);
@@ -804,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;
@@ -887,10 +891,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // 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;
@@ -952,7 +959,17 @@ function createRenderer(roots) {
         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;
       }
@@ -1289,8 +1306,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
       if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
-        console.log('update camera');
-
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;