Create a 3D RPG Game With THREE.js
4.1 (186 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,120 students enrolled

Create a 3D RPG Game With THREE.js

Use THREE.js to create a stunning WebGL 3D game that will run in all modern browsers, including mobile devices.
4.1 (186 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,120 students enrolled
Created by Nicholas Lever
Last updated 3/2019
English [Auto]
Current price: $12.99 Original price: $34.99 Discount: 63% off
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 article
  • 2 downloadable resources
  • 3 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create 3D games that will run in a browser
  • Understand how to control a character allowing the user to guide them around a large environment
  • Learn to load complex external 3D assets that contain animations.
  • Apply animations to a skinned mesh.
  • Use simplified geometry to contain the user character within the environment.
Course content
Expand all 26 lectures 02:00:39
+ Introduction
5 lectures 18:29
Welcome to the course

A brief overview of the course and its contents.

Preview 02:41

Most web pages need to download additional resources, images or other assets. If working from your local machine then if the url begins with file:// then this means using the local file system and this is not allowed for security reasons. To work on the game we will develop in this course we need to use a Web Server so we can use http:// - in this lecture I show how easy this is done by using Web Server for Chrome, a Chrome extension that is freely available and makes setting up a local web server very easy.

Preview 02:47

A brief introduction to THREE.js Scenes, Renderers, Lights and Cameras.

To follow along please download the resources for this course.

Preview 08:45

Testing your knowledge of Section 1.

What have you learned?
4 questions
+ Creating 3D assets
5 lectures 22:06

Before you can start to develop the code for a 3d game you need assets. Loads of great assets are available at various sites online. In this lecture we look at some of these sites.

Finding environment assets to use in your game

The Mixamo website provides great characters and animations that you can use in your game.

Using Mixamo characters and animations

Blender is a FREE 3D application program to allow you to create and edit 3D resources. You can import and export using the fbx format that we are supporting in this course. In this short video you get the briefest of introductions to the software and advice about learning more.

An overview of Blender

3D has hundreds of different file formats in this lecture we look at 5 important ones.

3D formats

More often than not you will need to make edits to your game assets before they are perfect for your game. In this video we give an overview of this.

Editing your assets
+ Loading your assets
3 lectures 18:50

Game assets can be quite large and it is important that your users can see how much is downloaded while they wait for the game to load. In this lecture we look at using a useful PreLoader class to handle displaying a download progress bar.

Creating a Preloader

An overview of the THREE.js animation system

The THREE.js Animation system

FBX files are a great way to export complex scenes and animation from a 3D application program like Blender. In this lecture we'll look at how you can then import them into your THREE.js game.

Using the FBXLoader class
Using the PreLoader class
1 question
+ Character Animation
2 lectures 12:42

In this course we are using an on-screen joystick to control our character rather than use short-cut keys. In this way the same code base can be used on mobile devices and desktops. In this lecture we look at a simple JoyStick class that you can easily add to your own game, re-skinning the look by editing the CSS.

Creating an onscreen joystick

THREE.js has a sophisticated animation system that is easily used. This video shows how to use it to control the player character.

Switching animations dynamically

A quick quiz to see if you're ready to move on.

Check your knowledge
3 questions
+ Moving around your environment
4 lectures 19:29

3D allows the developer to show their scenes from multiple different camera angles. In this video we look at allowing the user to view their scene from different angles.

Changing camera angle

How do we stop our character from walking through walls? In this video we look at using Raycasting to keep our character on the right side of the wall.

Using the Raycaster class to avoid walking through the environment

In this video we add a proper environment for the first time.

Loading the environment

To stop your character walking through walls and also make a game that will work on mobile we look at creating a simplified environment just to use with the Raycaster.

Creating a simplified version of your environment

Let's see how much you've learnt.

Check your knowledge
3 questions
+ Interacting with the environment
3 lectures 17:57

As your character moves around the environment you may want her to do custom actions based on standing at a certain position in the scene. Maybe she can collect a useful object or press a button on a console. In this video we look at techniques to facilitate this.

Using proximity testing for custom actions

Changing the camera angle for a cut scene helps the player focus on important things in the game. In this video we look at adding a cut scene.

Adding cut scenes

Tweens are useful for changing parameters over time. In this video we look at using a simple Tween class to animate 3D properties.

Adding custom animations using a Tween class
Use the Tween class to change a Vector3 x value from 1 to 100
1 question
+ Adding Sound to your game
2 lectures 07:47

SFX make a game come to life. Using the SFX class included in the resources for this course it is easy to add them to your game.

The SFX class

As your character moves around the environment it is useful to control sounds base on her proximity to sound sources. We look at the techniques in this video.

Adjust volume using proximity
Use the SFX class to load sound file
1 question
+ Conclusion
2 lectures 03:19

If you've followed the course from the start then you've learnt a lot. From the basics of a THREE.js scene to a template for a RPG game with complex scenery and a sophisticated central character.

What you've learned

There has never been a better time to hone your 3D skills by creating games that will run in browsers. Mobile devices are more and more capable of displaying sophisticated content. In this short video I outline two other courses I'm developing to help you.

More ideas for THREE.js games
  • You need to be keen to learn to code your own 3D games.
  • We’ll be using Brackets as the text editor. But feel free to use your preferred editor if you like to use a different one.
  • Some knowledge of JavaScript will help.
  • Game will run in a browser, but you need to use a web server. Setting this up simply is described in section 1.

Creating 3D games is fun. In this course you will learn quickly to create a stunning game. The author has won many awards for his 3D browser based games and he will take you through all the skills you need to create games of your own using the amazing THREE.js library. 

THREE.js makes creating WebGL games much easier. You will not need to worry about how to write complex shaders. Instead the shaders will load from the assets you create in Blender.

You’ll learn

  • To setup your development environment .

  • How to export 3D assets from Blender, including animation.

  • Where to source great 3D assets that you can use in your own games.

  • The basics of setting up a THREE.js camera, scene and renderer.

  • Adding a pre-loader.

  • Using the FBXLoader class.

  • To master the art of blending animations.

  • Use a custom onscreen JoyStick class you can easily add to your own games so that desktop and mobile users get the same experience.

  • How to smoothly switch camera angles.

  • How to use simplified geometry to lock your character to the environment.

  • How to add cut-scenes.

  • How to add Sound to your games that responds to the current camera location.

It is exciting and fun and in around 2 hours you will have acquired the skills to create your own games.

Student reviews:

"This course is really awesome ! I enjoyed every second of this learning experience. Thanks to Nicholas Lever ( all the respects ) I can't wait for the next course using cannon.js !"

Who this course is for:
  • You want to learn to create 3D games that will run in a modern browser, even on mobile devices.
  • You want to learn the skills quickly.
  • You want to focus on a game that has a central in-vision character.
  • You want to learn to control 3D assets with code.