chore: update to r173, remove renderer.xr fix

README.md

@@ -1,6 +1,6 @@
 # Three.js WebGPU Ecosystem Integration Test Suite
 
-This is a collection of tests that incrementally add complexity to the setup. Testing is done with Three.js **r171** (2024-11-29). All tests use **WebGPURenderer**, a call a **TSL** function, and a test of the graphics backend type used. With vanilla [Three.js](https://threejs.org/), [React Three Fiber](https://r3f.docs.pmnd.rs/), and [Threlte](https://threlte.xyz/).
+This is a collection of tests that incrementally add complexity to the setup. Testing is done with Three.js **r173** (2025-01-31). All tests use **WebGPURenderer**, a call a **TSL** function, and a test of the graphics backend type used. With vanilla [Three.js](https://threejs.org/), [React Three Fiber](https://r3f.docs.pmnd.rs/), and [Threlte](https://threlte.xyz/).
 
 ## How to test
 
@@ -42,8 +42,6 @@ A ✅ means the scene renders, and the project works in dev mode, and in product
 
 - ⚠️ Using React Three Fiber with React 19 requires installing with `npm i --legacy-peer-deps`.
 
-- ⚠️ Using R3F v9 requires a [fix when initializing the canvas](#react-three-fiber-v9-xr-issue).
-
 ### Removed test cases
 
 The following test cases are less relevant now:
@@ -121,24 +119,6 @@ const [frameloop, setFrameloop] = useState('never')
 />
 ```
 
-### React Three Fiber v9 XR issue
-
-If you use R3F v9, you will get this error on your Canvas:
-
-> ❌ `TypeError: gl.xr.addEventListener is not a function`
-
-It can be fixed with:
-
-```jsx
-<Canvas
-  gl={canvas => {
-    const renderer = new WebGPURenderer({ canvas })
-    renderer.xr = { addEventListener: () => {} }
-    return renderer
-  }}
->
-```
-
 ## SSR issues with Next.js and Node.js
 
 Next.js uses Node.js to Server-Side Render pages on the server. When importing modules on the server, if those modules reference global browser objects like `window`, `document`, `self`, or `navigator` at the top level, you will get a compilation error. _Except_ for `navigator`, which got [added to Node.js 21](https://nodejs.org/en/blog/announcements/v21-release-announce#navigator-object-integration).
@@ -209,6 +189,8 @@ You can use React Server Components with R3F. This actually works without `'use
 
 [Issue on Next.js repo](https://github.com/vercel/next.js/issues/71974).
 
+**Fixed in `15.1.1-canary.24`.**
+
 ## Testing the backend type
 
 WebGPURenderer initially reports WebGPUBackend before falling back to WebGLBackend ([issue](https://github.com/mrdoob/three.js/issues/30024)). There are workarounds for it.

next14-app-r3f8-react18/package.json

@@ -11,6 +11,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "next": "14.2.20",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

next14-pages-r3f8-react18/package.json

@@ -11,6 +11,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "next": "14.2.20",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

next15-app-r3f9-react19-rsc/app/ClientCanvas.js

@@ -16,15 +16,14 @@ export function ClientCanvas({ children }) {
     <Canvas
       style={{ height: '100vh' }}
       frameloop={frameloop}
-      gl={canvas => {
+      gl={(canvas) => {
         const renderer = new WebGPURenderer({
           canvas,
           powerPreference: 'high-performance',
           antialias: true,
           alpha: true,
         })
         renderer.init().then(() => setFrameloop('always'))
-        renderer.xr = { addEventListener: () => {} }
         return renderer
       }}
     >

next15-app-r3f9-react19-rsc/package.json

@@ -11,6 +11,6 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "next": "15.0.4",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

next15-app-r3f9-react19/app/page.js

@@ -42,21 +42,26 @@ export default function IndexPage() {
     <Canvas
       style={{ height: '100vh' }}
       frameloop={frameloop}
-      gl={canvas => {
+      gl={(canvas) => {
         const renderer = new WebGPURenderer({
           canvas,
           powerPreference: 'high-performance',
           antialias: true,
           alpha: true,
         })
         renderer.init().then(() => setFrameloop('always'))
-        renderer.xr = { addEventListener: () => {} }
         return renderer
       }}
     >
       <OrbitControls />
       <ambientLight intensity={Math.PI / 2} />
-      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+      <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]} />
       <Box position={[1.2, 0, 0]} />

next15-app-r3f9-react19/package.json

@@ -13,6 +13,6 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "next": "15.0.4",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

next15-pages-r3f9-react19/package.json

@@ -11,6 +11,6 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "next": "15.0.4",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

next15-pages-r3f9-react19/pages/index.js

@@ -40,21 +40,26 @@ export default function IndexPage() {
     <Canvas
       style={{ height: '100vh' }}
       frameloop={frameloop}
-      gl={canvas => {
+      gl={(canvas) => {
         const renderer = new WebGPURenderer({
           canvas,
           powerPreference: 'high-performance',
           antialias: true,
           alpha: true,
         })
         renderer.init().then(() => setFrameloop('always'))
-        renderer.xr = { addEventListener: () => {} }
         return renderer
       }}
     >
       <OrbitControls />
       <ambientLight intensity={Math.PI / 2} />
-      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+      <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]} />
       <Box position={[1.2, 0, 0]} />

next15-pages-vanilla-react19/package.json

@@ -9,6 +9,6 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "next": "15.0.4",
-    "three": "0.171.0"
+    "three": "0.173.0"
   }
 }

sveltekit-threlte8/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@threlte/core": "8.0.0-next.31",
     "@threlte/extras": "9.0.0-next.42",
-    "three": "0.171.0"
+    "three": "0.173.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "3.0.0",

vite-ts-swc-r3f8-react18/package.json

@@ -11,7 +11,7 @@
     "@react-three/fiber": "8.17.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "three": "0.171.0"
+    "three": "0.173.0"
   },
   "devDependencies": {
     "@eslint/js": "9.13.0",

vite-ts-swc-r3f9-react19/package.json

@@ -11,7 +11,7 @@
     "@react-three/fiber": "9.0.0-rc.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "three": "0.171.0"
+    "three": "0.173.0"
   },
   "devDependencies": {
     "@eslint/js": "9.13.0",

vite-ts-swc-r3f9-react19/src/App.tsx

@@ -42,7 +42,7 @@ export default function App() {
     <Canvas
       style={{ height: '100vh' }}
       frameloop={frameloop}
-      gl={canvas => {
+      gl={(canvas) => {
         const renderer = new WebGPURenderer({
           // @ts-expect-error
           canvas,
@@ -51,14 +51,18 @@ export default function App() {
           alpha: true,
         })
         renderer.init().then(() => setFrameloop('always'))
-        // @ts-expect-error
-        renderer.xr = { addEventListener: () => {} }
         return renderer
       }}
     >
       <OrbitControls />
       <ambientLight intensity={Math.PI / 2} />
-      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+      <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]} />
       <Box position={[1.2, 0, 0]} />