Crossy Road with React Three Fiber

In this tutorial, we learn how to create a simplified clone of the mobile game Crossy Road with React Three Fiber.

The goal of the game is to move a character through an endless path of static and moving obstacles. We have to go around the trees and avoid getting hit by a car or a truck.

We start with the basic setup: setting up the scene, camera, and lighting. We learn how to draw the player and the map’s trees, cars, and trucks. We cover how to animate the vehicles and add event handlers to move the player through the map. Finally, we add logic to detect collisions between the player and the cars.

This tutorial is available both in JavaScript and TypeScript. It also comes in pair with another version that guides you through the same game with Three.js only.