Create a 3D multi-player game using THREE.js and Socket.IO
Course description
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.
Read more about the course
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
All Course Lessons (31)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 30 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription
Want to join the conversation?
Sign in to comment