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 |
Similar courses to Create a 3D multi-player game using THREE.js and Socket.IO
Merging WebGL and HTML worlds
SocketIO v4, with websockets - the details.
Impress everyone with a 3D particle scene with Blender and Three.js
Three.js Journey - The ultimate Three.js course
Full Time Game Dev
Real-time chat with Node.js, Socket.io and Vue.js
Shaders for the Web
Build fancy landing pages with React and Threejs
PS1 Programming with MIPS Assembly & C
