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

Focused View

Nicholas Lever

2:10:44

301 View

1 - Introduction

1 - Welcome to the course.html

2 - JavaScript in 12 Easy Lessons ebook.mp4

00:28

2 - js12easy-complete.pdf

2 - my threejs facebook group.zip

3 - Introduction.mp4

02:25

4 - Setting up a Web Server.mp4

03:19

5 - 3D Basics.mp4

03:58

6 - How to get your assets.mp4

03:46

7 - Using Blender.mp4

03:39

7 - rctimetrial.blend.zip

2 - Introducing THREEjs

8 - The THREEjs website.mp4

01:58

9 - Your first 3D app.mp4

10:53

9 - udemy-car-game.zip

10 - The FBXLoader class.mp4

04:42

3 - Introducing CANNONjs

11 - The CANNONjs website.mp4

02:54

12 - CANNONjs basics.mp4

12:03

13 - More about rigid bodies.mp4

03:44

14 - Debugging your physics.mp4

06:04

4 - The CANNONRaycastVehicle class

15 - Creating a CANNONRaycastVehicle.mp4

05:38

16 - Adding wheels.mp4

05:39

17 - Using the JoyStick class to control your vehicle.mp4

05:15

18 - Limitations for colliders.mp4

01:13

5 - Adding the eyecandy

19 - Sizing your assets.mp4

03:07

20 - Adding colliders.mp4

02:32

21 - Loading your assets.mp4

09:23

22 - Converting the colliders to Cannon Bodies.mp4

08:39

23 - Adding a SkyBox.mp4

02:10

24 - Adding checkpoints and resetting the car.mp4

02:50

25 - Using the Preloader class.mp4

02:02

26 - Adding SFX.mp4

03:25

6 - Adding a GUI

27 - Limiting the GUI to the corners and the centre.mp4

07:15

28 - Adding onclick events.mp4

07:08

29 - Controlling the width and height for different screens.mp4

02:24

7 - Conclusion

30 - What have you learned.mp4

01:30

31 - More fun with THREEjs and CANNONjs.mp4

00:41

32 - Bonus Lecture.html

Description

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.

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

More details

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.

User Reviews

Rating

average 0

Total votes0

Focused display

After getting a degree in Graphic Design, I started work in 1980 as a cartoon animator. Buying a Sinclair ZX81 back in 1982 was the start of a migration to a full time programmer. The ZX81 was quickly swapped for the Sinclair Spectrum, a Z80 processor and a massive 48K of ram made this a much better computer to develop games. I developed a few games using Sinclair Basic and then Assembler. The Spectrum was swapped for a Commodore Amiga and I developed more games in the shareware market, moving to using C. At this stage it was essentially a hobby. Paid work was still animated commercials. I finally bought a PC in the early nineties and completed an Open University degree in Maths and Computing. I created a sprite library ActiveX control and authored my first book, aimed at getting designers into programming. In the mid nineties along came Flash and the company I was now running, Catalyst Pictures, became known for creating games. Since then the majority of my working life has been creating games, first in Flash and Director, as Director published the first widely available 3D library that would run in a browser using a plugin. In recent years game development has involved using HTML5 and Canvas. Using both custom code and various libraries. A particular preference is to use the latest version of Adobe Flash, now called Animate that exports to the Javascript library Createjs. I've worked for the BBC. Johnson and Johnson. Deloitte, Mars Corporation and many other blue chip clients. The company I've run for over 30 years has won a number of awards and been nominated for a BAFTA twice, the UK equivalent to the Oscar. Over the last 20 years I have been struck by just how difficult it has been to get good developers and have decided to do something about this rather than just complain. I run a CodeClub for kids 9-13 years old and I'm developing a number of courses for Udemy hoping to inspire and educate new developers. Most of my courses involve real-time 3d either using the popular Open Source library Three.JS or Unity. I'm currently having a lot of fun developing WebXR games and playing with my Oculus Quest.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.