CubeRun

CubeRun
React
ThreeJS
react-three-fiber
Javascript

View source

https://cuberun.adamkarlsten.com

CubeRun is a 3D game where the basic goal is to avoid cubes while the spaceship you control gradually goes faster and faster. It is inspired by an old flash game called Cubefield which I played a lot in high school in the late 2000s.

Tech

The game is built with react-three-fiber, a React reconciler for THREE.js that allows one to write the (regularly imperative) THREE code in a declarative, React-like manner. I mainly wrote it to become more familiar with react-three-fiber (and 3D graphics in general), but ended up really enjoying working on it. I spent a whole lot of time modelling my own spaceship in Blender, writing a synthwave-ish music track for it, as well as designing a cool logo. All in all I’m very pleased with the results.

Screenshots

Navigating between cubes.
Navigating between cubes.
Cruising through the hyperspace tunnel!
Cruising through the hyperspace tunnel!
The game menu.
The game menu.
The game over screen.
The game over screen.

Progress Pics

The ship as modeled in Blender.
The ship as modeled in Blender.
The ship imported into the application.
The ship imported into the application.
Added an exhaust trail and some bloom.
Added an exhaust trail and some bloom.
The basic aesthetic of the game can be seen coming together in this one!
The basic aesthetic of the game can be seen coming together in this one!
Experimenting with using godrays, this really tanked the FPS however and prevented the signature Bloom effect from working properly.
Experimenting with using godrays, this really tanked the FPS however and prevented the signature Bloom effect from working properly.

Kind of forgot to take more screenshots after this, these were all from very early in the project.