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

Take your imaginative web improvement to the adjacent level by building an interactive 3D cozy cafe portfolio from scratch utilizing Blender and Three.js. This people covers master workflows, covering everything from subdivision modeling and texture coating to implementing a robust singleton architecture successful your code. Live link: https://alpha-chads-cozy-cafes.vercel.app/ Code, credits, Blender record etc.: https://github.com/andrewwoan/alpha-chads-cozy-cafes Course created by @andrewwoan If you sewage immoderate questions consciousness free to scope retired 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 affectional creation and Idea generation - 0:09:55 Modeling café - 0:29:12 Modeling level sign - 0:30:45 Modeling stools - 0:38:00 Adding specifications and frames to café - 0:41:37 Modeling pots - 0:45:35 Adding first materials, lighting and modeling much details - 0:48:46 Modeling plants and flowers - 0:54:55 Modeling shelf - 0:56:49 Modeling nutrient rack - 0:58:53 Modeling nutrient shield - 1:02:16 Modeling donut pinch sprinkles - 1:04:14 Modeling barroom pinch strawberries - 1:05:47 Modeling loaf of breadstuff and breadstuff slice - 1:08:37 Modeling barroom slice - 1:09:31 Modeling bagel from donut - 1:10:32 Modeling baguette - 1:12:27 Modeling information bun - 1:13:18 Intro to texture coating and UV unwrapping - 1:21:10 Adding outline pinch inverted hull method - 1:23:32 Using AI (Claude) to make python scripts/add-ons to adhd outlines - 1:24:55 Changing inheritance colour without impacting lighting - 1:25:43 Modeling mug - 1:27:03 Solidify outline tip - 1:29:05 Modeling and texture coating capybara - 1:40:58 (Optional) MAKE IT PLAYFUL - thought generation - 1:42:00 Epic pivot constituent trick - 1:43:20 Details item details - 1:44:35 Outline rumor and hole - delete other faces - 1:44:45 (Optional) Fast tally done of basal models - 1:45:27 Adding thickness to café - 1:48:26 Fixing random colour connected donut's sprinkles - 1:50:42 (Optional) Creating a 2nd scene - 1:52:01 B-key - snapping extremity for modeling - 1:52:49 Holding ALT to alteration much than 1 modifier astatine a time - 1:52:59 Modeling glasses - 1:57:20 Snapping tips - 1:57:56 Bevel and solidify modifier rumor resolved by switching to a different mode - 1:58:19 Modeling stylized character - 2:01:56 (Optional) Unwrapping stylized characteristic 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 astir infinite looping scheme I did not extremity up doing - 2:27:15 Prepare for export, delete faces, subordinate objects, hole root points, hole normals, etc. - 2:29:55 Fixing way 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 creation pattern - 2:42:13 Implementing singleton creation pattern - 3:00:32 Async/Await WebGPU renderer (fix: region the other renderer telephone of this.init()) - 3:02:35 Continuing singleton creation pattern - 3:04:57 Loading models - 3:16:55 Fixing EXR issue - 3:17:15 Default camera location - 3:18:32 (Optional) Creating much segment decorations - 3:22:38 Fixing protector camera issues - 3:24:07 Making 2 abstracted environments - 3:25:12 Set up lil-gui controls pinch AI - 3:26:58 Set up empties successful Blender and lights pinch AI - 3:28:39 (Optional) AI Blender book to person everything to emission - 3:29:09 (Optional) AI Blender book to region each outlines - 3:30:08 Adding SVG icons and logos - 3:31:40 Overview of caller models I added - 3:32:35 Adding scroll and swipe controls - 4:08:57 Renaming objects successful Blender for way animation and raycaster - 4:10:24 Animated trails based connected advancement value - 4:24:03 Raycaster and click/touch events - 4:54:36 Working pinch mobile/touch devices - 4:59:39 Creating preloader/loading screen - 5:06:14 (Optional) Deploying pinch Git/GitHub/Vercel - 5:08:00 Raycaster bug fix - 5:09:01 A look astatine refactoring and codification smells - 5:10:31 Day and nighttime toggle and TSL shaders for lights - 5:15:35 Advice connected Blender and three.js animations - 5:16:55 Howler.js for audio - 5:17:07 Transfonter to person fonts to woff/woff2 - 5:17:40 RealFaviconGenerator for favicons - 5:18:14 Scene switching slider pinch scissoring OR TSL and render targets - 5:20:01 Loading image textures update - 5:20:53 Coding reappraisal and tips - 5:22:25 Next steps and resources for your imaginative journey!!! - 5:24:17 (Optional) Take care!! Correction: 2:59:43 Remove the other init successful the constructor of Renderer.js ❤️ Support for this transmission comes from our friends astatine Scrimba – the coding level that's reinvented interactive learning: https://scrimba.com/freecodecamp