Create a 3D Car Racing Game with THREE.js and CANNON.js
3.8 (71 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.
544 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.8 (71 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.
544 students enrolled
Created by Nicholas Lever
Last updated 3/2019
English
English [Auto-generated]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
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
00:18

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
03:19

A brief overview of 3D graphics

3D Basics
03:58

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

How to get your assets
03:46

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

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

An introduction to the THREE.js website.

The THREE.js website
01:58

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
04:42
Test your knowledge
3 questions
+ Introducing CANNON.js
4 lectures 24:45
The CANNON.js website
02:54

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
03:44

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
06:04
Test your knowledge
4 questions
+ The CANNON.RaycastVehicle class
4 lectures 17:44

Introducing the CANNON.RayCastVehicle class.

Creating a CANNON.RaycastVehicle
05:38

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

Adding wheels
05:39

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
05:15

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
01:12
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
03:07

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

Adding colliders
02:32

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
09:23

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

Converting the colliders to Cannon Bodies
08:39

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

Adding a SkyBox
02:10

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
02:50

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

Using the Preloader class
02:02

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

Adding SFX
03:25
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
07:15

Adding the code to allow for customising the car.

Adding onclick events
07:08

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

Controlling the width and height for different screens
02:24
+ 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?
01:30

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
00:40
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

  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.