React Three Fiber Tutorial - Mesh Portal Material
Ғылым және технология
Let's build 3D portal worlds with React Three Fiber and the incredible MeshPortalMaterial from the Drei library!
We'll use BlockadeLabs amazing Skybox AI tool, to create the different monster worlds
Live demo
r3f-mesh-portal-material.verc...
Get the starter pack here 🔗
github.com/wass08/r3f-vite-st...
Final Code
github.com/wass08/r3f-mesh-po...
#threejs #r3f #portal
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
BlockadeLabs
www.blockadelabs.com/
Quaternius Ultimate Monsters Pack
quaternius.com/packs/ultimate...
Maath Library
github.com/pmndrs/maath
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:41 - Starter pack
01:09 - BlockadeLabs worlds
05:09 - Pocket Monsters?
08:31 - MeshPortalMaterial
10:58 - Refacto
15:46 - Text
19:11 - Enter into worlds
22:49 - Camera Controls
27:01 - Hover monster animation
30:48 - useCursor
31:28 - Final result
32:05 - Conclusion
▬▬▬▬▬▬ 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
Пікірлер: 83
Thx man, amazing content
@WawaSensei
4 ай бұрын
Happy to help! 🙏
Thanks for sharing this amazing tutorial! Suscribed!
@WawaSensei
6 ай бұрын
Thank you! Welcome aboard 🧑✈️
amazing
@WawaSensei
10 ай бұрын
🤗
Everything is incredible, the idea, the execution, but also the discovery of blockadeLabs and the 3D monster models which are great resources
@WawaSensei
Жыл бұрын
Thank you very much! I love to connect different tools and libraries to build nice projects! 🙌
this is so good
@WawaSensei
7 ай бұрын
🥰🤗
Thanks for sharing those beautiful ideas of yours!!
@WawaSensei
Жыл бұрын
Thank you, glad you like them 😍
boss, i love what you're doing with 3.js! thank you
@WawaSensei
Жыл бұрын
😎 thank you so much!
🙇♀️Wawa sensei this is game changer. Thank you for sharing!!
@WawaSensei
Жыл бұрын
🚀 MeshPortalMaterial enables tons of nice and crazy ideas, you're right 😍
This is such a cool demo! It's magical to see our 360s used in this novel way. Hope to see more like this on the web!
@WawaSensei
Жыл бұрын
Thank you very much for making this available to us! We're able to build awesome experiences with your tools 🙏
@blockadelabs
Жыл бұрын
@@WawaSensei Seeing people build experiences like this gets us really excited to keep pushing new features out the door to help creators even more!
Thank you. These are amazing tutorials. Great pacing on the content with enough explanation.
@WawaSensei
Жыл бұрын
Glad you like them! Thanks a lot for your feedback 🙏 Do you prefer it with this duration and pace or when I was condensing it to 10 minutes video but ultra fast explanations?
@karansayata7447
Жыл бұрын
@@WawaSensei Since I'm learning, and sometimes not familiar with a few new concepts, it's harder in the 10 min video. Ofcourse in the longer videos I can speed up the video, or skip some parts. So for me personally this length of video is great. But please decide according to channel goals and metrics that are important to you.
Awesome! Thanks for this
@WawaSensei
Жыл бұрын
Thanks to you for the support!
Wow, really nice work!!! I learned a lot of things with this video.
@WawaSensei
11 ай бұрын
Glad it was helpful! 🙌
you're the best teacher!! thank you so much for this amazing tutorial, i just finished my project and is working great!
@WawaSensei
5 ай бұрын
Happy to read it, Thank you so much! The best for your projects 🤗
This is amazing 😮, that portal project idea looks crazy
@WawaSensei
Жыл бұрын
I love this component, a tons of cool thing to do with! Did you give it a try for any idea?
@Venkatesh-vm4ll
Жыл бұрын
@@WawaSensei currently working on my saas project sir, I will do all project that you teach sir
awsome
@WawaSensei
Жыл бұрын
🙌
Thank you sensei!!
@WawaSensei
Жыл бұрын
❤️🙏 You're welcome, thanks to you
Damn WaWa! You done it again! Awesome video, bro keep it up.
@WawaSensei
Жыл бұрын
Thank you so much my friend! 🙌
Salut wawa, chouette ce tutos ! Merci
@WawaSensei
Жыл бұрын
Coucou, merci beaucoup Stephane !
cool tip about using the dev tools color picker ~
@WawaSensei
Жыл бұрын
Not the sexiest solution when desktop apps exist, but that's the simplest and the one I use 😊
I love your videos ! If you need ideas for your next build i would love to see something with sockets for a multiplayer experience.. Thank you for sharing your knowledge..!! ✌
@WawaSensei
Жыл бұрын
Thanks for the idea! I want to build something network related, I already experienced sockets with threejs and could be very cool right 😊 Any project in mind?
Very cool, thanks for the tutorial. If you wanted something coming out of the portal into the current world, how would you approach that? If you just place the object that is coming out of the portal in the current world with some positions that overlaps with the portal, it will be hidden when inside the portal. If you place it inside the actual portalmesh then it will look the way its supposed to until it comes out in the current world. And you can't see the object unless you have the camera directly in front of the portal..
@WawaSensei
2 ай бұрын
Thank you! I’d use two version, I guess one will disappear going behind the portal while the other appear in the portal (same in the other direction)
this is a cool implementation that could work with the new spatial features of VisionOS.
@WawaSensei
Жыл бұрын
Definitely! Need to try it on the simulator when I have some time 🙌
Спасибо за видео
@WawaSensei
Жыл бұрын
Большое спасибо!
woww!!
@WawaSensei
Жыл бұрын
🔥🚀
arigatou gozaimasu ✨
@WawaSensei
Жыл бұрын
どういたしまして🙏
Finally
@WawaSensei
Жыл бұрын
🔥
Hey Sensei! I keep getting the error Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'read-pkg-up' when running the gltfjsx cli command. I tried looking it up and installing the packages but I keep getting the same thing. How can i go about fixing this?
@WawaSensei
11 ай бұрын
Hey! Someone else got the issue on Discord yesterday! You can find a solution here github.com/vuejs/vue-cli/issues/1855#issuecomment-405066550
@ShatteredPersona
11 ай бұрын
Awesome thank you for the swift reply.@@WawaSensei for someone reason I was trying to global install 'read-pkg' but actually needed to global install 'read-pkg-up' and then did 'yarn global add read-pkg-up' and it worked! :D
hi, blend attribute MeshPortalMaterial is somhow not working... any idea if they have updated anything?
@WawaSensei
Жыл бұрын
Hum, I don't think so, what makes you think this? Maybe join the discord and share with us if you have issues 🙏
@INITart
Жыл бұрын
got it.. i was running on older version of fiber/drei 😅
hi everyone!!! anyone else is having problems when deploying in vercel that only appears blank.???
@WawaSensei
Жыл бұрын
Hey, what do you see in the console/network?
@yahirrodriguez3005
Жыл бұрын
@@WawaSensei hey sorry it was for the charging part of the work laptop, I already tested it on my personal laptop and it works. thaanks aloot
@WawaSensei
Жыл бұрын
@@yahirrodriguez3005 Glad to hear 🙌
do you know if you can make so the content cant be clicked on when you are not in the portal, so i can have clickable content like a link inside the portal? im using it to make my portfolio btw really cool video i learned so much
@WawaSensei
11 ай бұрын
Thanks a lot! What is your condition to go between inside the portal? Maybe you can use the same to enable/disable links
Hello, I clone your repository, but there are an awful lot of errors in chrome developer console --> THREE.Texture: Unable to serialize Texture. TREE.ImageUtils.getDataURL: Image converted to jpg for performance reasons THREE.BufferGeometry.toNonIndexed(): BufferGeometry is already non-indexed. RangeError: Invalid string length at JSON.stringify () ..... etc Can you advise how to remove these errors? Regards
@WawaSensei
6 ай бұрын
Hello, check the versions of r3f/drei you're using, very often it's where issues are coming from
@jarjav69
6 ай бұрын
@@WawaSensei in my project i'm working on, i update libraries daily, yes you are right, it is drei issue. thanks
Flying_Idle doesn't work
@WawaSensei
Жыл бұрын
"hello" I'm 99% sure you're trying to use this animation on one of the model that don't have that animation.
Thank You for these amazing videos and can you explain things little bit more? This would be more helpful for us .
@WawaSensei
Жыл бұрын
Thank you for your feedback, sure I'll try to detail more in the coming videos! 🙏
@alizaib.1
Жыл бұрын
@@WawaSensei Thanks Again
whats your setup yarn npm dosent work in my my vs code when i use your code.
@WawaSensei
10 ай бұрын
🤨 would need more info about the error you get Don't hesitate to join the Discord for this kind of issue
@Ranjeetsingh-ke9ez
10 ай бұрын
sunset library not found@@WawaSensei
@WawaSensei
10 ай бұрын
@@Ranjeetsingh-ke9ez please update the dependencies of Drei/React ThreeFiber and Three.js by following this one github.com/wass08/r3f-vite-starter/blob/main/package.json
Can you make a dedicated video about ScrollController Plzzz
@WawaSensei
Жыл бұрын
Hey, those two videos cover the ScrollControls did you watch them? kzread.info/dash/bejne/aqZs1NypaNeYkbA.html kzread.info/dash/bejne/ooykxc2BdKe0idI.html
Is it possible to do this with .fbx files too?
@WawaSensei
Жыл бұрын
Hey, sure! Only downside you won't have gltfjsx cli but you can load models and play animations with useFbx and useAnimations docs.pmnd.rs/react-three-fiber/tutorials/loading-models