Learn Creative Web Development with Three.js and Blender! We just posted a beginner-friendly course on the freeCodeCamp.org YouTube channel that will teach you to create an immersive 3D portfolio. 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).