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

freeCodeCamp.org · Beginner ·🖌️ UI/UX Design ·1h 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

Design is FUN again
Revitalize your design work by shifting focus away from negativity and towards creative solutions
Medium · UX Design
Designing for Everyone: Why Accessibility and Neuro-Inclusion Are Redefining “Good Design”
Learn how accessibility and neuro-inclusion are redefining good design in product development
Medium · UX Design
Accessible by design (Part 3): The tilde problem — Why your UI text fails screen reader users
Learn how to make UI text accessible to screen reader users by solving the tilde problem
Medium · UX Design
I recently built a reusable DataTable component using React + TypeScript powered by TanStack Table…
Learn to build a reusable DataTable component using React and TypeScript with TanStack Table for flexible data representation
Medium · Programming
Up next
Color Grading: Add Emotion, Mood, and Impact with Color!
Coursera
Watch →