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

Описание: 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/
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/performance...

Code, credits, Blender file, updates, fixes:
https://github.com/andrewwoan/daniels...

Asset pack referall link: https://superhivemarket.com/products/...

Minecraft Portfolio video for importing, exporting, and optimizing concepts:    • Create an Award-Winning Minecraft Portfoli...  

🥰🥰Support me 💖💖!!!
  / 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...

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