Build a 3D Portfolio with React Three Fiber - Blender Baking

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 🔗
github.com/wass08/r3f-vite-st...
Our main inspiration for the final portfolio
david-hckh.com/
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Final source code
github.com/wass08/r3f-portfol...
Poly Haven PBR Textures
polyhaven.com/textures
polyhaven.com/a/dark_wooden_p...
Blender
www.blender.org/
Blender Donuts Tutorial
• Blender 3.0 Beginner T...
Blender Room tutorial
• Room Blender Tutorial ...
Free 3D Assets
poly.pizza/
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
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
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev

[@hauvert_]

again, another awesome upload! keep them coming!

[@WawaSensei]

Thank you very much! Will do!

[@Venkatesh-vm4ll]

Thank you for teaching blender baking, i really need this , thank you for helping

[@WawaSensei]

You're welcome buddy! 😍 Hope my explanations are clear, it was a pretty tough exercise for me (and my laptop 🤭)

[@user-xd6rl5pq3m]

I had never seen a portfolio that contains exactly what I am doing, the only thing you have done that can surpass me even more and that is fun for me and you teach in a great way, that I am sure I will get a lot of knowledge of 3d and that makes me so excited because in such a way it amuses me, Thank you for helping me overcome myself and for posting these videos that are like gold to me. Best regards

[@WawaSensei]

Thanks a lot, so happy to read such comment! Wish you the best for 2024 🙏

[@donalddumb8648]

Great tutorial, had some problems because it’s my first time on blender but I learned a lot and the result looks amazing 👍👍

[@user-bl7bd9xk2l]

Thanks, good tutorial, I'm going to try it right now. 💪

[@WawaSensei]

Hope you like it, thanks!

[@irfansaeedkhan7242]

wow just wow thank you so much

[@taofeek-bakare]

Enjoying it🎉

[@WawaSensei]

🙌 that's one of the most difficult for me.. thank you, first time I share my poor blender skills!

[@sleeping_dragon]

incredible

[@WawaSensei]

🙏

[@honefone]

if you have a graphics card, it's powerful and faster to choose GPU in the render settings, instead of CPU. this will speed up your baking a lot.

[@WawaSensei]

Right! On my M1 Max I couldn't feel a difference but depending on people CPU/GPU combination it can be a good idea to try both 🙏

[@carlosmontes7088]

Hi! Thanks for this tutorial, I was searching a portfolio like this! I have two questions please. 1- How you deploy the floating menu in the 5:02 minutes, Where I have to click? 2- How I can resize the palm beach, where I have to click please?

[@WawaSensei]

Hey, you're welcome! You should see the shortcuts on the bottom left of my screen (until first tier of the video when I forgot to put it back 😭) tell me if that helps 🙌

[@davidho3628]

What are the differences between exporting the gltf with the texture in it and exporting the gltf without texture and loading it later in the code? Does it help improving the efficiency of the application?

[@WawaSensei]

There's no app performance gain to export with or without the baked texture, as it's still an image loaded and applied the same way. BUT for a seamless workflow, it's way easier to connect our texture in code, while not assigning it in Blender. If not we would need to disconnect and switch between material and image texture everytime we want to do modifications then bake it again. About the texture I don't export, it's to avoid to onboard the PBR textures while we don't use it in our 3D projects (we only use our single relatively small size baked texture image)

[@alexandervan-nugent2964]

Hey Wawa Sensei! Love the videos! I am running into an issue where after I create the final bake file where the UV maps are "lego'd" into one image, when I load it into my vscode and see my localhost none of the models are picking up the individual textures. It just lays flat across the entire scene. Any ideas on what to do?

[@WawaSensei]

Hey, did you re-export your scene into gltf after doing the process of UV editing to bake in Blender? As you changed the UV, you need to export again to have the updated UVs in the gltf file data (if you still have issues join the Discord to get some help 🙌)

[@WawaSensei]

Oh, and thank you very much for your kind word 🙏

[@user-em8oh5nh8n]

Did you manage to solve it? I'm having this issue as well. :(

[@marcellkey]

any updates?

[@sanad4790]

nice

[@WawaSensei]

Thanks 🥰

[@user-jo4tr6zp5n]

Hey Wawa! I love your videos, But when I open the blender file there is a problem with textures. The walls and floor are pink

[@WawaSensei]

Hey, sorry for late reply! Can you join the Discord community and provide some screenshots? I'll check it out!

[@user-ri5ou2lj4p]

Sir, my textures get all distorted when i export them to web even though i have the correct uv mapping

[@WawaSensei]

Hey please share more info on the Discord. Like screenshots, how many uvs on the mesh causing issue, the texture, ...

[@user-ri5ou2lj4p]

@@WawaSensei okay i will

[@artoriasdenostradamus3628]

where is the room blender scene file ?

[@WawaSensei]

Hey, you can find it in the blender folder in the Github repository github.com/wass08/r3f-portfolio-baking/tree/main/blender

[@josephikinda7174]

Hello! i'm doing the cmd gltfjsx but it's not working

[@WawaSensei]

Hey Joseph, join us on the Discord and show us the result you get when you try running the command 🙏

[@josephikinda7174]

@@WawaSensei et je peux le lien de la discord svp?

[@WawaSensei]

@@josephikinda7174 c'est dans la description de chaque vidéo 🙏

[@harimohan_choudhary_6]

How we can add face expression ?

[@WawaSensei]

Hey, you have the blend shapes information from Ready Player Me avatars here : docs.readyplayer.me/ready-player-me/api-reference/avatars/morph-targets/oculus-ovr-libsync And to use it I cover blend shapes in this tutorial kzbin.info/www/bejne/b5ubhGObi6mKpM0

[@WawaSensei]

PS: I gave it a try and it's pretty cool that will be this Friday video 🤭

[@harimohan_choudhary_6]

@@WawaSensei waiting for your next video. Thank you for sharing ❤

[@Andrew-Tsegaye]

Sensei, where do we meet you to suggest and idea? Many developer like me hate spending their time building 3D objects from scratch, I highly suggest you to code not build everything from scratch show as the final end point!

[@WawaSensei]

Hey, you can join the discord for it! I don't model, if you jump to the part of 3D models, you can see I use free 3d models. This baking part in blender is quite useful for developers (if you don't have 3d modelers at disposal) Thanks for your feedback buddy 🙏

[@Andrew-Tsegaye]

@@WawaSensei please, after completing the entire website combine all videos in one, which helps us to saves our time and figure out how to project would be very easily.

[@user-xd6rl5pq3m]

Blender is perfect for it but you can add "plugins" customizable and it permited building edifices the a easy form . Sorry if my english is very bad , I cost writing , thank you.

[@Pmarmagne]

Charmender. The name of Salamèche in English is Charmander 😆😆

[@WawaSensei]

🤭 hahaha nice Pokemon culture! Why did we translate Pokemon names in the first place 🤭

[@kiritoyuno6145]

me with zero blender skill and knowledge

[@WawaSensei]

You know... I'm not a Blender expert neither, I think going through the very basics (kzbin.info/www/bejne/pHrSiYKmobqpd9k) should allow you to follow this tutorial 🙏

[@tejasmundhe8773]

i like your content but pleasen teach from basics....

[@WawaSensei]

Thanks, will do 🙏

[@pulkitmathur9379]

Really really helpful

[@WawaSensei]

Thank you so much, glad it helps 🙌