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 Receive SMS online on sms24.me

Watch on YouTube

Subscribe on YouTubeReaderBot

TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.

Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.

Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.

TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.

Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.

@YouTubeReaderBot allows you to subscribe to Youtube channels.

By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.

Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.

Look for new videos or channels and share them with your friends.

You can start using our bot from this video, subscribe now to 3D Web Development with Blender and Three.js – Create a Cozy Café Portfolio

What is YouTube?

YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.