Mini space shooter in React and Threejs

source code and online ide:

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.


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.

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

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

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