Do you want to improve you JavaScript skills and create 3D web experiences?

We just posted a course on the freeCodeCamp.org YouTube channel that is designed to help anyone master JavaScript and Three.js by building five impressive and practical projects. The goal of the course is to provide a tangible portfolio of work and a clear roadmap for getting started with Three.js.

Each project is completely standalone, which means you can jump right to the topic that interests you most, whether that's creating fire effects or building a 3D globe. Bobby Roe developed this course. He has created many popular Three.js tutorials.

Here’s a look at the projects you’ll build in this series:

  • A Three.js Roadmap: The course begins by laying out a roadmap to help you get started with Three.js. You'll learn the fundamental concepts and build an interactive 3D scene while learning the basics.

  • Applying Textures: You'll learn how to load and apply different textures, including a normalMap and roughnessMap, to give your 3D models realistic surface details and shininess.

  • A 3D Globe in a Starry Sky: You'll create a 3D globe floating in a starry sky with country outlines. This project teaches you how to work with GeoJSON data to draw lines on a sphere and add effects like fog and dynamic colors to make it look truly unique.

  • Dynamic Particle Effects: Learn to build effects like fire, smoke, and sparkles. You'll learn how to control the velocity, size, and color of particles over their lifespan to achieve different visual effects.

  • Interactive Physics: This project is all about making things collide and interact in a realistic way. Using the Rapier physics engine, you'll build a scene where objects respond to mouse controls and each other, with polished details like HDR lighting and custom colliders.

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