Create a 3D Car Racing Game with THREE.js and CANNON.js
3.1 (79 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
614 students enrolled

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

Use the CANNON.js physics library and the WebGL library, THREE.js, to easily create a car racing game.
3.1 (79 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
614 students enrolled
Created by Nicholas Lever
Last updated 3/2019
English [Auto]
Current price: $12.99 Original price: $34.99 Discount: 63% off
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 article
  • 2 downloadable resources
  • 2 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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.
Course content
Expand all 30 lectures 02:10:32
+ Introduction
6 lectures 17:25
Welcome to the course

An overview of the course.

Preview 02:25

Using Web Server for Chrome to easily setup a local http server to use for development.

Setting up a Web Server

A brief overview of 3D graphics

3D Basics

Some useful sites for sourcing assets for your car racing game.

How to get your assets

A short video showing how to download and begin using Blender.

Using Blender
Test your knowledge
4 questions
+ Introducing THREE.js
3 lectures 17:33

An introduction to the THREE.js website.

The THREE.js website

Create a first 3D app using THREE.js. Download the resources for the course to work along with the lecture.

Preview 10:53

How we can use the FBXLoader class to load and parse a FBX file to use in our game.

The FBXLoader class
Test your knowledge
3 questions
+ Introducing CANNON.js
4 lectures 24:45
The CANNON.js website

Introducing the CANNON.js library with a simple example. Make sure you have the resources from Lecture 7 when viewing this video.

Preview 12:03

Learn more about how to add rigid bodies to the CANNON World.

More about rigid bodies

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.

Debugging your physics
Test your knowledge
4 questions
+ The CANNON.RaycastVehicle class
4 lectures 17:44

Introducing the CANNON.RayCastVehicle class.

Creating a CANNON.RaycastVehicle

The CANNON.RayCastVehicle class has an addWheel method to add the wheels to the chassis. We look at this in this video.

Adding wheels

We add a on screen joystick that works on desktop and mobile and use this to apply engine and steering forces to our car.

Using the JoyStick class to control your vehicle

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.

Limitations for colliders
Test your knowledge
5 questions
Using the JoyStick class
1 question
+ Adding the eye-candy
8 lectures 34:08

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.

Sizing your assets

In your environment you need to add simple boxes that can be used as colliders by the CANNON physics library.

Adding colliders

We look again at the FBXLoader class and its load method to show how to parse the assets to use in your game.

Loading your assets

How we convert the simple colliders we've added to our environment fbx into Cannon Bodies.

Converting the colliders to Cannon Bodies

How to create a sky background that moves with the camera.

Adding a SkyBox

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.

Adding checkpoints and resetting the car

How to use the include Preloader class to add a loading bar to your game.

Using the Preloader class

We are getting closer and closer to a game. Let's add some sound using an easy to use SFX class.

Adding SFX
Test your knowledge
4 questions
Add a Preloader to your game
1 question
+ Adding a GUI
3 lectures 16:47

With a little CSS we add a GUI to the game.

Limiting the GUI to the corners and the centre

Adding the code to allow for customising the car.

Adding onclick events

Using media queries to adjust the GUI for different screen resolutions.

Controlling the width and height for different screens
+ Conclusion
2 lectures 02:10

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.

What have you learned?

It doesn't end there. Take a look at my other THREE.js and CANNON.js courses.

More fun with THREE.js and CANNON.js
  • 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.

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

  1. How to setup your development environment

  2. How to access free and low cost assets to use in your game.

  3. How to edit those assets to work with the THREE.js and CANNON.js libraries.

  4. How to use THREE.js to add 3D to an HTML page.

  5. The basics of THREE.js lights, cameras and meshes.

  6. The basics of the CANNON.js library, including rigid bodies.

  7. 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.

  8. How to use the CANNON.RayCastVehicle class to add a car with suspension and fully working wheels.

  9. How to apply your own assets to the RayCastVehicle and add colliders so it bumps into your content.

  10. 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.