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.

4.40 (166 reviews)
Udemy
platform
English
language
Game Development
category
instructor
Create a 3D Car Racing Game with THREE.js and CANNON.js
1,437
students
2.5 hours
content
Oct 2023
last update
$49.99
regular price

What you will 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.

Why take this course?

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. 

Screenshots

Create a 3D Car Racing Game with THREE.js and CANNON.js - Screenshot_01Create a 3D Car Racing Game with THREE.js and CANNON.js - Screenshot_02Create a 3D Car Racing Game with THREE.js and CANNON.js - Screenshot_03Create a 3D Car Racing Game with THREE.js and CANNON.js - Screenshot_04

Reviews

Mathieu
December 27, 2023
It was great ! I learned a lot of things I wanted to learn. Although the Udemy videos were buggy, glitchy and sometimes took a long time to load. The bugs I see in the videos is when they play, some bits of the video are played in the wrong order, like I suddenly see 2 seconds from the end of the video playing in the middle of the video.
Kevin
January 26, 2022
I found this course very helpful when needing to learn physics for Three.js. I do prefer code along courses to the this format. Here everything is pre-written and the instructor just walks you thought it. I think its easier to learn when you are breaking and rebuilding your projects.
Adrian
January 10, 2022
More of a brief walkthrough of some finished code. It would be much more beneficial to have just one example of taking geometry from blender and actually showing how to line up the colliders. There is no explanation that three knows how to select geo from the fbx. I could tell from the video length it was goin to be brief but I was hoping for a better explanation.
Karl
December 27, 2021
In its current format, it is more code narration than a course. Also the code could contain comments of the explanations which would make it far simpler. I am mostly self taught, I thought this course would give more background than what I already get from reading non commented source code and the information available on the sites that produce the libraries.
Nerdy
August 30, 2021
For someone who is already versed in javascript, this was exactly what I expected and needed: straight to the point, I could experiment with examples to see how it all ties together etc. Nice. But...I would definitely not recommend that to beginners and people who are just starting to code and want to learn how to make games (since it states "All levels" in description).
Oscar
June 27, 2021
I will try to explain why i'm giving a bad review of this course. The main issue with the course is that this is not an step by step course, is more a code explanation of an already finished product. Sometime i do not have problems with that but in this case, the code from chapter to chapter is completely different and do not have connection. The code from the V0 to V4 is for different projects but is presented by the teacher as little changes. i took the course to learn a little bit more about cannon because i already have some knowledge of using three js, however, the part of the course that explains about cannon is encapsulated in a helper class. i do not have problems using helper classes but again, this was included in the project and explained how it works but was no created in step by step. lastly, the course is outdated. i manage to make it work with the latest version of three and cannon but i struggled with the V3 project because in threejs, the Geometry class is deprecated and i was forced to change all the Geometry references to BufferGeometry and rework the code to make it functional. This is a good course if you are looking for something that is already working and using it as base for a new project but is not good if you are planning to create something from scratch.
Matheus
February 18, 2021
The course has a very fast pace, and too much copy and past to my taste, I prefer step by step, code along type of courses, otherwise good course
RajKishore
July 22, 2020
I thought the code will be explained and coded on the go. But it is not clear as the author was explaining already written code. Structure of the files, dividing the game to multiple classes could have been more helpful.
Juan
May 2, 2020
The code is not really explained. One needs prior knowledge of classes and functions to understand what is going on. The scripts are pre-created and explanation is really brief.
ec-ccs
January 11, 2020
I usually find the courses by Nik quite good and rate them high, but this is likely not his best. The only thing that make me rate the course as Average is the content. Here some reasons why it is not my favorite from Nik: 1. I actually appreciate explaining instead of "coding along" for his advanced courses, but in this course there is a LOT of code that is NOT EXPLAINED. Although I can eventually reverse engineering I am paying the course to save me for doing just that. The fact that is mostly explained code and that some explanations are in fact skipped make the All Levels target a misleading statement. 2. Although you can still find examples combining cannon.js with three.js as late as 2019 (I wrote this just starting 2020), the library hasn't been updated for the LAST 5 YEARS (see repository). Not sure if a good choice? As one poster commented in the three.js forum comparing physics engines, "Stuffs only outdated when it doesn’t do what you want". Fair enough, but I think the course should at least compare and comment other engines and justify why cannon.js is the correct choice for this particular course. I would also prefer to have an extended explanation of the physics engine, whatever the choice. It seems like a course on its own. Probably a course using several libraries for different purposes? I still keep the course because of the content and some explanations, but not completely satisfied.
Günter
November 14, 2019
Genau die kniffligen Dinge werden nicht erklärt. Die essentiellen Punkte werden nicht erklärt ("... hier verwenden wir eine andere Klasse ..." ohne darauf einzugehen, was diese macht oder warum man sie braucht). Beispiele stammen teils 1 zu 1 von der CannonJS-Seite, was ok wäre, wenn man eben alles davon erklären würde. Was mir noch fehlt (fließt aber nicht in die Bewertung mit ein) ist ein Projekt-Setup in TypeScript.
Akhil
July 6, 2019
The course was good.. but i wish to have more learning on joy stick controls and different joystick customization
Anthony
March 24, 2019
Developers learn by coding along. This course has everything already coded, and the lecturer only tells you what he did. You don't learn anything like this.
Mark
January 15, 2019
Really good course, highly recommend. It would help to have some programming experience, and is the content is a challenge, but creating a 3D game is a challenge. The last time I tried to learn the source code was 20,000 lines of C#. Without the helper classes, this author achieves an awesome 3D Car game in less than 400 lines. In the past I have had a lot of issues with getting FBX from Blender into a THREE.js scene but here it is easily explained and worked effortlessly. Huge thanks to Nik for this fantastic course.
Aleksej
December 12, 2018
Für Anfänger etwas schwer reinzudenken. Ansonsten hat der Kurs Spaß gemacht. Hätte mir detaillierte Erklärungen erwünscht.

Charts

Price

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

Rating

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

Enrollment distribution

Create a 3D Car Racing Game with THREE.js and CANNON.js - Distribution chart
1906208
udemy ID
9/11/2018
course created date
11/22/2019
course indexed date
Bot
course submited by