Making a 3D web runner game #1: Creating a basic 3D scene with Three.js

Let’s discover Three.js and see how to make a simple 3D scene in the browser!

TOC | Tutorial #2: Designing our Game class ➡️

Last week, I talked about my latest video game: Hyperspeed! This game is a 3D infinite runner made entirely with web tech (HTML, CSS and JavaScript). And as promised, today, I start a series of tutorial to share how I made this game and how you too can create a full-web 3D runner game :)

In this first episode, we’ll recap how the game works and see the related programming concepts; then, we’ll setup our dev environment; finally, we’ll create a basic 3D scene with Three.js.

This tutorial is available either in video format or in text format — see below :)

A quick recap on Hyperspeed