How to Create a Multiplayer Game with Three.js and Blender

Trying out small video content in between my longer advanced tutorials. Let me know what you think, and if you have any suggestions feel free to let me know!
Messy, but here is the code: github.com/andrewwoan/PSU-VR
Try it out here: psu-vr.herokuapp.com/
WASD to move | SHIFT to run | SPACE to jump | ENTER to chat | Click/Drag to pan | middle mouse to zoom | O to dance!
Here is the document shown in the video with all the links:
docs.google.com/document/d/1W...
- Chapters -
0:00 Intro
0:35 Why I work on this project
2:53 Visual Intuition on Frontend and Backend Interactions
5:20 Code example on Frontend and Backend Interactions
7:35 Workflow and Tech Stack

[@andrewwoan]

Trying out small video content in between my longer advanced tutorials. Let me know what you think, and if you have any suggestions feel free to let me know! Messy, but here's the code: github.com/andrewwoan/PSU-VR Try it out here: psu-vr.herokuapp.com/ WASD to move | SHIFT to run | SPACE to jump | ENTER to chat | Click/Drag to pan | middle mouse to zoom | O to dance! Here is the document shown in the video with all the links: docs.google.com/document/d/1WHLsts7P2ZaUbwssliK2wBrPfiAI4dXGqIiu88uqEq8/edit?usp=sharing

[@A.IRemix]

It didn’t seem to load on Safari

[@sarylsono]

Is it on github?

[@andrewwoan]

@@sarylsono It was, I had to take it down due to university stuff being on there and without being officially sponsored. I'm waiting for their response and I'll put it back up when they respond.

[@andrewwoan]

@@A.IRemix Oh yeah, safari on mobile won't work yet. It's an iOS issue with loading and refreshing.

[@A.IRemix]

It was the link that I clicked that wouldn’t load but I just checked now and it loaded on Safari IOS from a mobile device

[@andrewasem761]

Wow this is amazing work Andrew, it looks really really good. Keep up the good work dude!

[@andrewwoan]

Thanks Andre! That means a lot!!!

[@avocode1487]

Great video andrew, short videos like this are really helpful, it gives a sense of idea what goes behind the scenes in creating big projects. thanks mate, keep posting such short videos, along with anything you wanna share, not just the coding thing, but anything realted to channel you wanna share it to us, feel free about it.

[@andrewwoan]

Sounds good! Thanks for your support!

[@worldbest3097]

break part into several classes for youtube, code explanation might be awesome for studying three.js and web

[@user-qg7hg3zj8k]

Great work, thanks for sharing it !!

[@hauvert_]

Great video Andrew! this was amazing!

[@andrewwoan]

Thanks Hauvert!!!

[@nate-nate]

I've always procrastinated searching how to make some online stuff with threejs haha, you're a saver. Also great initiative with the social project

[@andrewwoan]

Appreciate it lol! Glad I could help.

[@shouryaverma5829]

Great work , Super Great Website , really appreciate that!!

[@seung-heechoi5248]

As always, great content. This is the most valuable channel for me at this point!! Thank you always.

[@andrewwoan]

Wow! That's such an honor! Glad to be of assistance! Thanks so much for your continuous support!

[@Doppio_00]

Very cool. I'm very impressed.

[@markopolo2224]

amazing work

[@kelvinnjuguna349]

great work on the IST building Andrew! I didn't know you have such a great channel!

[@andrewwoan]

Haha thanks Kelvin! It's been a while since that class lol. I hope you're doing well!

[@kelvinnjuguna349]

@@andrewwoan I hope you're doing well too! Keep up the great work! Also, the brand update looks great! good stuff!

[@andrewwoan]

Haha thanks! Updating the thumbnails soon too!@@kelvinnjuguna349

[@raveeshnilaweera]

Nice Video. Keep it up ❤❤❤🎉

[@thedragonforce2210]

amazingly done sir, thanks for your effort and time sir , thank you

[@andrewwoan]

No problem! Glad to help.

[@vladislavnadein2849]

Thanks you so much, bro! That's a great job!

[@andrewwoan]

Glad you like it! ☺️ Lemme know if any questions!!

[@tranghoang9575]

great game metaverse, thanks for sharing

