Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Game Development 3D Game Development

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.
Rating: 4.3 out of 54.3 (105 ratings)
807 students
Created by Nicholas Lever
Last updated 2/2021
English
English [Auto]
30-Day Money-Back Guarantee

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.

Course content

7 sections • 30 lectures • 2h 10m total length

  • Welcome to the course
    00:18
  • Preview02:25
  • Setting up a Web Server
    03:19
  • 3D Basics
    03:58
  • How to get your assets
    03:46
  • Using Blender
    03:39
  • Test your knowledge
    4 questions

  • The THREE.js website
    01:58
  • Preview10:53
  • The FBXLoader class
    04:42
  • Test your knowledge
    3 questions

  • The CANNON.js website
    02:54
  • Preview12:03
  • More about rigid bodies
    03:44
  • Debugging your physics
    06:04
  • Test your knowledge
    4 questions

  • Creating a CANNON.RaycastVehicle
    05:38
  • Adding wheels
    05:39
  • Using the JoyStick class to control your vehicle
    05:15
  • Limitations for colliders
    01:12
  • Test your knowledge
    5 questions
  • Using the JoyStick class
    1 question

  • Sizing your assets
    03:07
  • Adding colliders
    02:32
  • Loading your assets
    09:23
  • Converting the colliders to Cannon Bodies
    08:39
  • Adding a SkyBox
    02:10
  • Adding checkpoints and resetting the car
    02:50
  • Using the Preloader class
    02:02
  • Adding SFX
    03:25
  • Test your knowledge
    4 questions
  • Add a Preloader to your game
    1 question

  • Limiting the GUI to the corners and the centre
    07:15
  • Adding onclick events
    07:08
  • Controlling the width and height for different screens
    02:24

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

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

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

Instructor

Nicholas Lever
Game developer
Nicholas Lever
  • 4.4 Instructor Rating
  • 1,371 Reviews
  • 7,762 Students
  • 9 Courses

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 for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.