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

freeCodeCamp.org · Beginner ·🖌️ UI/UX Design ·3h ago
Skills: UI Design90%
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 fa
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Up next
Color Grading: Add Emotion, Mood, and Impact with Color!
Coursera
Watch →