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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Code a 2D Platform Game Character with Godot
Next.js 14 Real-Time Chat App using Socket IO
Shaders for the Web
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)
