From 1b05b65aaffb2fc022639391eb26a8a0474bdb5a Mon Sep 17 00:00:00 2001 From: "H. E." <6037756+rndexe@users.noreply.github.com> Date: Thu, 15 Aug 2024 03:34:41 +0530 Subject: [PATCH] Fix space game demo (#78) --- demos/space-game/package.json | 2 ++ demos/space-game/src/3d/Effects.jsx | 23 +++++++---------------- demos/space-game/src/3d/Enemies.jsx | 2 +- demos/space-game/src/3d/Explosions.jsx | 2 +- demos/space-game/src/3d/Planets.jsx | 4 ++-- demos/space-game/src/3d/Rig.jsx | 2 +- demos/space-game/src/3d/Rings.jsx | 2 +- demos/space-game/src/3d/Ship.jsx | 6 +++--- demos/space-game/src/App.jsx | 2 +- demos/space-game/src/index.jsx | 5 ++--- demos/space-game/src/store.js | 4 ++-- package-lock.json | 17 ++++------------- 12 files changed, 27 insertions(+), 44 deletions(-) diff --git a/demos/space-game/package.json b/demos/space-game/package.json index 53accbaf..f4a9092a 100644 --- a/demos/space-game/package.json +++ b/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": { diff --git a/demos/space-game/src/3d/Effects.jsx b/demos/space-game/src/3d/Effects.jsx index 6b75fff2..2dbc7e7f 100755 --- a/demos/space-game/src/3d/Effects.jsx +++ b/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 ( - - - - + + + ) } diff --git a/demos/space-game/src/3d/Enemies.jsx b/demos/space-game/src/3d/Enemies.jsx index dd17989a..180f5658 100755 --- a/demos/space-game/src/3d/Enemies.jsx +++ b/demos/space-game/src/3d/Enemies.jsx @@ -30,7 +30,7 @@ const Drone = React.memo(({ data }) => { return ( - + diff --git a/demos/space-game/src/3d/Explosions.jsx b/demos/space-game/src/3d/Explosions.jsx index fee35300..2e6acdc0 100755 --- a/demos/space-game/src/3d/Explosions.jsx +++ b/demos/space-game/src/3d/Explosions.jsx @@ -47,7 +47,7 @@ function Explosion({ position, scale }) { {particles.map(({ color, data }, index) => ( - + ))} diff --git a/demos/space-game/src/3d/Planets.jsx b/demos/space-game/src/3d/Planets.jsx index 0edf5128..c3f46b09 100755 --- a/demos/space-game/src/3d/Planets.jsx +++ b/demos/space-game/src/3d/Planets.jsx @@ -17,11 +17,11 @@ export default function Planets() { - + - + ) diff --git a/demos/space-game/src/3d/Rig.jsx b/demos/space-game/src/3d/Rig.jsx index 916101b0..3bbcdcc0 100755 --- a/demos/space-game/src/3d/Rig.jsx +++ b/demos/space-game/src/3d/Rig.jsx @@ -36,7 +36,7 @@ export default function Rig({ children }) { return ( - + {children} diff --git a/demos/space-game/src/3d/Rings.jsx b/demos/space-game/src/3d/Rings.jsx index d9659a4e..d26103e6 100755 --- a/demos/space-game/src/3d/Rings.jsx +++ b/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() { diff --git a/demos/space-game/src/3d/Ship.jsx b/demos/space-game/src/3d/Ship.jsx index d77ea96b..1be8bf64 100755 --- a/demos/space-game/src/3d/Ship.jsx +++ b/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() { - + {lasers.map((t, i) => ( @@ -109,7 +109,7 @@ export default function Ship() { - + diff --git a/demos/space-game/src/App.jsx b/demos/space-game/src/App.jsx index b5687d51..ad49a5b2 100755 --- a/demos/space-game/src/App.jsx +++ b/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')) }}> diff --git a/demos/space-game/src/index.jsx b/demos/space-game/src/index.jsx index 4cce877a..bbad0802 100755 --- a/demos/space-game/src/index.jsx +++ b/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(, document.getElementById('root')) +createRoot(document.getElementById('root')).render() diff --git a/demos/space-game/src/store.js b/demos/space-game/src/store.js index 953d531e..8741ccc0 100755 --- a/demos/space-game/src/store.js +++ b/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() diff --git a/package-lock.json b/package-lock.json index 11b89550..bbc70cd5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1521,8 +1521,7 @@ "leva": "^0.9.35", "react": "^18.3.1", "react-dom": "^18.3.1", - "three": "^0.165.0", - "v8": "0.1.0" + "three": "^0.165.0" }, "devDependencies": { "@types/react": "^18.3.3", @@ -3193,11 +3192,13 @@ "name": "@demo/space-game", "version": "1.0.0", "dependencies": { + "@react-three/drei": "^9.109.5", "@react-three/fiber": "^8.17.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": { @@ -3589,8 +3590,7 @@ "glsl-noise": "^0.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "three": "^0.165.0", - "v8": "0.1.0" + "three": "^0.165.0" }, "devDependencies": { "@types/react": "^18.3.3", @@ -16621,15 +16621,6 @@ "js-sha1": "^0.6.0" } }, - "node_modules/v8": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/v8/-/v8-0.1.0.tgz", - "integrity": "sha512-cSrJCQ7WRDkSP8zbIwOO38kLSp1mGmBbx/I0pHdzQROZIMlO+qkiC4deQxg1I7pKguYJNMhMD5g/Nc1muiVyYw==", - "license": "MIT", - "bin": { - "v8": "bin/v8" - } - }, "node_modules/v8n": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/v8n/-/v8n-1.5.1.tgz",