Making a 3D web runner game #4: Making an infinite plane with a shader
Let’s keep working on our web runner game and add an infinite plane with a little trick that relies on shaders!
Published in
9 min readSep 13, 2021
⬅️ Tutorial #3: Modelling our spaceship| TOC |Tutorial #5: Spawning obstacles and bonuses ➡️
In the previous episode, we improved the architecture of our project and we had the game instance fully handle the initialisation of the 3D scene. Also, we created our little spaceship using Three.js buffer geometries.
Today, we’re going to add a grid in our scene. This grid will allow us to “feel” the movement — because for now, this big black screen doesn’t give us any indication on the current speed of our ship… and we want this grid to be infinite, because we’re making an infinite runner! ;)
This tutorial is available either in video format or in text format — see below :)
