Build a Multiplayer Game Lobby with R3F & Playroom

Let's learn how to make a 3D Multiplayer Car Game with JavaScript with React Three Fiber and Playroom
Playroom Documentation
docs.joinplayroom.com/
🚀 Learn React Three Fiber with my complete course ✨
lessons.wawasensei.dev/course...
Starter pack 🔗
github.com/wass08/r3f-vite-st...
Final code 🔗
github.com/wass08/r3f-playroo...
Demo 🔗
r3f-playroom-lobby-car-protot...
#threejs #developer #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
3D Models: Kenney Car Kit
www.kenney.nl/assets/car-kit
3D Models: Kay Lousberg City Builder Bits
kaylousberg.itch.io/city-buil...
Toolbox poly.pizza/m/bNqhcgTSc_E
Toolbox2 poly.pizza/m/20JcnkCnbAc
Workbench poly.pizza/m/24I9X8aeWTR
Cone poly.pizza/m/WoXpAJT0oDn
Tires poly.pizza/m/mmq7GmG1AK
Shelf poly.pizza/m/6gKdASmfB9U
Audio Soundbank
soundeffect-lab.info/sound/ma...
Generate Images With AI
app.leonardo.ai/
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:23 - Project setup
01:55 - Lobby 3D scene
07:48 - Custom Playroom Lobby
10:21 - Responsive Camera
13:58 - Car selection
23:28 - Username editor
27:21 - Car switching animation
30:37 - Light & Camera dynamism
31:48 - Invite button
33:03 - Private game & matchmaking
37:35 - Game city map
39:16 - Physics World w/ Rapier
40:46 - Multiplayer car controller
48:53 - Mobile development mode
50:40 - ありがとう
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev

[@boshen3953]

Can't wait to see what you have in store for us!

[@WawaSensei]

😍 Coming this Friday, wish you'll like it!

[@deathmukh81]

Man this is amazing!

[@WawaSensei]

Thanks a ton!

[@irfansaeedkhan7242]

Top quality content, even paid courses cannot beat that

[@WawaSensei]

Thank you so much, glad you appreciate my teaching style 🙏

[@marcabbey6649]

Go Wawa!! 🎉

[@WawaSensei]

🥰

[@piggybank1385]

GOAT as always

[@WawaSensei]

🐐 Thank youuu

[@julianvelez6563]

wow bro awesome work bro you are the best bro

[@WawaSensei]

Hey buddy, thanks a lot as always for your huge support 🙌

[@jimmyroserovallejo]

Best regards, I would like to know in which tutorial you teach about coalitions, in the shooter project or in general, I would like a pop-up window to appear when my character collides with an obstacle on the stage, or when he collides with an item his life can increase. I don't know if I explained it well, if you could be so kind as to guide me or have a video on your channel that explains it, I would appreciate it.

[@WawaSensei]

Hello, I teach about the basics of Physics and collisions in this video ua-cam.com/video/OpYtwrtpePY/v-deo.html or in my course here lessons.wawasensei.dev/courses/react-three-fiber/lessons/physics

[@jimmyroserovallejo]

@@WawaSensei I'm actually watching that video, unfortunately I don't have the budget to purchase your course, but it would be interesting if you have more time to make a 3D video game where you have to hit obstacles, earn points, collect others, have more dynamic things, the one in the video game shots gave me a basic idea, but when I interact with the map it still doesn't work for me, I'm investigating the documentation, anyway, thank you very much for your contributions. Greetings from Latin America.

[@londelidess]

These days, I came up with triplex which is react three fiber’s visual editor.
I wanna hear your insights on it.

[@WawaSensei]

Nice, I'm in contact with Triplex creator! I find it very useful, can easily replace Blender and save a lot of time for fine tuning props like positions, rotations, and colors to compose 3D scenes

[@londelidess]

@@WawaSensei Of course you know and you already have contact with him. I hope you use it one day and teach us.

[@Inspire-rq8hm]

Could you make a video explaining how to publish one of your vite + react projects?

[@lauracamellini7999]

Maan you go to Netlify of vercel docs and ask the question, sensei is for 3D inspiration only ✨

[@WawaSensei]

Hey, I show how to deploy it on in this video ua-cam.com/video/73XOJlLhhZg/v-deo.html (and yes Netlify or Vercel are quite plug & play otherwise)

[@jesustzinon]

does anyone knows how to know who is the host in the game? or lobby? i know there is a hook for it but am unable to set a single state for a player that IS the host, so every one knows who is the host

[@WawaSensei]

In a useEffect if isHost you can set a multiplayer state with the player host info

[@jesustzinon]

@@WawaSensei yeah what i did was exactly just that and on the list am rendering the player list am filtering the host one, and just render the player card component before the map, thank so much

[@yaaaayeet745]

Damn 🧐

[@WawaSensei]

Thanks!