# 🚀 Learn Creative Web Development with Three.js and Blender
A **new beginner-friendly course** is now available on the [freeCodeCamp.org YouTube channel](https://youtu.be/yhtdkuw9mbM).
It teaches you step-by-step how to create an **immersive 3D web portfolio** from scratch.
---
## 📚 What You'll Learn
The course starts with **Blender** to master the fundamentals of 3D modeling.
After creating your assets, you'll move on to **Three.js** for rendering and interactive web experiences.
### 👨🏫 Instructor
Created by **Andrew Woan**, this course is perfect for anyone who wants to **blend creative design with web development skills**.
---
## 🗂 Course Outline
### Part 1 — Getting Started
- Introduction & Project Demo
- Prerequisites
- What is Creative Web Development?
- First Steps with Blender
- *(Optional)* Learning Exercise – Think like a 3D Artist
### Part 2 — 3D Modeling in Blender
- Modeling a Tree — *bad and good methods*
- Modeling a Character
- Starting Materials
- *(Optional)* Other Things You Can Model
- Modeling Ground & Level
- Adding Image Textures
- Path Modeling Exploration
- Trying Different Cameras
- Scene Modeling Breakdown
- Adding Text & Signs
### Part 3 — Export & Integration
- Preparing for Export — Normals, Face Deletion, Cleanup
- Exporting the Model
- Preview in the Three.js Editor
### Part 4 — Three.js Development
- Coding Setup with VS Code
- Getting Started with Three.js
- *(Optional)* Learning Exercise – Make the Camera Move Away
- Quality-of-Life Adjustments
- Loading & Preparing Models
- Updating Camera & Lighting
- *(Optional)* Learning Exercise – Change Material Color in Three.js
- Interactions with Raycaster
- Character Movement with GSAP
### Part 5 — Advanced Features
- Collision Detection Implementation & Custom Movement
- Understanding Complex Three.js Example Code
- Retrospective Code Analysis
- Code & Scene Cleanup
- Make the Camera Follow the Player
- *(Optional)* Learning Exercises — Loading Screen, Mobile Controls, Theme Switcher
### Part 6 — Deployment & Wrap-Up
- Deploy with GitHub + Vercel
- Final Words & Reflections
---
## 🎯 Outcomes
By the end of this course, you’ll have:
- A **professional 3D portfolio website**
- Skills to combine **Blender’s creative power** with **Three.js’s rendering capabilities**
---
## 💡 Bonus Tip — Multi-Platform Publishing
If you plan to share 3D or AI-assisted projects widely, check out **[AiToEarn](https://aitoearn.ai/)** — an open-source global AI content monetization platform.
With AiToEarn, you can:
- Publish content simultaneously to platforms like Douyin, Kwai, WeChat, Bilibili, Rednote (Xiaohongshu), Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, and X (Twitter)
- Access analytics and AI model rankings
- Streamline publishing technical demos, tutorials, or digital art
This tool is especially useful if your **interactive 3D projects** are meant for global audiences.
---
## 🎥 Watch the Course
Full course length: **6 hours**
▶ [Watch here on freeCodeCamp.org YouTube](https://youtu.be/yhtdkuw9mbM)
