zuggamasta.de

three.js Racer

Web development Project, 2024

With some free time in the end of 2023 I looked into creating full experiences with three.js and TypeScript. This was to learn how to handle import of multiple gltf assets, state management of multiple states in the game, mouse input, continuous level generation, setup of a clean seamless background with shadows, smooth transition between game states and user customizable game skins by dragging and dropping replacement textures.

Play this game in your browser

The spaceships original design is by Rob Turpin thisnorthernboy, designer and illustrator from North Yorkshire and used with friendly permission by the artist.

The game can be modified by the user by dragging and dropping new textures into the browser window. The UV coordinates (a way of describing which part of the texture goes where on the 3d model) are setup so that even non specific images can create interesting space ship designs. A color picker library is then used to determine which color will be interesting as background.

The game was optimized to run on desktop computers, as well as mobile devices such as modern iPhone and Android devices. It also played quite nice on the Steam Deck, from within the built in firefox browser, when I last tried it.

Tags: #Blender #Games #Software