Create A 3d Car Racing Game With Threejs And Cannonjs

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

Last updated 2022-01-10 | 3.7

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

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.

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

Course content

7 sections • 37 lectures

Introduction 7 lectures

Welcome to the course Preview 00:18

Introduction Preview 02:25

An overview of the course.

Setting up a Web Server Preview 03:19

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

3D Basics Preview 03:58

A brief overview of 3D graphics

How to get your assets Preview 03:46

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

Using Blender Preview 03:39

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

Test your knowledge

Introducing THREE.js 4 lectures

The THREE.js website Preview 01:58

An introduction to the THREE.js website.

Your first 3D app Preview 10:53

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

The FBXLoader class Preview 04:42

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

Test your knowledge

Introducing CANNON.js 5 lectures

The CANNON.js website Preview 02:54

CANNON.js basics Preview 12: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 bodies Preview 03:44

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

Debugging your physics Preview 06: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

The CANNON.RaycastVehicle class 6 lectures

Creating a CANNON.RaycastVehicle Preview 05:38

Introducing the CANNON.RayCastVehicle class.

Adding wheels Preview 05: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 vehicle Preview 05: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 colliders Preview 01: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

Adding the eye-candy 10 lectures

Sizing your assets Preview 03: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.