WIP : 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,12 @@
-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'
-
-extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass })
+import { extend } from '@react-three/fiber'
+import { Effects as EffectComposer } from '@react-three/drei'
+import { UnrealBloomPass } from 'three-stdlib'
+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 threshold={0} radius={1} strength={1.8}/>
+    </EffectComposer>
   )
 }

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

@@ -13,7 +13,7 @@ export default function Enemies() {
 
 const box = new THREE.Box3()
 box.setFromCenterAndSize(new THREE.Vector3(0, 0, 1), new THREE.Vector3(3, 3, 3))
-const glowMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightblue') })
+const glowMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightblue'), toneMapped: false })
 const bodyMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color('black') })
 
 const Drone = React.memo(({ data }) => {
@@ -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/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} decay={0} intensity={6 * Math.PI} />
       <mesh position={[-30, -10, -60]}>
         <sphereGeometry args={[4, 32, 32]} />
-        <meshBasicMaterial color="#FFFF99" fog={false} />
-        <pointLight distance={6100} intensity={50} color="white" />
+        <meshBasicMaterial color="#FFFF99" toneMapped={false} fog={false} />
+        <pointLight distance={6100} intensity={50 * Math.PI} color="white" decay={0} />
       </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 * Math.PI} 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,11 +6,11 @@ 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 })
-const crossMaterial = new THREE.MeshBasicMaterial({ color: hotpink, fog: false })
+const crossMaterial = new THREE.MeshBasicMaterial({ color: hotpink, fog: false, toneMapped: false })
 const position = new THREE.Vector3()
 const direction = new THREE.Vector3()
 
@@ -39,7 +39,7 @@ export default function Ship() {
       const group = laserGroup.current.children[i]
       group.position.z -= 20
     }
-    laserLight.current.intensity += ((lasers.length && Date.now() - lasers[lasers.length - 1] < 100 ? 20 : 0) - laserLight.current.intensity) * 0.3
+    laserLight.current.intensity += ((lasers.length && Date.now() - lasers[lasers.length - 1] < 100 ? 20 : 0) - laserLight.current.intensity) * 0.3 * Math.PI
 
     // Get ships orientation and save it to the stores ray
     main.current.getWorldPosition(position)
@@ -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/3d/Stars.jsx

@@ -19,7 +19,7 @@ export default function Stars({ count = 2000 }) {
   return (
     <points>
       <bufferGeometry>
-        <bufferAttribute attachObject={['attributes', 'position']} count={positions.length / 3} array={positions} itemSize={3} />
+        <bufferAttribute attach="attributes-position" count={positions.length / 3} array={positions} itemSize={3} />
       </bufferGeometry>
       <pointsMaterial size={15} sizeAttenuation color="white" fog={false} />
     </points>

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

@@ -5,7 +5,7 @@ export default function Track() {
   const { scale, track } = useStore((state) => state.mutation)
   return (
     <mesh scale={[scale, scale, scale]} geometry={track}>
-      <meshBasicMaterial color="indianred" />
+      <meshBasicMaterial color="indianred" toneMapped={false} />
     </mesh>
   )
 }

demos/space-game/src/App.jsx

@@ -3,7 +3,7 @@ import React, { Suspense } from 'react'
 import { Canvas } from '@react-three/fiber'
 import Stars from './3d/Stars'
 import Planets from './3d/Planets'
-import Effects from './3d/Effects'
+import { NewEffects } from './3d/Effects'
 import Particles from './3d/Particles'
 import Enemies from './3d/Enemies'
 import Rocks from './3d/Rocks'
@@ -22,17 +22,16 @@ export default function App() {
     <div onPointerMove={actions.updateMouse} onClick={actions.shoot}>
       <Canvas
         linear
-        mode="concurrent"
         dpr={[1, 1.5]}
         gl={{ antialias: false }}
         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]} />
-        <ambientLight intensity={0.25} />
+        <ambientLight intensity={Math.PI} />
         <Stars />
         <Explosions />
         <Track />
@@ -46,7 +45,7 @@ export default function App() {
             <Ship />
           </Rig>
         </Suspense>
-        <Effects />
+        <NewEffects />
       </Canvas>
       <Hud />
     </div>

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()