Merge branch 'master' into actions/setup-node-v4

.github/workflows/test.yml

@@ -13,10 +13,10 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v4
+      - name: Use Node 18
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 18
 
       - name: Install deps and build (with cache)
         uses: bahmutov/npm-install@v1

docs/getting-started/examples.mdx

@@ -8,10 +8,13 @@ nav: 3
 
 <Grid cols={1}>
   <li>
-    <Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
+    <Codesandbox id="9s2wd9" tags={['border-radius']} />
   </li>
 </Grid>
 <Grid cols={2}>
+  <li>
+    <Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
+  </li>
   <li>
     <Codesandbox id="xy8c8z" tags={['lusion', 'n8ao']} />
   </li>
@@ -30,6 +33,9 @@ nav: 3
   <li>
     <Codesandbox id="szj6p7" tags={['caustics', 'effects', 'soft-shadows']} />
   </li>
+  <li>
+    <Codesandbox id="5w35n6" tags={['ssgi', 'rapier']} />
+  </li>
 </Grid>
 <Grid cols={4}>
   <li>
@@ -56,6 +62,12 @@ nav: 3
   <li>
     <Codesandbox id="dq6wwe" tags={['glass', 'transmission', 'bloom']} />
   </li>
+  <li>
+    <Codesandbox id="dc5fjy" tags={['cards', 'image']} />
+  </li>
+  <li>
+    <Codesandbox id="3ywzzx" tags={['refraction']} />
+  </li>
   <li>
     <Codesandbox id="lx2h8" tags={['reflections', 'annotations']} />
   </li>
@@ -338,7 +350,7 @@ nav: 3
     <Codesandbox id="2yqpv" />
   </li>
   <li>
-    <Codesandbox id="0mgum" />
+    <Codesandbox id="ptdgrn" />
   </li>
   <li>
     <Codesandbox id="66cd7" />

example/package.json

@@ -7,27 +7,27 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@react-spring/core": "^9.6.1",
-    "@react-spring/three": "^9.6.1",
-    "@react-three/drei": "^9.74.7",
+    "@react-spring/core": "^9.7.3",
+    "@react-spring/three": "^9.7.3",
+    "@react-three/drei": "^9.93.0",
     "@use-gesture/react": "latest",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-merge-refs": "^2.0.1",
+    "react-merge-refs": "^2.1.1",
     "react-use-refs": "^1.0.1",
-    "styled-components": "^5.3.6",
-    "three": "^0.149.0",
-    "three-stdlib": "^2.21.8",
+    "styled-components": "^6.1.8",
+    "three": "^0.160.0",
+    "three-stdlib": "^2.29.1",
     "use-error-boundary": "^2.0.6",
-    "wouter": "^2.10.0",
-    "zustand": "^4.3.3"
+    "wouter": "^2.12.1",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/styled-components": "^5.1.26",
+    "@types/react": "^18.2.47",
+    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   }
 }

example/src/App.tsx

