We just posted a course on the freeCodeCamp YouTube channel by Andrew Woan that teaches you how to build a stunning interactive 3D "Cozy Cafe" portfolio from scratch. Using a combination of Blender and Three.js, this tutorial guides you through a professional workflow that bridges the gap between 3D artistic design and technical web development. You will start by learning subdivision modeling to create charming, whimsical environments before moving into texture painting and performance optimization.

The course covers advanced development techniques, including the implementation of a robust singleton architecture and the use of TSL shaders for dynamic lighting. You will also learn how to make your 3D world interactive through mobile-responsive raycasting, allowing users to click on objects and navigate through unique project trails. The course emphasizes high-performance results, showing you how to compress assets and bake lighting to ensure your portfolio remains "play-ready" and fast for all visitors.

By the end of the project, you will have constructed two complete 3D scenes and learned the full pipeline for deployment.

Watch the full course on the freeCodeCamp.org YouTube channel (5-hour watch).

We just posted a course on the freeCodeCamp.org YouTube channel that will take you from the foundational concepts of 3D modeling in Blender to creating a fully functional, award-worthy portfolio website using Three.js.

You'll master essential techniques like proper quad topology for clean models and texture baking to optimize your scene for the web.

By the end, you'll have a delightful, cute, and professionally deployed Three.js project featuring all your hand-modeled creations. Andrew Woan developed this course.

Here are all the sections in this course:

• Introduction and Project Demo

• What we will cover and not cover

• What to expect for course structure

• Prerequisites

• A brief look at quad topology

• Modeling room base and a look at blocking out

• Modeling standing desk

• Modeling monitor rise

• Modeling computer

• Modeling table pad

• Modeling computer keyboard

• Modeling pencils and pencil holder

• Modeling flower pot and flowers

• Modeling small motivational quote thing

• Modeling computer speaker

• Modeling headphones and headphone stand

• Adjusting room

• Modeling computer

• Modeling cute character Mr. Whiskers

• Modeling coffee mug

• Modeling chair

• Modeling drawer

• Modeling book

• Modeling flower basket

• Modeling pegboard

• Modeling photo frame

• Modeling slippers

• Modeling storage boxes

• Modeling hanging plant

• Modeling piano

• Modeling window

• Modeling microphone

• Modeling egg rug

• Modeling lamp

• Modeling more floating shelves

• Modeling sticky notes

• Modeling boba plushie

• Adding some more details to piano

• Modeling logos

• Modeling clock

• Modeling mini table

• Modeling pizza

• Modeling soda can

• Modeling another hanging plant but with particle system

• Modeling eggs

• Modeling wall outlet

• Adding and working with text meshes

• Modeling hanging lights and light bulb

• Modeling floor planks

• Modeling cords

• Modeling room caps

• An introduction to lighting and materials

• Creating first procedural material as a design exploration

• Creating final first procedural material with vector math

• Few more tips for baking

• Checking face orientations/normals

• Glass material and modeling fish

• Introduction to baking

• UV Unwrapping for texture baking

• Render out an image to share!!!

• Start baking

• Analyze and adjusting bakes and exporting preparations

• Exporting and analysis

• Setup basic three.js starter with Vite.js

• Compressing model and textures

• Back to setup

• Setting up loaders and loading items

• Room material and appearance adjustments

• Glass material

• Water and bubble material

• Screen material

• Setting starting camera position and OrbitControls target

• Preparing for raycaster interactions and model/texture adjustments in Blender

• UV adjusting and texture painting to quickly patch baking errors

• Pushing to GitHub and deploying with Vercel

• Animating fans

• Raycaster click/touch interactions

• Basic modal with GSAP animations

• (Optional) Loading custom fonts and SCSS tips

• Raycaster hovering interaction with GSAP

• Customizing OrbitControls to limit pan and rotation

• Intro animations with GSAP

• Custom loading screen walkthrough

• A brief look at audio with Howler.js

• Setting a starting camera position for responsiveness

• Final push to GitHub!!!

• Final comments, future directions/challenges, shoutouts

Watch the full course on the freeCodeCamp.org YouTube channel (9-hour watch).

You'll begin by diving into Blender to learn the fundamentals of 3D modeling. With your 3D assets complete, you will learn Three.js to bring your 3D models to the web. Andrew Woan created this course.

Here are the sections in this course:

• Introduction & project demo

• Prerequisites

• What is creative web development?

• Learning first steps with Blender

• (optional) Learning exercise - Think like a 3D artist

• Modeling tree (bad and good ways)

• Modeling character

• Starting materials

• (optional) Other things you can model

• Modeling ground & level

• Adding image textures for projects

• A look at modeling some paths

• A look at different cameras

• How I modeled my scene

• Adding text & signs

• Preparing to export: checking normals, deleting faces, etc.

• Export model

• Viewing exported model with three.js editor

• Starting coding with VS code

• Getting started with three.js

• (optional) Learning exercise - Make your camera move away

• Quality of life adjustments

• Loading & preparing our model

• Updating camera & lighting

• (optional) Learning exercise - Change a material color with three.js

• Object interactions with raycaster

• Character movement with GSAP

• Collision detection implementation & custom movement

• How to understand and approach difficult code from three.js examples

• Collision detection implementation & custom movement

• A look back on analyzing difficult code

• Code & scene cleanup

• Make camera follow player

• (optional) Learning exercises: loading screen, mobile movement, theme switcher

• Deployment with GitHub and Vercel

• Final words and thoughts

Watch the full course on the freeCodeCamp.org YouTube channel (6-hour watch).