Fix space game demo

demos/space-game/package.json

@@ -11,10 +11,12 @@
   ],
   "dependencies": {
     "@react-three/fiber": "^8.17.5",
+    "@react-three/drei": "^9.109.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
     "three": "^0.165.0",
+    "three-stdlib": "^2.32.2",
     "zustand": "^3.7.2"
   },
   "devDependencies": {

demos/space-game/src/3d/Effects.jsx

@@ -1,22 +1,13 @@
-import React, { useRef, useEffect } from 'react'
-import { extend, useThree, useFrame } from '@react-three/fiber'
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
-import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
-import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass'
+import { extend } from '@react-three/fiber'
+import { Effects as EffectComposer } from '@react-three/drei'
+import { UnrealBloomPass } from 'three-stdlib'
 
-extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass })
+extend({ UnrealBloomPass })
 
 export default function Effects() {
-  const composer = useRef()
-  const { scene, gl, size, camera } = useThree()
-  useEffect(() => void composer.current.setSize(size.width, size.height), [size])
-  useFrame(() => composer.current.render(), 2)
   return (
-    <effectComposer ref={composer} args={[gl]}>
-      <renderPass attachArray="passes" scene={scene} camera={camera} />
-      <unrealBloomPass attachArray="passes" args={[undefined, 1.8, 1, 0]} />
-    </effectComposer>
+    <EffectComposer disableGammaPass>
+      <unrealBloomPass strength={1.8} radius={1} threshold={0} />
+    </EffectComposer>
   )
 }

demos/space-game/src/3d/Enemies.jsx

@@ -30,7 +30,7 @@ const Drone = React.memo(({ data }) => {
   return (
     <group ref={ref} scale={[5, 5, 5]}>
       <mesh position={[0, 0, 50]} rotation={[Math.PI / 2, 0, 0]} material={glowMaterial}>
-        <cylinderBufferGeometry args={[0.25, 0.25, 100, 4]} />
+        <cylinderGeometry args={[0.25, 0.25, 100, 4]} />
       </mesh>
       <mesh name="Sphere_DroneGlowmat_0" geometry={nodes.Sphere_DroneGlowmat_0.geometry} material={materials.DroneGlowmat} />
       <mesh name="Sphere_Body_0" geometry={nodes.Sphere_Body_0.geometry} material={bodyMaterial} />

demos/space-game/src/3d/Explosions.jsx

@@ -47,7 +47,7 @@ function Explosion({ position, scale }) {
       {particles.map(({ color, data }, index) => (
         <instancedMesh key={index} args={[null, null, data.length]} frustumCulled={false}>
           <dodecahedronGeometry args={[10, 0]} />
-          <meshBasicMaterial color={color} transparent opacity={1} fog={false} />
+          <meshBasicMaterial color={color} transparent opacity={1} fog={true} />
         </instancedMesh>
       ))}
     </group>

demos/space-game/src/3d/Planets.jsx

@@ -17,11 +17,11 @@ export default function Planets() {
         <sphereGeometry args={[0.75, 32, 32]} />
         <meshStandardMaterial roughness={1} map={moon} fog={false} />
       </mesh>
-      <pointLight position={[-5, -5, -5]} distance={1000} intensity={6} />
+      <pointLight position={[-5, -5, -5]} distance={1000} intensity={6 * Math.PI} decay={0}/>
       <mesh position={[-30, -10, -60]}>
         <sphereGeometry args={[4, 32, 32]} />
         <meshBasicMaterial color="#FFFF99" fog={false} />
-        <pointLight distance={6100} intensity={50} color="white" />
+        <pointLight distance={6100} intensity={50 * Math.PI} decay={0} color="white" />
       </mesh>
     </group>
   )

demos/space-game/src/3d/Rig.jsx

@@ -36,7 +36,7 @@ export default function Rig({ children }) {
 
   return (
     <group ref={group}>
-      <pointLight distance={400} position={[0, 100, -420]} intensity={5} color="indianred" />
+      <pointLight distance={400} position={[0, 100, -420]} intensity={5} decay={0} color="indianred" />
       <group ref={rig} position={[0, 0, -50]}>
         {children}
       </group>

demos/space-game/src/3d/Rings.jsx

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import React from 'react'
 import useStore from '../store'
 
-const geometry = new THREE.RingBufferGeometry(1, 1.01, 64)
+const geometry = new THREE.RingGeometry(1, 1.01, 64)
 const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightgreen'), side: THREE.DoubleSide })
 
 export default function Rings() {

demos/space-game/src/3d/Ship.jsx

@@ -6,7 +6,7 @@ import useStore from '../store'
 
 import shipModel from './ship.gltf?url'
 
-const geometry = new THREE.BoxBufferGeometry(1, 1, 40)
+const geometry = new THREE.BoxGeometry(1, 1, 40)
 const lightgreen = new THREE.Color('lightgreen')
 const hotpink = new THREE.Color('hotpink')
 const laserMaterial = new THREE.MeshBasicMaterial({ color: lightgreen })
@@ -78,7 +78,7 @@ export default function Ship() {
             <boxGeometry args={[2, 40, 2]} />
           </mesh>
         </group>
-        <pointLight ref={laserLight} position={[0, 0, -20]} distance={100} intensity={0} color="lightgreen" />
+        <pointLight ref={laserLight} position={[0, 0, -20]} distance={100} intensity={0} decay={0} color="lightgreen" />
         <group ref={laserGroup}>
           {lasers.map((t, i) => (
             <group key={i}>
@@ -109,7 +109,7 @@ export default function Ship() {
         </group>
       </group>
       <mesh ref={exhaust} scale={[1, 1, 30]} position={[0, 1, 30]}>
-        <dodecahedronBufferGeometry args={[1.5, 0]} />
+        <dodecahedronGeometry args={[1.5, 0]} />
         <meshBasicMaterial color="lightblue" />
       </mesh>
     </group>

demos/space-game/src/App.jsx

@@ -28,7 +28,7 @@ export default function App() {
         camera={{ position: [0, 0, 2000], near: 0.01, far: 10000, fov }}
         onCreated={({ gl, camera }) => {
           actions.init(camera)
-          gl.toneMapping = THREE.Uncharted2ToneMapping
+          gl.toneMapping = THREE.NoToneMapping
           gl.setClearColor(new THREE.Color('#020209'))
         }}>
         <fog attach="fog" args={['#070710', 100, 700]} />

demos/space-game/src/index.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './styles.css'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)

demos/space-game/src/store.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { Curves } from 'three/examples/jsm/curves/CurveExtras'
+import * as Curves from 'three/examples/jsm/curves/CurveExtras'
 import { addEffect } from '@react-three/fiber'
 import create from 'zustand'
 import * as audio from './audio'
@@ -8,7 +8,7 @@ let guid = 1
 
 const useStore = create((set, get) => {
   let spline = new Curves.GrannyKnot()
-  let track = new THREE.TubeBufferGeometry(spline, 250, 0.2, 10, true)
+  let track = new THREE.TubeGeometry(spline, 250, 0.2, 10, true)
   let cancelLaserTO = undefined
   let cancelExplosionTO = undefined
   const box = new THREE.Box3()