@@ -20,7 +20,7 @@ function Demo() {
   const { Component } = visibleComponents[compName]
 
   return (
-    <ErrorBoundary key={compName} fallback={(e: any) => <Error>{e}</Error>}>
+    <ErrorBoundary key={compName} fallback={(e: any) => <Error>{e.message}</Error>}>
       <Component />
     </ErrorBoundary>
   )

example/src/demos/AutoDispose.tsx

@@ -51,7 +51,7 @@ function Switcher() {
 export default function App() {
   return (
     <Canvas orthographic camera={{ zoom: 100 }}>
-      <ambientLight />
+      <ambientLight intensity={Math.PI} />
       <Switcher />
     </Canvas>
   )

example/src/demos/ContextMenuOverride.tsx

@@ -9,8 +9,8 @@ export default function App() {
       orthographic
       camera={{ zoom: 150, fov: 75, position: [0, 0, 25] }}
       onPointerMissed={() => console.log('canvas.missed')}>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[10, 10, 10]} />
       <mesh
         scale={[2, 2, 2]}
         position={[1, 0, 0]}
@@ -19,7 +19,7 @@ export default function App() {
           set((value) => !value)
         }}
         onPointerMissed={() => console.log('mesh.missed')}>
-        <boxBufferGeometry args={[1, 1, 1]} />
+        <boxGeometry args={[1, 1, 1]} />
         <meshPhysicalMaterial color={state ? 'hotpink' : 'blue'} />
       </mesh>
     </Canvas>

example/src/demos/Gestures.tsx

@@ -46,9 +46,9 @@ function Obj({ scale = 1, z = 0, opacity = 1 }) {
 export default function App() {
   return (
     <Canvas>
-      <ambientLight intensity={0.5} />
-      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
-      <pointLight position={[-10, -10, -10]} />
+      <ambientLight intensity={0.5 * Math.PI} />
+      <spotLight decay={0} position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight decay={0} position={[-10, -10, -10]} />
       <Obj z={-1} scale={0.5} />
       <Obj opacity={0.8} />
     </Canvas>

example/src/demos/Gltf.tsx

@@ -15,7 +15,7 @@ function Test() {
 export default function App() {
   return (
     <Canvas>
-      <ambientLight />
+      <ambientLight intensity={Math.PI} />
       <Suspense fallback={null}>
         <Test />
       </Suspense>

example/src/demos/MultiView.tsx

@@ -149,9 +149,9 @@ const App = () => (
 function Scene({ children, controls = true, preset }: any) {
   return (
     <Bounds fit clip observe>
-      <ambientLight intensity={1} />
-      <pointLight position={[20, 30, 10]} />
-      <pointLight position={[-10, -10, -10]} color="blue" />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[20, 30, 10]} />
+      <pointLight decay={0} position={[-10, -10, -10]} color="blue" />
       <Soda scale={3} position={[-1, -0.75, 1]} />
       <Soda scale={3} position={[1, -0.75, 1]} />
       <Soda scale={3} position={[0, -0.75, 0]} />

example/src/demos/Portals.tsx

@@ -8,9 +8,9 @@ export function Lights() {
   return (
     <>
       <color attach="background" args={['#f0f0f0']} />
-      <ambientLight intensity={1} />
-      <pointLight position={[20, 30, 10]} />
-      <pointLight position={[-10, -10, -10]} color="blue" />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[20, 30, 10]} />
+      <pointLight decay={0} position={[-10, -10, -10]} color="blue" />
     </>
   )
 }

example/src/demos/ResetProps.tsx

@@ -50,9 +50,9 @@ function Scene() {
 
   return (
     <>
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={2} />
-      <pointLight position={[-10, -10, -10]} color="red" intensity={4} />
+      <ambientLight intensity={0.5 * Math.PI} />
+      <pointLight decay={0} position={[10, 10, 10]} intensity={2} />
+      <pointLight decay={0} position={[-10, -10, -10]} color="red" intensity={4} />
 
       <mesh
         scale={hovered ? 1.25 : 1}

example/src/demos/StopPropagation.tsx

@@ -57,8 +57,8 @@ function Plane({ stop = false, color, position }: any) {
 const App = () => (
   <Canvas camera={{ fov: 75, position: [0, 0, -2.25] }}>
     <Suspense fallback={null}>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[10, 10, 10]} />
       <Plane color="lightblue" position={[0.5, 0, -1]} />
       <Plane stop color="aquamarine" position={[0, 0, -0.5]} />
       <Plane color="hotpink" position={[-0.5, 0, 0]} />

example/src/demos/SuspenseAndErrors.tsx

@@ -24,8 +24,8 @@ export default function App() {
   }, [])
   return (
     <Canvas orthographic camera={{ position: [10, 10, 10], zoom: 100 }}>
-      <ambientLight />
-      <pointLight position={[10, 10, 5]} intensity={2} />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[10, 10, 5]} intensity={2} />
       <mesh>
         <boxGeometry />
         <meshStandardMaterial color="orange" />

example/src/demos/SuspenseMaterial.tsx

@@ -7,7 +7,7 @@ export default function App() {
   const [arg, inc] = useReducer((x) => x + 1, 0)
   return (
     <Canvas>
-      <ambientLight />
+      <ambientLight intensity={Math.PI} />
       <directionalLight />
       <mesh onClick={inc}>
         <sphereGeometry args={[1, 64, 32]} />

example/src/demos/Test.tsx

@@ -1,35 +1,46 @@
 import * as THREE from 'three'
-import React, { useState, useEffect, useReducer } from 'react'
+import * as React from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
+import { OrbitControls, Hud } from '@react-three/drei'
 
-function Test() {
-  const [o1] = useState(
-    () => new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'hotpink' })),
-  )
-  const [o2] = useState(
-    () => new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'aquamarine' })),
+function Box({ color = 'orange', ...props }) {
+  const ref = React.useRef<THREE.Mesh>(null!)
+  const [hovered, hover] = React.useState(false)
+  const [clicked, click] = React.useState(false)
+  useFrame((state, delta) => (ref.current.rotation.x += delta))
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={() => click(!clicked)}
+      onPointerOver={(event) => (event.stopPropagation(), hover(true))}
+      onPointerOut={() => hover(false)}>
+      <boxGeometry />
+      <meshStandardMaterial color={hovered ? 'hotpink' : color} />
+    </mesh>
   )
-  const [which, toggle] = useReducer((state) => !state, true)
-  useEffect(() => {
-    const interval = setInterval(toggle, 1000)
-    return () => clearInterval(interval)
-  }, [])
-
-  useFrame((state) => {
-    //console.log(state.pointer.x)
-  })
-
-  return <primitive object={which ? o1 : o2} />
 }
 
 export default function App() {
-  const [foo, bar] = useState(0)
-  useEffect(() => {
-    setTimeout(() => bar(1), 1000)
+  const [visible, set] = React.useState(true)
+  React.useEffect(() => {
+    setTimeout(() => set(false), 2000)
+    setTimeout(() => set(true), 4000)
   }, [])
   return (
     <Canvas>
-      <Test />
+      <ambientLight intensity={Math.PI / 2} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+      <Box position={[-1.2, 0, 0]} />
+      <Hud>
+        <ambientLight intensity={Math.PI / 2} />
+        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+        <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+        {visible && <Box color="skyblue" position={[1.2, 0, 0]} />}
+      </Hud>
+      <OrbitControls />
     </Canvas>
   )
 }

example/src/demos/ViewTracking.tsx

@@ -238,9 +238,9 @@ export default function App() {
 function Scene() {
   return (
     <>
-      <ambientLight intensity={1} />
-      <pointLight position={[20, 30, 10]} intensity={1} />
-      <pointLight position={[-10, -10, -10]} color="blue" />
+      <ambientLight intensity={Math.PI} />
+      <pointLight decay={0} position={[20, 30, 10]} intensity={1} />
+      <pointLight decay={0} position={[-10, -10, -10]} color="blue" />
       <Environment preset="dawn" />
     </>
   )

example/src/demos/Viewcube.tsx

@@ -49,8 +49,8 @@ function Viewcube() {
             ))}
             <boxGeometry args={[80, 80, 80]} />
           </mesh>
-          <ambientLight intensity={0.5} />
-          <pointLight position={[10, 10, 10]} intensity={0.5} />
+          <ambientLight intensity={0.5 * Math.PI} />
+          <pointLight decay={0} position={[10, 10, 10]} intensity={0.5} />
         </group>,
         scene,
         { camera, events: { priority: events.priority + 1 } },

packages/fiber/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.15.14
+
+### Patch Changes
+
+- 0afc9c12: fix: portal events, update examples
+
 ## 8.15.13
 
 ### Patch Changes

packages/fiber/package.json

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

packages/fiber/src/core/renderer.ts

@@ -6,6 +6,7 @@ import { DefaultEventPriority } from 'react-reconciler/constants'
 import {
   is,
   prepare,
+  findInitialRoot,
   diffProps,
   DiffSet,
   applyProps,
@@ -196,9 +197,10 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
         detach(parentInstance, child, child.__r3f.attach)
       } else if (child.isObject3D && parentInstance.isObject3D) {
         parentInstance.remove(child)
-        // Remove interactivity
+        // @ts-ignore
+        // Remove interactivity on the initial root
         if (child.__r3f?.root) {
-          removeInteractivity(child.__r3f.root, child as unknown as THREE.Object3D)
+          removeInteractivity(findInitialRoot(child), child as unknown as THREE.Object3D)
         }
       }
 
@@ -278,9 +280,9 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     }
     appendChild(parent, newInstance)
 
-    // Re-bind event handlers
+    // Re-bind event handlers on the initial root
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState()
+      const rootState = findInitialRoot(newInstance).getState()
       rootState.internal.interaction.push(newInstance as unknown as THREE.Object3D)
     }
 
@@ -391,10 +393,12 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     },
     commitMount(instance, _type, _props, _int) {
       // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
+      // This will make sure events are only added once to the central container on the initial root
       const localState = (instance.__r3f ?? {}) as LocalState
       if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance as unknown as THREE.Object3D)
+        findInitialRoot(instance)
+          .getState()
+          .internal.interaction.push(instance as unknown as THREE.Object3D)
       }
     },
     getPublicInstance: (instance) => instance!,