Build a 3D Portfolio with React Three Fiber - Blender Baking
29.2 هزار بار بازدید -
پارسال
-
Let's continue building our 3D
Let's continue building our 3D portfolio with Three JS and React Three Fiber in the style of David Heckhoff.
In this second chapter, we will:
- create an office room with Blender
- furnish it with free 3D assets
- load it into our threejs scene
- bake the lights and shadows into one single texture
- use this texture in our react three fiber project
Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...
Our main inspiration for the final portfolio
https://david-hckh.com/
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
Final source code
https://github.com/wass08/r3f-portfol...
Poly Haven PBR Textures
https://polyhaven.com/textures
https://polyhaven.com/a/dark_wooden_p...
Blender
https://www.blender.org/
Blender Donuts Tutorial
Blender 3.0 Beginner Tutorial - Part 1
Blender Room tutorial
Room Blender Tutorial With Commentary
Free 3D Assets
https://poly.pizza/
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:10 - 3D Modeling
04:25 - Furnish the office
06:36 - Rendering explanation
07:57 - PBR Textures
10:56 - Image texture creation
12:54 - First item bake
18:10 - Load baked textured scene in r3f
25:55 - Preparing all materials
30:45 - Lightmap unwrapping
37:50 - Bake all objects
39:59 - Multiple UV Maps
46:33 - Normals fix (face direction)
49:15 - Optimized unwrapping
55:00 - Pack all items into the final texture
58:42 - Final bake
01:00:18 - Minor fixes
01:01:49 - Glass material
01:02:37 - Adjustment results
01:03:23 - Fix chair
01:08:58 - Final result
01:09:18 - Conclusion
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
@wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
In this second chapter, we will:
- create an office room with Blender
- furnish it with free 3D assets
- load it into our threejs scene
- bake the lights and shadows into one single texture
- use this texture in our react three fiber project
Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...
Our main inspiration for the final portfolio
https://david-hckh.com/
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
Final source code
https://github.com/wass08/r3f-portfol...
Poly Haven PBR Textures
https://polyhaven.com/textures
https://polyhaven.com/a/dark_wooden_p...
Blender
https://www.blender.org/
Blender Donuts Tutorial
Blender 3.0 Beginner Tutorial - Part 1
Blender Room tutorial
Room Blender Tutorial With Commentary
Free 3D Assets
https://poly.pizza/
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:10 - 3D Modeling
04:25 - Furnish the office
06:36 - Rendering explanation
07:57 - PBR Textures
10:56 - Image texture creation
12:54 - First item bake
18:10 - Load baked textured scene in r3f
25:55 - Preparing all materials
30:45 - Lightmap unwrapping
37:50 - Bake all objects
39:59 - Multiple UV Maps
46:33 - Normals fix (face direction)
49:15 - Optimized unwrapping
55:00 - Pack all items into the final texture
58:42 - Final bake
01:00:18 - Minor fixes
01:01:49 - Glass material
01:02:37 - Adjustment results
01:03:23 - Fix chair
01:08:58 - Final result
01:09:18 - Conclusion
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
@wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
پارسال
در تاریخ 1402/03/12 منتشر شده
است.
29,285
بـار بازدید شده