3D Web Development with Blender and Three.js – Create a Cozy Café Portfolio

Take your creative web development to the next level by building an interactive 3D cozy cafe portfolio from scratch using Blender and Three.js. This course covers professional workflows, covering everything from subdivision modeling and texture painting to implementing a robust singleton architecture in your code. Live link: https://alpha-chads-cozy-cafes.vercel.app/ Code, credits, Blender file etc.: https://github.com/andrewwoan/alpha-chads-cozy-cafes Course created by @andrewwoan If you got any questions feel free to reach out anytime: https://discord.gg/6F7dfuD5GT Chapters: - 0:00:00 Introduction - 0:01:37 Github Repo, Credits, Blender Source Files etc. - 0:01:43 Prerequisites - 0:02:34 Intro to subdivision (SubD) modeling - 0:03:19 (Optional) Analyzing online 3D models for modeling patterns - 0:04:59 (Optional) Introduction to emotional design and Idea generation - 0:09:55 Modeling café - 0:29:12 Modeling floor sign - 0:30:45 Modeling stools - 0:38:00 Adding details and frames to café - 0:41:37 Modeling pots - 0:45:35 Adding initial materials, lighting and modeling more details - 0:48:46 Modeling plants and flowers - 0:54:55 Modeling shelf - 0:56:49 Modeling food rack - 0:58:53 Modeling food shield - 1:02:16 Modeling donut with sprinkles - 1:04:14 Modeling cake with strawberries - 1:05:47 Modeling loaf of bread and bread slice - 1:08:37 Modeling cake slice - 1:09:31 Modeling bagel from donut - 1:10:32 Modeling baguette - 1:12:27 Modeling round bun - 1:13:18 Intro to texture painting and UV unwrapping - 1:21:10 Adding outline with inverted hull method - 1:23:32 Using AI (Claude) to generate python scripts/add-ons to add outlines - 1:24:55 Changing background color without impacting lighting - 1:25:43 Modeling mug - 1:27:03 Solidify outline tip - 1:29:05 Modeling and texture painting capybara - 1:40:58 (Optional) MAKE IT PLAYFUL - idea generation - 1:42:00 Epic pivot point trick - 1:43:20 Details detail details - 1:44:35 Outline issue and fix - delete extra faces - 1:44:45 (Optional) Fast run through of basic models - 1:45:27 Adding thickness to café - 1:48:26 Fixing random color on donut's sprinkles - 1:50:42 (Optional) Creating a second scene - 1:52:01 B-key - snapping tip for modeling - 1:52:49 Holding ALT to change more than one modifier at a time - 1:52:59 Modeling glasses - 1:57:20 Snapping tips - 1:57:56 Bevel and solidify modifier issue resolved by switching to a different mode - 1:58:19 Modeling stylized character - 2:01:56 (Optional) Unwrapping stylized character properly - 2:05:45 Prepare image assets - 2:08:04 (Optional) Introduction to Diffuse/Emission baking NOT combined/light baking - 2:23:06 Creating a path - 2:25:26 (Optional) Talking about infinite looping plan I did not end up doing - 2:27:15 Prepare for export, delete faces, join objects, fix origin points, fix normals, etc. - 2:29:55 Fixing path issue - 2:32:08 Exporting - 2:33:24 Compression and optimization - 2:37:29 (Optional) Node.js and Vite.js overview - 2:38:44 Starting coding - 2:39:17 Code architecture and singleton design pattern - 2:42:13 Implementing singleton design pattern - 3:00:32 Async/Await WebGPU renderer (fix: remove the extra renderer call of this.init()) - 3:02:35 Continuing singleton design pattern - 3:04:57 Loading models - 3:16:55 Fixing EXR issue - 3:17:15 Default camera location - 3:18:32 (Optional) Creating more scene decorations - 3:22:38 Fixing shadow camera issues - 3:24:07 Making two separate environments - 3:25:12 Set up lil-gui controls with AI - 3:26:58 Set up empties in Blender and lights with AI - 3:28:39 (Optional) AI Blender script to convert everything to emission - 3:29:09 (Optional) AI Blender script to remove all outlines - 3:30:08 Adding SVG icons and logos - 3:31:40 Overview of new models I added - 3:32:35 Adding scroll and swipe controls - 4:08:57 Renaming objects in Blender for trail animation and raycaster - 4:10:24 Animated trails based on progress value - 4:24:03 Raycaster and click/touch events - 4:54:36 Working with mobile/touch devices - 4:59:39 Creating preloader/loading screen - 5:06:14 (Optional) Deploying with Git/GitHub/Vercel - 5:08:00 Raycaster bug fix - 5:09:01 A look at refactoring and code smells - 5:10:31 Day and night toggle and TSL shaders for lights - 5:15:35 Advice on Blender and three.js animations - 5:16:55 Howler.js for audio - 5:17:07 Transfonter to convert fonts to woff/woff2 - 5:17:40 RealFaviconGenerator for favicons - 5:18:14 Scene switching slider with scissoring OR TSL and render targets - 5:20:01 Loading image textures update - 5:20:53 Coding review and tips - 5:22:25 Next steps and resources for your creative journey!!! - 5:24:17 (Optional) Take care!! Correction: 2:59:43 Remove the extra init in the constructor of Renderer.js ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp