Create a 3D Car Racing Game with THREE.js and CANNON.js

Name: Create a 3D Car Racing Game with THREE.js and CANNON.js
Rating: 3.8 (175 reviews)

Use the CANNON.js physics library and the WebGL library, THREE.js, to easily create a car racing game.

Created byNicholas Lever

Last updated 7/2025

English

What you'll learn

You will have a knowledge of the THREE js library.
You will have a working knowledge of how a physics engine works. Particularly CANNON js
You will know how to adapt your assets to work with the CANNON RayCastVehicle class.
You'll know how to use the position and rotation information from the physics engine and apply it to your assets.
You will know how to use colliders in your scene to prevent your car driving through your 3d environment.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

7 sections • 34 lectures • 2h 20m total length

Welcome to the course0:18
JavaScript in 12 Easy Lessons - e-book0:28
The ThreeJS Primer - FREE e-book0:28
Introduction2:25
An overview of the course.
Setting up a Web Server3:19
Using Web Server for Chrome to easily setup a local http server to use for development.
Update:
Web Server for Chrome is a Chrome App and Chrome Apps are being discontinued. Instead use Simple Web Server - https://simplewebserver.org/. Created by the same developer it works in the same way.
Create a New Server
Choose the folder
Click the blue link to open in your browser
3D Basics3:58
A brief overview of 3D graphics
How to get your assets3:46
Some useful sites for sourcing assets for your car racing game.
Using Blender3:39
A short video showing how to download and begin using Blender.
Test your knowledge

The CANNON.js website2:54
CANNON.js basics12:03
Introducing the CANNON.js library with a simple example. Make sure you have the resources from Lecture 7 when viewing this video.
More about rigid bodies3:44
Learn more about how to add rigid bodies to the CANNON World.
Debugging your physics6:04
The CANNON physics library understands how to move bodies using forces and handles how these collide, but it does not contain a renderer. To see what is happening you need to visualise this content. In this video we look at two methods to do this.
Test your knowledge

Creating a CANNON.RaycastVehicle5:38
Introducing the CANNON.RayCastVehicle class.
Adding wheels5:39
The CANNON.RayCastVehicle class has an addWheel method to add the wheels to the chassis. We look at this in this video.
Using the JoyStick class to control your vehicle5:15
We add a on screen joystick that works on desktop and mobile and use this to apply engine and steering forces to our car.
Limitations for colliders1:12
CANNON cannot understand collisions between an arbitrary mesh (TriMesh) and a Box. To overcome this limitation we need to add colliders in our game, that CANNON can calculate correctly. We discuss this limitation in this video.
Test your knowledge
Using the JoyStick class

Sizing your assets3:07
It is important that your own assets are sized to be similar to the RayCastVehicle and that these are fairly sensible metre values. We discuss this in this video.
Adding colliders2:32
In your environment you need to add simple boxes that can be used as colliders by the CANNON physics library.
Loading your assets9:23
We look again at the FBXLoader class and its load method to show how to parse the assets to use in your game.
Converting the colliders to Cannon Bodies8:39
How we convert the simple colliders we've added to our environment fbx into Cannon Bodies.
Adding a SkyBox2:10
How to create a sky background that moves with the camera.
Adding checkpoints and resetting the car2:50
No matter how good a driver you are eventually you will end up upside down and unable to continue. We look at resetting the car to a checkpoint.
Using the Preloader class2:02
How to use the include Preloader class to add a loading bar to your game.
Adding SFX3:25
We are getting closer and closer to a game. Let's add some sound using an easy to use SFX class.
Test your knowledge
Add a Preloader to your game

Limiting the GUI to the corners and the centre7:15
With a little CSS we add a GUI to the game.
Adding onclick events7:08
Adding the code to allow for customising the car.
Controlling the width and height for different screens2:24
Using media queries to adjust the GUI for different screen resolutions.
What have you learned?1:30
We've come a long way in a short time on this course and no is time to take stock of what you've learnt.

Requirements

You need to know basic Javascript.
The tools required are a good text editor and optionally a 3D application program that exports FBX files such as Blender.

Description

Creating a car racing game that works in a browser including mobile devices has never been easier. Using the two Open Source libraries THREE.js and CANNON.js this course takes you through the steps you will need to know and builds towards a complete car racing game. On the way you will learn

How to setup your development environment
How to access free and low cost assets to use in your game.
How to edit those assets to work with the THREE.js and CANNON.js libraries.
How to use THREE.js to add 3D to an HTML page.
The basics of THREE.js lights, cameras and meshes.
The basics of the CANNON.js library, including rigid bodies.
How to debug your physics either using the CannonDebugRenderer or using the CannonHelper class created by the author. Both are included in the resources for the course.
How to use the CANNON.RayCastVehicle class to add a car with suspension and fully working wheels.
How to apply your own assets to the RayCastVehicle and add colliders so it bumps into your content.
How to add a responsive GUI to the game

The course includes the assets for car racing game as shown in the course image and promo video. The author has won awards for the 3D games he has produced. Learn from an expert who has been creating games for over 30 years. The game we'll develop allows the player to choose from optional, body, engine, exhaust and wheels. It involves driving a remote controlled car around a garden track.

It's a great way to improve your JavaScript skills along the way. All code uses the latest ES6 style, using classes throughout.

Who this course is for:

If you are interested in developing 3D games that work in the browser including on mobile devices.
If you are interested in learning how physics engines work while creating a fun game.
If you want to know how to add a responsive GUI to your game.

Create a 3D Car Racing Game with THREE.js and CANNON.js

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction8 lectures • 18min

Introducing THREE.js3 lectures • 18min

Introducing CANNON.js4 lectures • 25min

The CANNON.RaycastVehicle class4 lectures • 18min

Adding the eye-candy8 lectures • 34min

Adding a GUI4 lectures • 18min

Conclusion3 lectures • 10min

Requirements

Description

Who this course is for: