In this tutorial, we create a 3D game with Three.js and use HTML Canvas to build textures. If you haven’t used Three.js before don’t worry. This is an introductory course.
We start with the basics, we set up the scene, the lights, and the camera. Then we build a minimalistic car by putting together boxes. We also add texture to it to paint the windows. For the textures, we not just going to import an image, we are going to code our textures with HTML canvas.
Once finishing with the car, we create the race track. We talk about how to draw two-dimensional shapes in Three.js and how to turn them into extruded geometries. This part will also contain some trigonometry as we need to calculate some angles to draw the track. Don’t worry though, we are going to cover everything in detail.
And once we know how to create a car and the track in the 3D space we will add the game logic. We add event handlers and the main animation loop that will move around the vehicles and take care of the game logic.
This tutorial is for beginners. The only thing you need as a prerequisite is a basic understanding of JavaScript, and you shouldn’t be afraid of using some trigonometry. We won’t do anything crazy with JavaScript, but we won’t go through the code line by line either.
👉 You can find the whole game and its source code on Codepen:
https://codepen.io/HunorMarton/pen/ExNzWqm
- 0:00 Introduction
- 2:00 Setting up the project
- 3:22 The scene
- 4:00 Adding lights
- 6:29 Camera options
- 10:03 The renderer
- 10:42 Building a car
- 14:59 Adding car textures
- 20:59 The track
- 23:08 Trigonometry basics
- 27:44 Adjusting camera
- 29:31 Plane geometry with texture
- 33:12 Extruded geometries from shapes
- 39:45 Adding game logic
- 41:00 Initialization
- 43:08 Event handlers
- 44:46 Animation loop
- 45:46 Moving the car around
- 48:59 Calculating the score
- 49:49 Adding new vehicles
- 52:43 Hit detection
- 57:16 Next steps
The game in the video is heavily inspired by the mobile game Loop Driver: https://apps.apple.com/us/app/loop-drive-crash-race/id992442150
#game-development #threejs #three #html
