React Three Fiber Tutorial - Mesh Portal Material
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Everything is incredible, the idea, the execution, but also the discovery of blockadeLabs and the 3D monster models which are great resources
Thank you very much! I love to connect different tools and libraries to build nice projects! 🙌
Thanks for sharing those beautiful ideas of yours!!
Thank you, glad you like them 😍
Thank you. These are amazing tutorials. Great pacing on the content with enough explanation.
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?
@@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.
boss, i love what you're doing with 3.js! thank you
😎 thank you so much!
Damn WaWa! You done it again! Awesome video, bro keep it up.
Thank you so much my friend! 🙌
This is amazing 😮, that portal project idea looks crazy
I love this component, a tons of cool thing to do with! Did you give it a try for any idea?
@@WawaSensei currently working on my saas project sir, I will do all project that you teach sir
🙇♀️Wawa sensei this is game changer. Thank you for sharing!!
🚀 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!
Thank you very much for making this available to us!
We're able to build awesome experiences with your tools 🙏
@@WawaSensei Seeing people build experiences like this gets us really excited to keep pushing new features out the door to help creators even more!
Wow, really nice work!!! I learned a lot of things with this video.
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!
Happy to read it, Thank you so much! The best for your projects 🤗
Awesome! Thanks for this
Thanks to you for the support!
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..!! ✌
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?
Salut wawa, chouette ce tutos !
Merci
Coucou, merci beaucoup Stephane !
Thx man, amazing content
Happy to help! 🙏
cool tip about using the dev tools color picker ~
Not the sexiest solution when desktop apps exist, but that's the simplest and the one I use 😊
Thank you sensei!!
❤️🙏 You're welcome, thanks to you
this is so good
🥰🤗
this is a cool implementation that could work with the new spatial features of VisionOS.
Definitely! Need to try it on the simulator when I have some time 🙌
amazing
🤗
awsome
🙌
Спасибо за видео
Большое спасибо!
Thanks for sharing this amazing tutorial! Suscribed!
Thank you! Welcome aboard 🧑✈️
woww!!
🔥🚀
Finally
🔥
arigatou gozaimasu ✨
どういたしまして🙏
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..
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)
Thank You for these amazing videos and can you explain things little bit more? This would be more helpful for us .
Thank you for your feedback, sure I'll try to detail more in the coming videos! 🙏
@@WawaSensei Thanks Again
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
Thanks a lot!
What is your condition to go between inside the portal? Maybe you can use the same to enable/disable links
Can you make a dedicated video about ScrollController Plzzz
Hey, those two videos cover the ScrollControls did you watch them?
th-cam.com/video/8r8rzp8t2aM/w-d-xo.html
th-cam.com/video/pXpckHDDNYo/w-d-xo.html
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?
Hey! Someone else got the issue on Discord yesterday! You can find a solution here github.com/vuejs/vue-cli/issues/1855#issuecomment-405066550
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 everyone!!!
anyone else is having problems when deploying in vercel that only appears blank.???
Hey, what do you see in the console/network?
@@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
@@yahirrodriguez3005 Glad to hear 🙌
hi, blend attribute MeshPortalMaterial is somhow not working... any idea if they have updated anything?
Hum, I don't think so, what makes you think this?
Maybe join the discord and share with us if you have issues 🙏
got it.. i was running on older version of fiber/drei 😅
Is it possible to do this with .fbx files too?
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
whats your setup yarn npm dosent work in my my vs code when i use your code.
🤨 would need more info about the error you get
Don't hesitate to join the Discord for this kind of issue
sunset library not found@@WawaSensei
@@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
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
Hello, check the versions of r3f/drei you're using, very often it's where issues are coming from
@@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
"hello"
I'm 99% sure you're trying to use this animation on one of the model that don't have that animation.