Mini space shooter in React and Threejs

Showcase
1

demo: https://present-chain.surge.sh/
source code and online ide: https://codesandbox.io/s/react-three-fiber-untitled-game-i2160

this was a project i started just to see if i can pull it off. i didn’t get that far, still missing lots of basic things like collision detection but it serves as a nice example on how to combine react and three, and how well they can get along.

everything in it is a (mostly) self contained component, if you browse through index.js you can try taking components out, nothing should break. react takes care of managing the scene graph, it mounts/unmount objects, while threejs renders. individual objects can control their own render-phase via the useFrame hook. it doesn’t create that kind of salad where everything’s mixed and intermingled.

next step would have been to make objects truly self-contained, where they control their own collision detection, explosion, mount/unmount. but haven’t had the time - so sadly the central store is still controlling things it shouldn’t touch.

12 Likes
2

Super sweet stuff! What license is the code under? I love the space ship thruster effect, and would very much like to use it in my own project.

3

you can click the fork button and build on top of it or use anything you like. the exhaust plume is just a stretched, fast rotating dodecahedron. i was surprised to find that it creates that see through effect myself.

1 Like
4

Really fantastic!! Really like the art style! :slight_smile: Hope you keep developing this!

5

would have taken too much time to make this into a real game but it was a fun experiement. but thanks! :slight_smile: