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.

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 learnHow to setup your development environmentHow 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 gameThe 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. 

Overview

Section 1: Introduction

Lecture 1 Welcome to the course

Lecture 2 JavaScript in 12 Easy Lessons - e-book

Lecture 3 Introduction

Lecture 4 Setting up a Web Server

Lecture 5 3D Basics

Lecture 6 How to get your assets

Lecture 7 Using Blender

Section 2: Introducing THREE.js

Lecture 8 The THREE.js website

Lecture 9 Your first 3D app

Lecture 10 The FBXLoader class

Section 3: Introducing CANNON.js

Lecture 11 The CANNON.js website

Lecture 12 CANNON.js basics

Lecture 13 More about rigid bodies

Lecture 14 Debugging your physics

Section 4: The CANNON.RaycastVehicle class

Lecture 15 Creating a CANNON.RaycastVehicle

Lecture 16 Adding wheels

Lecture 17 Using the JoyStick class to control your vehicle

Lecture 18 Limitations for colliders

Section 5: Adding the eye-candy

Lecture 19 Sizing your assets

Lecture 20 Adding colliders

Lecture 21 Loading your assets

Lecture 22 Converting the colliders to Cannon Bodies

Lecture 23 Adding a SkyBox

Lecture 24 Adding checkpoints and resetting the car

Lecture 25 Using the Preloader class

Lecture 26 Adding SFX

Section 6: Adding a GUI

Lecture 27 Limiting the GUI to the corners and the centre

Lecture 28 Adding onclick events

Lecture 29 Controlling the width and height for different screens

Section 7: Conclusion

Lecture 30 What have you learned?

Lecture 31 More fun with THREE.js and CANNON.js

Lecture 32 Bonus Lecture

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.