React Three Fiber & Three.js - Textures Explained

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 29

  • @timetosleep8055
    @timetosleep8055 2 роки тому +3

    Holy, this video is so good! Everything in threejs makes more sense after spending 6 weeks in blender nonstop and using your videos. Thanks!

    • @threeveloper
      @threeveloper  2 роки тому

      That's awesome! Glad it helped 😉

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

    I'm coming here from a rabbit-hole I dug myself into while solving an advent-of-code challenge.
    Your video is excellent for beginners like me to understand what's going on with texture maps. Well done!

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

      😂 But did you solve it in the end?

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

      Haha, not yet. Got sidetracked and had a lot of fun learning about 3d rendering etc. The task itself wouldn't be too hard to solve manually (you have to wrap a 2d net into a 3d cube and "walk" on it). But I wanted to avoid entering all the transitions by hand. You know, spending several days to automate something in order to avoid manual stuff ;-)

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

      @@flwi Oh that sounds like quite a challenge! Thanks for the nice messages btw :)
      And yeah, I know the drill, unfortunately this automated script will only be used once for the advent-of-code challenge 😄

  • @Ibrahim-oc5ql
    @Ibrahim-oc5ql Рік тому +2

    Mate this is gold! I hope you have a great day

  • @jarvisprestidge
    @jarvisprestidge 2 роки тому +2

    honestly, just an incredible video 🙇

  • @LewisRidyard
    @LewisRidyard 2 роки тому +2

    This is a great primer on how to start working with textures in R3F. Bonus points for leveraging drie and leva 👏Looking forward to the next one!

    • @threeveloper
      @threeveloper  2 роки тому

      Great to hear that you liked it! Thanks for the positive feedback 🙌

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

    This is the best video for texture explanation i have ever seen. I have a question about it, if i have my custom 3d model, how would i update it's texture? Maybe a video about using already existing 3d models and manipulating them would be a good idea for you to make.

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

      Nice idea! To answer your question; it's probably best to use 3D modeling software in that case, like blender :) It will be hard to do that programmatically

  • @amr.3k
    @amr.3k 2 роки тому +1

    I learnt so much in those 10 minutes.
    Thanks a lot

    • @threeveloper
      @threeveloper  2 роки тому

      Great to hear that, thank you ✌️

  • @sergeisumarokov
    @sergeisumarokov 2 роки тому +1

    Top explanation!

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

    This video is great. Thanks !

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

    Thanks you very much!

  • @patrix4746
    @patrix4746 2 роки тому +1

    Hi there. Such great videos. Keep up the great work! A reflection: I've been doing Three.js and became interested in r3f because I have some React experience and could see the benefits. However it's been a struggle because I realized I didn't understand React and especially hooks as well as I thought and how to utilize the rf3 custom hooks and props. But having overcome that I really see the benefits of making threejs content this way. Something I had a hard time to understand and that perhaps could be part of a video is how to pass and use props. Especially the children prop. It's really crucial to understand when making custom r3f components but not explained very well. Edit: I now understand that props.children is a fundamental React concept. Perhaps a React-three-fiber tutorial series for Three.js developers is an idea? I think many threejs developers could up their game if they got the declarative programming style of React.

    • @threeveloper
      @threeveloper  2 роки тому +1

      Hey Patrix. Thanks for your feedback once again and thanks for the suggestion. I'm definitely planning to create some more videos about that: at least one where I'll go deeper into the possibilities of react three fiber and one where I'll convert a three.js project to react three fiber. After your feedback, maybe I'll convert a bit bigger project and make it a serie of videos where I also explain some react concepts. Will think about that, thanks! 🙏
      Oh and by the way, in this video (ua-cam.com/video/qYkaSdlLU5M/v-deo.html) I already explained some basics about passing props, you might like that one if you haven't seen it already 😉

    • @patrix4746
      @patrix4746 2 роки тому +1

      @@threeveloper I've watched all your videos and they're great! :-) I think my problem is not being able to "think in React" because I've worked too much with Three.js For example i messed around with useEffect and useRef to get the mouse to move an object before I realized that all I had to do was get the mouse movement from useThree and put the value directly into the props :-) And the children prop was an epiphany as well even though I've been using it a lot in regular React apps. It's like I go "this is Threejs" when doing r3f and forgetting it's React too :-) And I think quite a few stick to Threejs because they can't wrap their head around r3f. I'm glad I did though because the benefits are huge.

    • @threeveloper
      @threeveloper  2 роки тому +1

      Glad you like it so much! There will also come a video one day about interaction in react three fiber, where I'll handle mouse events etc in r3f ✌️
      Please keep commenting your ideas in the future if you any, it makes it possible for me to listen to my audience and it's motivating and helping a lot as well! 😉🙏

  • @joshvanderwaay1080
    @joshvanderwaay1080 2 роки тому +1

    goed gedaan meneer

  • @serychristianrenaud
    @serychristianrenaud 2 роки тому +1

    Thanks ...

  • @xThree65x
    @xThree65x 2 роки тому +1

    How do you repeat a texture on a mesh? When your textures are setup in an array like you show @ 3:41?

    • @threeveloper
      @threeveloper  2 роки тому

      Hi xThree65x, I'm not sure if I understand your question correctly, but I'll try to answer it. Creating an array of textures can be done by passing a string array as an argument. If you want to repeat the texture on your mesh, you'll have to set the second argument which is a callback function on load of the texture. You can there use the texture and set it's 'wrapS', 'wrapT' and 'repeat' properties.
      Hopefully that helped? Please let me know 😋✌️

  • @crowbr
    @crowbr 2 роки тому +1

    Nice video, you know how i make hair?

    • @threeveloper
      @threeveloper  2 роки тому

      How to make hair in three.js? I'd recommend using 3D modelling software for that and import the model