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

  • @fernandoli6743
    @fernandoli67434 ай бұрын

    Thx man, amazing content

  • @WawaSensei

    @WawaSensei

    4 ай бұрын

    Happy to help! 🙏

  • @Leosc1986
    @Leosc19866 ай бұрын

    Thanks for sharing this amazing tutorial! Suscribed!

  • @WawaSensei

    @WawaSensei

    6 ай бұрын

    Thank you! Welcome aboard 🧑‍✈️

  • @coullax1
    @coullax110 ай бұрын

    amazing

  • @WawaSensei

    @WawaSensei

    10 ай бұрын

    🤗

  • @lucbruyant2832
    @lucbruyant2832 Жыл бұрын

    Everything is incredible, the idea, the execution, but also the discovery of blockadeLabs and the 3D monster models which are great resources

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Thank you very much! I love to connect different tools and libraries to build nice projects! 🙌

  • @nicholasbazzoni7084
    @nicholasbazzoni70847 ай бұрын

    this is so good

  • @WawaSensei

    @WawaSensei

    7 ай бұрын

    🥰🤗

  • @T00om
    @T00om Жыл бұрын

    Thanks for sharing those beautiful ideas of yours!!

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Thank you, glad you like them 😍

  • @stanleychukwu
    @stanleychukwu Жыл бұрын

    boss, i love what you're doing with 3.js! thank you

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    😎 thank you so much!

  • @sherryyang
    @sherryyang Жыл бұрын

    🙇‍♀️Wawa sensei this is game changer. Thank you for sharing!!

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    🚀 MeshPortalMaterial enables tons of nice and crazy ideas, you're right 😍

  • @blockadelabs
    @blockadelabs Жыл бұрын

    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

    @WawaSensei

    Жыл бұрын

    Thank you very much for making this available to us! We're able to build awesome experiences with your tools 🙏

  • @blockadelabs

    @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!

  • @karansayata7447
    @karansayata7447 Жыл бұрын

    Thank you. These are amazing tutorials. Great pacing on the content with enough explanation.

  • @WawaSensei

    @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

    @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.

  • @wahhaab7
    @wahhaab7 Жыл бұрын

    Awesome! Thanks for this

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Thanks to you for the support!

  • @devsmith948
    @devsmith94811 ай бұрын

    Wow, really nice work!!! I learned a lot of things with this video.

  • @WawaSensei

    @WawaSensei

    11 ай бұрын

    Glad it was helpful! 🙌

  • @isabel2793
    @isabel27935 ай бұрын

    you're the best teacher!! thank you so much for this amazing tutorial, i just finished my project and is working great!

  • @WawaSensei

    @WawaSensei

    5 ай бұрын

    Happy to read it, Thank you so much! The best for your projects 🤗

  • @Venkatesh-vm4ll
    @Venkatesh-vm4ll Жыл бұрын

    This is amazing 😮, that portal project idea looks crazy

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    I love this component, a tons of cool thing to do with! Did you give it a try for any idea?

  • @Venkatesh-vm4ll

    @Venkatesh-vm4ll

    Жыл бұрын

    @@WawaSensei currently working on my saas project sir, I will do all project that you teach sir

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r Жыл бұрын

    awsome

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    🙌

  • @holycow6935
    @holycow6935 Жыл бұрын

    Thank you sensei!!

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    ❤️🙏 You're welcome, thanks to you

  • @hauvert_
    @hauvert_ Жыл бұрын

    Damn WaWa! You done it again! Awesome video, bro keep it up.

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Thank you so much my friend! 🙌

  • @StephaneTmg
    @StephaneTmg Жыл бұрын

    Salut wawa, chouette ce tutos ! Merci

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Coucou, merci beaucoup Stephane !

  • @honefone
    @honefone Жыл бұрын

    cool tip about using the dev tools color picker ~

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Not the sexiest solution when desktop apps exist, but that's the simplest and the one I use 😊

  • @Christiancabp
    @Christiancabp Жыл бұрын

    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

    @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?

  • @mistabuzz5485
    @mistabuzz54852 ай бұрын

    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

    @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)

  • @guacamole456
    @guacamole456 Жыл бұрын

    this is a cool implementation that could work with the new spatial features of VisionOS.

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Definitely! Need to try it on the simulator when I have some time 🙌

  • @user-pr3oe9vz9y
    @user-pr3oe9vz9y Жыл бұрын

    Спасибо за видео

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Большое спасибо!

  • @sakibcoder
    @sakibcoder Жыл бұрын

    woww!!

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    🔥🚀

  • @Aimyoon
    @Aimyoon Жыл бұрын

    arigatou gozaimasu ✨

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    どういたしまして🙏

  • @muhammadawwab4402
    @muhammadawwab4402 Жыл бұрын

    Finally

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    🔥

  • @ShatteredPersona
    @ShatteredPersona11 ай бұрын

    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

    @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

    @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

  • @INITart
    @INITart Жыл бұрын

    hi, blend attribute MeshPortalMaterial is somhow not working... any idea if they have updated anything?

  • @WawaSensei

    @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

    @INITart

    Жыл бұрын

    got it.. i was running on older version of fiber/drei 😅

  • @yahirrodriguez3005
    @yahirrodriguez3005 Жыл бұрын

    hi everyone!!! anyone else is having problems when deploying in vercel that only appears blank.???

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Hey, what do you see in the console/network?

  • @yahirrodriguez3005

    @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

    @WawaSensei

    Жыл бұрын

    @@yahirrodriguez3005 Glad to hear 🙌

  • @lasseknudsen2722
    @lasseknudsen272211 ай бұрын

    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

    @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

  • @jaryk
    @jaryk6 ай бұрын

    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

    @WawaSensei

    6 ай бұрын

    Hello, check the versions of r3f/drei you're using, very often it's where issues are coming from

  • @jarjav69

    @jarjav69

    6 ай бұрын

    @@WawaSensei in my project i'm working on, i update libraries daily, yes you are right, it is drei issue. thanks

  • @hebaassy
    @hebaassy Жыл бұрын

    Flying_Idle doesn't work

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    "hello" I'm 99% sure you're trying to use this animation on one of the model that don't have that animation.

  • @alizaib.1
    @alizaib.1 Жыл бұрын

    Thank You for these amazing videos and can you explain things little bit more? This would be more helpful for us .

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Thank you for your feedback, sure I'll try to detail more in the coming videos! 🙏

  • @alizaib.1

    @alizaib.1

    Жыл бұрын

    @@WawaSensei Thanks Again

  • @Ranjeetsingh-ke9ez
    @Ranjeetsingh-ke9ez10 ай бұрын

    whats your setup yarn npm dosent work in my my vs code when i use your code.

  • @WawaSensei

    @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

    @Ranjeetsingh-ke9ez

    10 ай бұрын

    sunset library not found@@WawaSensei

  • @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

  • @badhonbiswas3751
    @badhonbiswas3751 Жыл бұрын

    Can you make a dedicated video about ScrollController Plzzz

  • @WawaSensei

    @WawaSensei

    Жыл бұрын

    Hey, those two videos cover the ScrollControls did you watch them? kzread.info/dash/bejne/aqZs1NypaNeYkbA.html kzread.info/dash/bejne/ooykxc2BdKe0idI.html

  • @streamingdev1163
    @streamingdev1163 Жыл бұрын

    Is it possible to do this with .fbx files too?

  • @WawaSensei

    @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

Келесі