Create an Award-Winning Home Office Portfolio with Three.js, Blender, and React | Rapid Prototyping

Video Description

Learn how to create a home office portfolio with three.js and Blender. This video covers routing when working with 3D scenes which is really really tedious haha. I also introduce the concept of rapid prototyping!! Notice also I didn't do any seam marking for UV unwrapping like I did in my previous video and the result still had a pretty good quality!! Other than a few moving UVs around the work was very minimal for a decent result. Live site: https://daniels-architects.com/ IMPORTANT When baking you typically want to go for .01/.008 because 4096*.008 ≃ 32, I think I did .003 which is a bit too small. If you have UVPackmaster3 you can set a pixel margin, if you're at 4k it should be 32px, at 2k it should be 16px, 1k at 8px etc. Obviously it depends on your use case, but those are recommended ranges!! YOU HAVE TO PUT THE "FLAT" PROPERTY ON YOUR CANVAS NOW FOR RECENT VERSIONS OF THREE.JS: https://r3f.docs.pmnd.rs/api/canvas ALSO BLENDER 4.5 IS OUT DOWNLOAD IT VULKAN IS FASTER THAN OPEN GL (usually)! 1:23:55 Sorry instancing is actually much easier if you use React Three Drei's instance wrapper, I didn't know this existed because I usually work in vanilla three.js than R3F. Check it out here: https://drei.docs.pmnd.rs/performances/instances Code, credits, Blender file, updates, fixes: https://github.com/andrewwoan/daniels-home-office-portfolio Asset pack referall link: https://superhivemarket.com/products/interior-models?ref=603 Minecraft Portfolio video for importing, exporting, and optimizing concepts: https://youtu.be/lf9ZBsi24m4 🥰🥰Support me 💖💖!!! https://www.patreon.com/c/Pandawoan https://ko-fi.com/andrewwoan Questions, comments, concerns? Feel free to reach out at [email protected] or hit me up on Discord!! discord.gg/Qr3pQ925v7 Awarded: https://www.cssdesignawards.com/sites/daniels-architects/47206/ Check out these amazing courses ✨ (I'm not sponsored by them, but recommend them if you're just starting out)!! https://threejs-journey.com/ https://wawasensei.dev/ -- Chapters -- 0:00 Introduction & project demo 2:01 (optional) A discussion on routing for 3D websites 4:40 Prerequisites 6:02 (optional) Intro to Rapid Prototyping in industry and as a freelancer 11:21 Rapid Prototyping in Blender, Creative intuition development, & Tools I use 56:00 A look at boilerplates for Rapid Prototyping 56:16 Creating a boilerplate 1:09:05 (optional) Initial client handoff discussion 1:11:02 Level one boilerplate complete 1:11:33 Adjusting camera and model behavior 1:19:57 Hoverable grid interaction 1:37:30 Adding hoverable target meshes 1:51:39 Global state Management with Zustand 1:52:19 Side panel implementation 2:01:24 Room toggle implementation 2:42:21 Side panel initial responsiveness 2:49:12 Routes with React Router 3:22:30 Page transitions with react-transition-group 3:51:57 Overview of other features and potential edge cases 3:56:58 Fixing Vercel deployment issue 3:57:35 (See code for updates on this videoTexture thing, updated to useVideoTexture) 3:57:55 Future directions and final comments 3:59:42 Shoutouts and support the channel! 4:00:05 PEACE OUT!!! #blender3d #portfolio #threejs #website