@react-three/fiber 8.11.9 → 8.11.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.11.11
+
+### Patch Changes
+
+- f03c6ef8: feat: `scene` render prop for custom THREE.Scene
+
+## 8.11.10
+
+### Patch Changes
+
+- 12907836: fix onpointerlostcapture which fired before pointerup
+
 ## 8.11.9
 
 ### Patch Changes

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

@@ -27,6 +27,7 @@ export declare type RenderProps<TCanvas extends Canvas> = {
     performance?: Partial<Omit<Performance, 'regress'>>;
     dpr?: Dpr;
     raycaster?: Partial<THREE.Raycaster>;
+    scene?: THREE.Scene | Partial<ReactThreeFiber.Object3DNode<THREE.Scene, typeof THREE.Scene>>;
     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;
     };

package/dist/{index-a47b404f.cjs.prod.js → index-7373fbbd.cjs.prod.js}

@@ -1093,9 +1093,16 @@ function createEvents(store) {
           } = 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.
-            internal.capturedMap.delete(event.pointerId);
-            cancelPointer([]);
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
           }
         };
     }
@@ -1140,6 +1147,22 @@ function createEvents(store) {
 
         // Check presence of handlers
         if (!(instance != null && instance.eventCount)) return;
+
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+
         if (isPointerMove) {
           // Move event ...
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
@@ -1251,12 +1274,12 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
+      scene: null,
       invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
       flat: false,
-      scene: prepare(new THREE__namespace.Scene()),
       controls: null,
       clock: new THREE__namespace.Clock(),
       pointer,
@@ -1749,6 +1772,7 @@ function createRoot(canvas) {
       let {
         gl: glConfig,
         size: propsSize,
+        scene: sceneOptions,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1808,6 +1832,20 @@ function createRoot(canvas) {
         });
       }
 
+      // Set up scene (one time only!)
+      if (!state.scene) {
+        let scene;
+        if (sceneOptions instanceof THREE__namespace.Scene) {
+          scene = sceneOptions;
+        } else {
+          scene = new THREE__namespace.Scene();
+          if (sceneOptions) applyProps(scene, sceneOptions);
+        }
+        state.set({
+          scene: prepare(scene)
+        });
+      }
+
       // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR

package/dist/{index-4073a042.cjs.dev.js → index-8e3d9f5f.cjs.dev.js}

@@ -1093,9 +1093,16 @@ function createEvents(store) {
           } = 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.
-            internal.capturedMap.delete(event.pointerId);
-            cancelPointer([]);
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
           }
         };
     }
@@ -1140,6 +1147,22 @@ function createEvents(store) {
 
         // Check presence of handlers
         if (!(instance != null && instance.eventCount)) return;
+
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+
         if (isPointerMove) {
           // Move event ...
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
@@ -1251,12 +1274,12 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
+      scene: null,
       invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
       flat: false,
-      scene: prepare(new THREE__namespace.Scene()),
       controls: null,
       clock: new THREE__namespace.Clock(),
       pointer,
@@ -1749,6 +1772,7 @@ function createRoot(canvas) {
       let {
         gl: glConfig,
         size: propsSize,
+        scene: sceneOptions,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1808,6 +1832,20 @@ function createRoot(canvas) {
         });
       }
 
+      // Set up scene (one time only!)
+      if (!state.scene) {
+        let scene;
+        if (sceneOptions instanceof THREE__namespace.Scene) {
+          scene = sceneOptions;
+        } else {
+          scene = new THREE__namespace.Scene();
+          if (sceneOptions) applyProps(scene, sceneOptions);
+        }
+        state.set({
+          scene: prepare(scene)
+        });
+      }
+
       // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR

package/dist/{index-6b130504.esm.js → index-bb759d07.esm.js}

@@ -1066,9 +1066,16 @@ function createEvents(store) {
           } = 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.
-            internal.capturedMap.delete(event.pointerId);
-            cancelPointer([]);
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
           }
         };
     }
@@ -1113,6 +1120,22 @@ function createEvents(store) {
 
         // Check presence of handlers
         if (!(instance != null && instance.eventCount)) return;
+
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+
         if (isPointerMove) {
           // Move event ...
           if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
@@ -1224,12 +1247,12 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
+      scene: null,
       invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
       flat: false,
-      scene: prepare(new THREE.Scene()),
       controls: null,
       clock: new THREE.Clock(),
       pointer,
@@ -1722,6 +1745,7 @@ function createRoot(canvas) {
       let {
         gl: glConfig,
         size: propsSize,
+        scene: sceneOptions,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1781,6 +1805,20 @@ function createRoot(canvas) {
         });
       }
 
+      // Set up scene (one time only!)
+      if (!state.scene) {
+        let scene;
+        if (sceneOptions instanceof THREE.Scene) {
+          scene = sceneOptions;
+        } else {
+          scene = new THREE.Scene();
+          if (sceneOptions) applyProps(scene, sceneOptions);
+        }
+        state.set({
+          scene: prepare(scene)
+        });
+      }
+
       // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4073a042.cjs.dev.js');
+var index = require('./index-8e3d9f5f.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-a47b404f.cjs.prod.js');
+var index = require('./index-7373fbbd.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-6b130504.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-6b130504.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-bb759d07.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-bb759d07.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-4073a042.cjs.dev.js');
+var index = require('../../dist/index-8e3d9f5f.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-a47b404f.cjs.prod.js');
+var index = require('../../dist/index-7373fbbd.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-6b130504.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-6b130504.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-bb759d07.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-bb759d07.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

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