Create a Cute 3D Room Portfolio with Blender and Three.js

Project Overview and Scope

• 💡 This course teaches how to design an interactive 3D portfolio using Blender and Three.js, covering modeling, texturing, and web deployment.
• 🎯 Key takeaways include mastering quad topology, texture baking, and creating a cute, stylized 3D scene.
• ⚠️ The tutorial explicitly excludes teaching light-to-dark mode toggles and coffee steam effects, though code is provided for exploration.

Blender Fundamentals for 3D Modeling

• 🚀 The course begins with Blender basics, including understanding mesh topology (tris, quads, n-gons) and best practices for clean models.
• 🛠️ Essential modeling techniques are demonstrated, starting with creating the room base and progressing to individual objects like a standing desk, computer, keyboard, and character models like Mr. Whiskers.
• 🎨 Modifiers like Solidify and Bevel are used to add depth and style, with explanations on applying scale and shade smooth techniques.

Texturing and Material Creation

• 🎨 Procedural materials are explored using math functions and nodes, demonstrating how to create unique textures without image references.
• 🖼️ The course covers UV unwrapping for texture baking, explaining concepts like seams, distortion, and packing islands for optimal texture space.
• 💡 PBR materials are introduced, emphasizing the use of image textures (diffuse, roughness, normal maps) and the Node Wrangler add-on for efficient setup.

Three.js Implementation and Interactivity

• 🚀 The project is set up using Vite.js and Three.js, covering scene creation, camera setup, and OrbitControls for navigation.
• 🖱️ Raycasting is implemented to enable click and hover interactions with objects, triggering GSAP animations for modals and object responses.
• 🌐 The final project is deployed using Vercel, making the interactive 3D portfolio accessible online.

Key Modeling Techniques Demonstrated

• 🧸 Numerous objects are modeled, including a chair, drawer, book, flower pot, headphones, speakers, piano, window, lamp, boba plushie, and pizza.
• 🪴 Techniques like using curves for stems, cylinders for pots, and array modifiers for keyboards are shown.
• 💡 Specific attention is given to creating stylized elements like cute characters, hanging plants, and small decorative items.

Baking and Optimization

• 💡 Texture baking is explained as a method to save lighting information into textures, improving performance for web deployment.
• 📦 Model and texture compression techniques, including Draco compression for models and WEBP format for textures, are demonstrated to reduce file sizes.
• 🎨 UV unwrapping is crucial for baking, ensuring proper mapping of baked textures onto the 3D models.