[@hyvlog5476]

it's amazing, thank for sharing. i will learn it right now.

[@andrewwoan]

You got this!! 💪💪

[@hyvlog5476]

@@andrewwoan fighting

[@thanhcong99812]

hope you make this tutorial, thank you so much.

[@AndyNorth]

Greate! thankyou. I will use this for my learning about threejs.

[@luiseberrojasduque1104]

Wow very thanks

[@freeju2001]

its a gold tressure bro! thanks a ton

[@andrewwoan]

Glad it was helpful!!!

[@spreadItWide]

Just an FYI: Anyone with a 360° camera can put indoor camera paths and camera anchor points. I saw a bar/pub on Google Street, I was going down the sidewalk, and then I saw I could turn right, which was a building, turned right, and I was inside a cool little pub. It had like 12-15 360° photos all around the pub with camera set at like 5'0" ish.

[@andrewwoan]

Oh thanks for letting me know!! I didn't know that!

[@rec-trick]

I think if we use Assembly with the tree, we will get great performance on any browser

[@rofldemo1648]

Hi, amazing job Andrew ! I wish i had your talents with blender, for my case i use heavy fbx file found on internet haha Great job

[@andrewwoan]

Ah! Well there are some tools that can compress the FBX I believe for free online, that may help a bit!

[@guocget]

you are really bro, thanks your content, hope you share your tutorial.

[@timeforrice]

Wow this is amazing!!

[@andrewwoan]

Thanks so much!!

[@timeforrice]

@@andrewwoan do you have any suggestions where I can learn to get to this level?

[@andrewwoan]

Yeah check out my learning how to learn series!! It'll help get started with some great resources!!

[@0xe86]

Cool!

[@AhmadMughal1]

for the backend it is essentially just using websockets for double way communication to update locations of the players in realtime ?

[@andrewwoan]

Yeah pretty much!

[@maximumcockage6503]

Would you ever give this a try in Babylon now that they have Havok physics imported in Assembly giving amazing physics performance? I only bring it up because VR Chat has throwable items and stuff so I figured a fast physics engine would be good going forward.

[@andrewwoan]

Yeah sure why not? You can also always write your own physics engine of full control with native WebGL. Also WebGPU is in the works which is much faster, so that's even more exciting!

[@HumbleHustle101]

Nice work @pandawoan. Is there some mechanism through which I can animate cloth worn by character while he moves in threeJS. If possible can you do one video for that?

[@andrewwoan]

Do you mean something like this? threejs.org/examples/?q=cloth#physics_ammo_cloth If so, it'll probably be easier with a physics engine. You can always write your own custom physics engine or shader too. Another alternative is to rig the cloth and weight paint it in blender and animate the character in blender and export the animation data. It depends on your specifics and technical requirements.

[@HumbleHustle101]

@@andrewwoan can you make a video in which you demonstrate animated cloth adorn by a character. Lets say in place of this guy wearing a hoodie there is a girl wearing a cloth like long skirt etc that has cloth like animation while she walks?

[@andrewwoan]

How realistic would you want it to be? If it's like a basic cloth movement, then mixamo will provide default weight paintings, it won't look realistic but it'll move according to the players legs/character rig. In this video the clothing does move a bit, but not in a realistic way@@HumbleHustle101

[@HumbleHustle101]

@@andrewwoan same as the animated cloth as shared on the threeJS website but adorn by the character in a way for instance if a female model has adorn long skirt then the cloth animation shall happen in realtime as the character walks or runs.

[@andrewwoan]

yeah that's physics. basically a bunch of math. can write a custom shader or such to interact with the other components of the mesh. it's pretty difficult, there might be libraries out there that make it easier idk, I've never worked with realistic cloth in the browser. You might want to consider using a game engine like unity or premade characters which have that all sorted out.

[@Sergei546]

very interersting yhk!

[@zhiweihuang6532]

Looking forward to better work to share, as there is very little knowledge content in this area of threejs right now, or you can make a tutorial for a fee, want to learn how to implement it

[@karlduckett]

Awesome work. Im pretty comfortable in Blender and not too shabby with Flask. But threejs scares me. What format do you export from blender that keeps all that texturing - and running so smoothly? Do you have threejs tutorials you would recommend?

[@andrewwoan]

Oh yeah, I highly recommend Bruno's course threejs-journey.xyz/, it's 95 dollars but trust me it is totally worth it. Other than that there are a few on youtube/udemy but they're not as extensive. The best part of this course is that you get to join a huge community of threejs/webgl developers which is already worth it. There are many free active communities too I can link you if you want to join them. It also depends on your learning preferences, a lot of people don't like videos. threejs.org/manual/#en/fundamentals this is a good text-based starting point. Although Bruno's course also has a text-based version!! Models are exported in GLB with DRACO compression. Textures are baked in 4K so I can reduce the quality later if needed, SimpleBake exports them as JPG by default, I don't change that, but I use that squoosh app to make the file sizes extremely small and adjust the quality till I can the size I like, and I convert it to any format I need. Usually I go from a 20mb texture to a 1mb 4k texture with only a small loss of quality. You can also go further and try basis, but honestly not really that beneficial that much anymore. There are many other in-game optimziation techniques too that I haven't implemented yet as well. For example cloning animations rather than loading baked animations which increases file sizes. I could also overlap my model UVs on one texture rather than having them take up more space on the texture. Although lighting information is saved, in many areas the lighting and colors are the same.

[@Cos3D]

@@andrewwoan hey is it possible to create a web online game with multiple rooms with players playing with one another, let's say league of legends but for the web. How is it possible to do this with three js when it's not game engine ? Would Babylon js be better ?

[@andrewwoan]

Yeah it's definitely possible and has been done a lot! Three.js and Babylon.js are both javascript libraries that go over the native browser API technology that allows high performant GPU utilization rendering of 3D graphics. So technically, if you knew GLSL, the coding language of shaders for the web/WebGL you could write your own three.js or babylon.js. So neither is really "better" in a sense, it's up to your goals. There are performance metrics and things like that, but really for most projects it doesn't matter at all. In terms of league of legends in the browser, you can make something similar, but there's no way currently to make it as detailed and in depth as downloadable league of legends. Browser's have a lot of limitations that downloaded things don't have. @@Cos3D

[@Cos3D]

thanks for the detailed answer@@andrewwoan

[@andrewwoan]

@@Cos3D no problem!!!

[@reyysdesign]

Hello pandawoan. Could you please tell me, is there any other way to render a realistic 3D model in three js rather than baking the texture manually ? My models look so much different in Blender vs in website without manual baking. And I see other developer just need a .glb without any .jpeg texture to render it and the result is exactly the same like in Blender

[@andrewwoan]

Yes there's lots of ways to do that, but it usually comes at the cost of performances.What is your exact goal? If the lighting doesn't change it might be better to bake and use compressed images. If you need real time lighting there are different kinds, some more realistic than others, like you can use an HDR image for lighting. Some are built in with three.js by default like directional and point light, or you can implement the lighting with your own GLSL code.

[@reyysdesign]

Okayy thank you for the reply, I think I'll keep using the baked texture

[@kawaicheung5808]

Hi, I have a question what happened with the 3D room tutorial video? I was going through it a while ago but haven't finished it and I was looking for it to finish the rest of the tutorial but couldn't find it anymore. Is there a way to view it again?

[@andrewwoan]

Hey I took it down per the original creator's request. If you'd like to watch it please email me [e-mail]. Just don't copy it and credit bokoko once you complete.

[@kawaicheung5808]

@@andrewwoan Thanks, I have send you an email

[@andrewwoan]

@@kawaicheung5808 Yep, thanks! Sent it over to you!

[@CodingAbroad]

Is it possible to make a fixed camera resident evil game in threejs?

[@andrewwoan]

Yeah absolutely!!!

[@torjohand.aleksandersen1297]

How did you handle collisions so well?

[@andrewwoan]

I used three.js octree! It's a very simple way to do collisions but works really well for small scenes. Here's a three.js official example using it: threejs.org/examples/?q=fps#games_fps Another really famous digital agency also used it!! www.awwwards.com/coastal-world-by-merci-michel-wins-site-of-the-month-august-2022.html The idea is you make a low poly mesh mapping out your boundaries and with a small few lines of code it works out of the box!! Just hide it from the user so they can't see the collision mesh.

