React Three Fiber Tutorial - Custom Loading Screen

Поділитися
Вставка
  • Опубліковано 24 лип 2024
  • How to create a custom loading screen progression using threejs with React Three Fiber?
    In this tutorial, we will discover how to enhance our 3D experiences by showing a loader while the assets are loading. We'll also see how to be able to play audio automatically.
    We'll also discover how to load 3D models from the PMNDRS market including free 3D models and create animated randomized infinite background loops.
    Get the starter pack here 🔗
    github.com/wass08/r3f-loading...
    #threejs #r3f
    ▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
    My complete course to learn React Three Fiber
    lessons.wawasensei.dev/
    Link to the final result
    codesandbox.io/p/github/wass0...
    Link to the source code
    github.com/wass08/r3f-loading...
    PMNDRS Marketplace
    market.pmnd.rs/
    Loading documentation
    docs.pmnd.rs/react-three-fibe...
    React Three Fiber documentation
    docs.pmnd.rs/react-three-fibe...
    R3F Drei
    github.com/pmndrs/drei
    Three.js Journey.
    threejs-journey.com/
    I also have a discount code just for you to get -20%
    threejs-journey.xyz/join/wawa...
    ▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
    00:00 - Intro
    00:45 - ShowTime
    01:08 - Free 3D Models?
    01:40 - Run, Run faster!
    02:09 - Fake 3D movements
    05:45 - Loading Screen
    07:20 - Final result
    07:45 - Don't stop learning
    ▬▬▬▬▬▬ 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
  • Наука та технологія

КОМЕНТАРІ • 34

  • @codewithguillaume
    @codewithguillaume Рік тому +2

    Omg dude this video is just... So cool! So great ! Congratulations my friend.
    Love your progression :)

    • @WawaSensei
      @WawaSensei  Рік тому

      Thanks a ton! Means a lot coming from you 😍

  • @xxbondsxx
    @xxbondsxx Рік тому +1

    Ton of great concepts covered, thank you!

    • @WawaSensei
      @WawaSensei  Рік тому +1

      You're very welcome! Glad you appreciate it 🙌

  • @dcrecords100
    @dcrecords100 Рік тому +2

    Honestly, the explanation is on point and the topic is really good, I have yet to see someone tackle this subject! Congrats, you have a new subscriber, please keep up the good work!

    • @WawaSensei
      @WawaSensei  Рік тому

      Much appreciated! Will do my best to improve it over time 🙏

  • @AntonRuabicev
    @AntonRuabicev 4 місяці тому +2

    Thank you, you are very helpful. I wish you development and a lot of earnings from the students of your wonderful course.

    • @WawaSensei
      @WawaSensei  4 місяці тому

      Thank you so much for the kind words and support 🙏

  • @nivekdreamman3834
    @nivekdreamman3834 Рік тому +1

    as I am learning with bruno simon's threejsjourney also, your videos gives me strength to continue when I see your level... can't wait to build cool stuff like you do and more

    • @WawaSensei
      @WawaSensei  Рік тому +1

      Keep it up, Threejs Journey is gold to learn threejs and also react three fiber now!
      Thank you 🙌

  • @jesuslares607
    @jesuslares607 Рік тому +1

    You are wonderful for making this, thank you

    • @WawaSensei
      @WawaSensei  Рік тому

      No, you are wonderful for being so kind 🙌 thank you very much!

  • @nicholasruggeri
    @nicholasruggeri Рік тому +1

    Awesome work Sensei.

    • @WawaSensei
      @WawaSensei  Рік тому

      Thank you very much! I was afraid to receive comments such as "You're crazy" 🤣

  • @nicolasportu
    @nicolasportu Рік тому

    Outstanding!

  • @codebiz
    @codebiz Рік тому

    U're awesome bro 👏🔥

    • @WawaSensei
      @WawaSensei  Рік тому +1

      You are more awesome! Thank you very much 😍

  • @WawaSensei
    @WawaSensei  Рік тому +2

    "We can see the tree is moving" when the lamp is moving 👀
    I should get some rest 🤣

  • @Venkatesh-vm4ll
    @Venkatesh-vm4ll Рік тому

    Awesome

  • @HuynhLuong227
    @HuynhLuong227 Рік тому

    great, r3f is amazing. I think in the future, you can make one game and move it when press keyboard. auto create barrier(gift, cake, apple...) and eat it when touch.

    • @WawaSensei
      @WawaSensei  Рік тому +1

      Hey, it definitely is!
      Yeah right, I plan to make a r3f video game tutorial very soon 🙌

    • @HuynhLuong227
      @HuynhLuong227 Рік тому

      @@WawaSensei glad happy, hope see you soon, love your videos.

  • @sagar5547
    @sagar5547 Рік тому

    Hello sir, i am very fascinated by your three.js videos and trying to learn three.js but i couldn't find any better videos to learn three.js from beginning. Can you please make a video on this three.js tutorial from begginer to advance level

    • @WawaSensei
      @WawaSensei  Рік тому +1

      Hey, thank you very much, I'm preparing a paid course that covers the basic. But I might do a condensend free video on the channel too 🙏

  • @jaydeest
    @jaydeest Рік тому

    Tonki Donki is just trying to have a good time man

    • @WawaSensei
      @WawaSensei  Рік тому +1

      Exactly! Free Tonki Donki!!! 🤣

  • @sakibcoder
    @sakibcoder Рік тому

    Great! I cloned your repository, Started server. now I don't know what to do😵 never used Threejs.

    • @WawaSensei
      @WawaSensei  Рік тому

      Thanks!
      As this one goes very fast and suppose you have the basics with threejs I recommend you to start with the first R3F tutorial I made on the channel, it's available here :
      ua-cam.com/video/LNvn66zJyKs/v-deo.html

    • @sakibcoder
      @sakibcoder Рік тому

      ​@@WawaSensei thanks for the recommendation, I will check out.

    • @WawaSensei
      @WawaSensei  Рік тому

      @@sakibcoder