Create a 3D multi-player game using THREE.js and Socket.IO
With Socket IO it is very easy to create a game where multiple remote players can share data. In this course we start by installing NODE.js, a prerequisite of Socket IO. NODE.js is an open source server environment. We make sure NODE.js is working correctly and that you understand how to run it by running through a few very simple examples.
More
In section 3 we move on to building a simple chat app using Socket IO and I show you how to use the rooms capability of Socket IO to limit inter-Socket communication to groups of sockets that share a room.
Section 4 introduces the WebGL library, THREE.js, and shows how to display assets using this library.
.Section 5 looks at accessing online 3D resources both models and animations and shows how you can use Blender to edit these assets.
Section 6 covers in more detail using THREE.js for games.
Section 7 brings 3D and Socket IO together to create a framework for a game where we see remote players moving.
Section 8 shows how we can chat to remote players by sending a private chat message, socket to socket.
Section 9 shows how to take your game to a live server.
The final section gives some important tips when using NODE.js and Socket IO with the THREE.js library in an online game.
- Only basic JavaScript is assumed
- If you are interested in creating multiplayer games then this is the course for you.
- If you want to learn to use Socket IO then this is the course for you.
What you'll learn:
- You’ll learn how to use THREE js to show great 3D content in a modern browser, including on mobile devices.
- Learn to use a NODE js server.
- Learn how to get great 3D assets from online providers including animation assets.
- Learn to use Socket io to create a simple chat app.
- Put all your new skills together to create a 3D game that has remote players that you can interact with.
Watch Online Create a 3D multi-player game using THREE.js and Socket.IO
# | Title | Duration |
---|---|---|
1 | Introduction | 01:39 |
2 | What is NODE.js | 01:55 |
3 | Your first NODE.js app | 06:25 |
4 | What is Socket.Io? | 01:00 |
5 | Your first Socket.IO app | 07:46 |
6 | Connecting a socket to a server | 05:39 |
7 | Create a simple chat app | 07:41 |
8 | Overview of the rooms version of the chat app | 07:10 |
9 | Coding the rooms version of the chat app | 07:54 |
10 | The THREE.js website | 01:46 |
11 | 3D basics | 03:33 |
12 | Your first THREE.js web page | 08:31 |
13 | Using FBXLoader | 07:03 |
14 | Sourcing 3D assets online | 02:13 |
15 | Using Mixamo | 02:38 |
16 | Editing assets with Blender | 04:32 |
17 | Loading assets | 04:27 |
18 | Setting up cameras | 04:41 |
19 | Moving your character | 08:55 |
20 | Constraining to the environment | 10:46 |
21 | The Socket.IO app | 05:04 |
22 | A overview of socket events | 05:54 |
23 | Handling the local player | 07:33 |
24 | Handling the NPCs | 07:17 |
25 | Convert text into an image | 08:10 |
26 | Make remote players selectable | 09:22 |
27 | Add chat feature to game | 03:38 |
28 | How to map a URL to a specific port address | 04:09 |
29 | How to ensure the node app stays running | 01:13 |
30 | Top tips | 00:39 |
31 | Bonus Lecture | 00:42 |