[@kasali2739]

Hi! Did you Managed to Run more than 5 Players at once?

[@andrewwoan]

Yep!

[@abdelrahman5094]

will you support occlusion culling later ?

[@andrewwoan]

Probably not soon, three.js got a default in that works pretty well, custom would be too much work unless needed. Don't wanna spend time optimizing in advance.

[@futbolfeverr]

hey andrew loved this video!! btw I have a question and i have been trying hard to find the answer was wondering if you could help! I wanted to ask like how shall i practice three js to be good like you what shall I do after I learn all the basics ?? and how do I build complex scenes and make them functional?? I hope you answer thnx again for what you are doing

[@andrewwoan]

Being good is all about hours of trial and error and failing several times. That's all it was for me, I am nobody special. If you want the basics I recommend Bruno's course. But if you're short on money threejs.org/manual/#en/fundamentals this is a good place to start. Making a complex scene is no different from a small scene. Functional depends on what you mean. Like collision detection? Or like where you can animate objects?

[@futbolfeverr]

@@andrewwoan thnx andrew for the reply and by functionality I meant animation camera movement etc

[@andrewwoan]

@@futbolfeverr Did you have any kind of camera movement in mind specfically? For this video I used a custom set of OrbitControls from three.js. Here I update the target of the OrbitControls on each frame to look at the player position. That way it rotates around looking at my player at all times.

[@futbolfeverr]

@@andrewwoan now I am getting it and can we animate camera with gsap

[@futbolfeverr]

@@andrewwoan and btw I have bruno simons three js course what shall I do after I finish one tutorial and what shall I do ater I finish all the tutorials

[@user-hd3pz2ow1b]

cool

[@ares40004]

Amazing project, i am working on something similar. Do you take on projects?

[@andrewwoan]

I do take on a projects but it depends! Feel free to reach out to me at [e-mail]

[@ares40004]

Thanks, I've sent an email.

[@inteligenciafutura]

How many users does it allow at the same time?

[@andrewwoan]

I actually don't know. I think it's more capped at device capabilities and my backend tier plan right now. I've had 15 on there with no lag at one point. But I haven't stress tested it beyond that.

[@HuynhLuong227]

wow, really nice, you draw all in blender?

[@andrewwoan]

Yep!

[@HuynhLuong227]

@@andrewwoan wait your full tutorial.... hihi

[@projet3604]

OMG

[@nartz5361]

do you using unity too?

[@andrewwoan]

No, but there's this awesome tool called needle that converts unity to three.js!!

[@DakotaMills]

Please make a tutorial on how to do player items and how to save each players settings / items they are given from server to mysql database. Every tutorial uses ReadyPlayerMe witch is dumb. i want to have all sorts of items to sell to players. you should really consider making a Trading player to player system aswell. +1 sub

[@andrewwoan]

Ooh, sure I'll consider it. At a high level it's similar to making an e-commerce/2D game store, except events will happen with 3D interactions that emit events. Yeah, readyplayerme is just really convenient, otherwise I didn't want to use it either, but I did anyway lol. Maybe sometime in the future I will model my own characters. Thanks for the support and ideas!

[@xox14]

Great video! I am working on a mental health startup that leverages AI, I am a solo coder and I focus on the product side and AI but I have a team who helps me curate the theoretical side and the rest of the startup; I liked the purpose of this project and I was wondering if would you like to get in touch and potentially do a partnership/merge.

[@andrewwoan]

Sure feel free to email me at [e-mail] or add me on discord with my username pandawoan! We can discuss the details!

[@nguyentuantruong4815]

can you share source?

[@andrewwoan]

I was sharing it but I took it down, I'm trying to avoid issues with distributing the University logo. This is temporary though. Let me know if you have any specific questions, feel free to email me [e-mail]

[@nguyentuantruong4815]

@@andrewwoan I hope you will share the source again

[@andrewwoan]

@@nguyentuantruong4815 Yep, will do, just waiting for my uni to respond.

[@user-qf8it9sk2z]

create a course please, thanks to speak slowly, non fluents appreciate

[@andrewwoan]

Glad you found my voice clear!! Maybe one day I have time for a course lol.

[@AngelMove168]

Very interesting function