No video

React Three Fiber & Three.js - Textures Explained

Hi there 🙋‍♂️
Want to create a realistic 3D scene in the browser? In this video, different texture types will be explained which can make your objects look more realistic. We will discuss the most used textures: the color/diffuse, displacement, normal, ambient occlusion, roughness, metalness and alpha texture. We will also implement all of them and tweak their values in the browser using three.js, react three fiber and LEVA.
This channel is meant to help you start developing 3D websites. The videos are meant to be short and educational. Make sure to subscribe in case you want to learn more about developing 3D websites!
---
🔗 LINKS MENTIONED IN THE VIDEO
3️⃣ Starting code: github.com/sjoerdvanBommel/yo...
3️⃣ Code from video: github.com/sjoerdvanBommel/yo...
3️⃣ Poly Haven: polyhaven.com/
---
📹 OTHER VIDEO'S
3️⃣ React Three Fiber Camera's Explained: • React Three Fiber Came...
3️⃣ React Three Fiber & Three.js Geometries Explained: • React Three Fiber & Th...
3️⃣ Learn to debug your UI real time using LEVA: • Learn to debug your UI...
3️⃣ Showcase your 3D model in the web using three.js, react three fiber, react three drei and gltfjsx: • Showcase your 3D model...
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: / threeveloper
3️⃣ Twitter: / threeveloper
3️⃣ LinkedIn: / sjoerd-van-bommel-8a23...
---
⏲ TIMESTAMPS
00:00 Introduction
00:28 Download textures
00:51 Explain downloaded textures
02:12 Setup 3D scene
02:48 Apply color texture
03:10 Apply displacement texture
05:12 Apply ARM texture
06:14 Apply normal texture
06:39 Apply alpha texture
07:09 Play with texture values
08:00 Debug texture related properties with LEVA
10:19 Outro
---
❌ DON'T CLICK HERE
shorturl.at/mqtCR
Got you there ;)

Пікірлер: 29

  • @Ibrahim-oc5ql
    @Ibrahim-oc5ql Жыл бұрын

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

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

    honestly, just an incredible video 🙇

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

    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

    Жыл бұрын

    That's awesome! Glad it helped 😉

  • @LewisRidyard
    @LewisRidyard2 жыл бұрын

    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 🙌

  • @sergeisumarokov
    @sergeisumarokov2 жыл бұрын

    Top explanation!

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

    Thanks you very much!

  • @amr.3k
    @amr.3k2 жыл бұрын

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

  • @threeveloper

    @threeveloper

    2 жыл бұрын

    Great to hear that, thank you ✌️

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

    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

    Жыл бұрын

    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 😄

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

    This video is great. Thanks !

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Glad it helped! :)

  • @serychristianrenaud
    @serychristianrenaud2 жыл бұрын

    Thanks ...

  • @TotallyNotZoid
    @TotallyNotZoid9 ай бұрын

    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

    9 ай бұрын

    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

  • @patrix4746
    @patrix47462 жыл бұрын

    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 жыл бұрын

    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 (kzread.info/dash/bejne/o42fw7WdnK-7ZbA.html) I already explained some basics about passing props, you might like that one if you haven't seen it already 😉

  • @patrix4746

    @patrix4746

    2 жыл бұрын

    @@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 жыл бұрын

    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 Жыл бұрын

    goed gedaan meneer

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Dankjewel Josh 😉 haha

  • @xThree65x
    @xThree65x2 жыл бұрын

    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 Жыл бұрын

    Nice video, you know how i make hair?

  • @threeveloper

    @threeveloper

    Жыл бұрын

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