Skip to content
  1. Online
  2. IT
  3. Web design
  4. Web development
Create a 3D Car Racing Game with THREE.js and CANNON.js cover image
Play overlay
Preview this course

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

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

Summary

Price
£34.99 inc VAT
Study method
Online, On Demand 
Duration
2.4 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Reed courses certificate of completion - Free

Add to basket or enquire

Overview

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.

Certificates

Curriculum

7
sections
35
lectures
2h 24m
total

    • 1: Welcome to the Course 01:00
    • 2: Introduction Preview 02:26
    • 3: Setting up a Web Server 03:20
    • 4: 3D Basics 03:58
    • 5: How to get your assets 03:47
    • 6: Using Blender 03:39
    • 7: Test your knowledge 01:00

    • 12: The CANNON.js website 02:54
    • 13: CANNON.js basics Preview 12:03
    • 14: More about rigid bodies 03:44
    • 15: Debugging your physics 06:05
    • 16: Test your knowledge 02:00

    • 17: Creating a CANNON.RaycastVehicle 05:39
    • 18: Adding wheels 05:40
    • 19: Using the JoyStick class to control your vehicle 05:15
    • 20: Limitations for colliders 01:13
    • 21: Test your knowledge 04:00

    • 22: Sizing your assets 03:08
    • 23: Adding colliders 02:32
    • 24: Loading your assets 09:23
    • 25: Converting the colliders to Cannon Bodies 08:40
    • 26: Adding a SkyBox 02:11
    • 27: Adding checkpoints and resetting the car 02:50
    • 28: Using the Preloader class 02:02
    • 29: Adding SFX 03:26
    • 30: Test your knowledge 03:00

    • 31: Limiting the GUI to the corners and the centre 07:16
    • 32: Adding onclick events 07:08
    • 33: Controlling the width and height for different screens 02:25

    • 34: What have you learned? 01:30
    • 35: More fun with THREE.js and CANNON.js 00:41

Course media

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 is this course 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.

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.

Questions and answers

There are currently no Q&As for this course. Be the first to ask a question.

Ask a question

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

Leave a review

Legal information

This course is advertised on Reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.
View all
Similar subjects: Web development, Web design, IT
Related searches: Gaming courses, 3D design courses, Design courses, Online courses

Interest free credit agreements provided by Zopa Bank Limited trading as DivideBuy are not regulated by the Financial Conduct Authority and do not fall under the jurisdiction of the Financial Ombudsman Service. Zopa Bank Limited trading as DivideBuy is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority, and entered on the Financial Services Register (800542). Zopa Bank Limited (10627575) is incorporated in England & Wales and has its registered office at: 1st Floor, Cottons Centre, Tooley Street, London, SE1 2QG. VAT Number 281765280. DivideBuy's trading address is First Floor, Brunswick Court, Brunswick Street, Newcastle-under-Lyme, ST5 1HH. © Zopa Bank Limited 2026. All rights reserved.