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: https://github.com/sjoerdvanBommel/yo...
3️⃣ Code from video: https://github.com/sjoerdvanBommel/yo...
3️⃣ Poly Haven: https://polyhaven.com/

---

📹 OTHER VIDEO'S
3️⃣ React Three Fiber Camera's Explained:    • React Three Fiber Camera's Explained  
3️⃣ React Three Fiber & Three.js Geometries Explained:    • React Three Fiber & Three.js Geometri...  
3️⃣ Learn to debug your UI real time using LEVA:    • Learn to debug your UI real time usin...  
3️⃣ Showcase your 3D model in the web using three.js, react three fiber, react three drei and gltfjsx:    • Showcase your 3D model in the web usi...  

---

📫 CONTACT ME
3️⃣ GitHub: https://github.com/sjoerdvanBommel
3️⃣ Instagram:   / threeveloper  
3️⃣ Twitter:   / threeveloper  
3️⃣ LinkedIn:   / sjoerd-van-bommel-8a232914a  

---

⏲ 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
https://shorturl.at/mqtCR
Got you there ;)