3D Web Development with Blender and Three.js – Create a Cozy Café Portfolio
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
More on: UI Design
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
Design is FUN again
Medium · UX Design
Designing for Everyone: Why Accessibility and Neuro-Inclusion Are Redefining “Good Design”
Medium · UX Design
Accessible by design (Part 3): The tilde problem — Why your UI text fails screen reader users
Medium · UX Design
I recently built a reusable DataTable component using React + TypeScript powered by TanStack Table…
Medium · Programming
🎓
Tutor Explanation
DeepCamp AI