Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Create a 3D RPG Game With THREE.js

Name: Create a 3D RPG Game With THREE.js
Rating: 3.7 (353 reviews)

Use THREE.js to create a stunning WebGL 3D game that will run in all modern browsers, including mobile devices.

Created byNicholas Lever

Last updated 11/2024

English

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.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

9 sections • 32 lectures • 2h 28m total length

Welcome to the course0:40
JavaScript in 12 Easy Lessons - e-book0:28
The ThreeJS Primer - FREE e-book0:28
What are you going to learn2:41
A brief overview of the course and its contents.
Setting up a simple web server2:47
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. Web Server for Chrome is a Chrome App and Chrome Apps are being discontinued. Instead use Simple Web Server - https://simplewebserver.org/. Created by the same developer it works in the same way.
Create a New Server
Choose the folder
Click the blue link to open in your browser
3D basics3:58
Introducing THREE.js8:45
A brief introduction to THREE.js Scenes, Renderers, Lights and Cameras.
To follow along please download the resources for this course.
What have you learned?

Finding environment assets to use in your game3:52
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.
Using Mixamo characters and animations4:10
The Mixamo website provides great characters and animations that you can use in your game.
An overview of Blender3:39
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.
3D formats7:49
3D has hundreds of different file formats in this lecture we look at 5 important ones.
Editing your assets2:36
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.

Creating a Preloader6:39
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.
The THREE.js Animation system4:00
An overview of the THREE.js animation system
Using the FBXLoader class8:11
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 PreLoader class

Creating an onscreen joystick7:10
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.
Switching animations dynamically5:32
THREE.js has a sophisticated animation system that is easily used. This video shows how to use it to control the player character.
Check your knowledge

Changing camera angle6:41
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.
Using the Raycaster class to avoid walking through the environment5:54
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.
Loading the environment2:07
In this video we add a proper environment for the first time.
Creating a simplified version of your environment4:47
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.
Check your knowledge

Using proximity testing for custom actions7:46
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.
Adding cut scenes6:25
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 custom animations using a Tween class3:46
Tweens are useful for changing parameters over time. In this video we look at using a simple Tween class to animate 3D properties.
Use the Tween class to change a Vector3 x value from 1 to 100

What you've learned2:39
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.
Three.JS with NPM and Vite7:56
More ideas for THREE.js games0:40
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.
Bonus Lecture1:22

Requirements

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.

Description

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 !"

"This is the most exciting class I've taken on Udemy since joining 7 years ago! The instructor gives examples that he made personally, explains all of the coding thoroughly, and shows you vast libraries to source pre-made objects, characters, and worlds... what more could you ask for!?!"

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.

Create a 3D RPG Game With THREE.js

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction7 lectures • 20min

Creating 3D assets5 lectures • 22min

Loading your assets3 lectures • 19min

Character Animation2 lectures • 13min

Moving around your environment4 lectures • 19min

Interacting with the environment3 lectures • 18min

Adding Sound to your game2 lectures • 8min

Pathfinding2 lectures • 17min

Conclusion4 lectures • 13min

Requirements

Description

Who this course is for: