Introduction

Why Three.js?

Three.js is the most popular JavaScript library for 3D graphics on the web. It wraps WebGL — the raw GPU API — into a clean, high-level scene graph that lets you create stunning 3D experiences without writing a single line of GLSL shader code.

  • WebGL made easy -- WebGL requires hundreds of lines of boilerplate for a spinning cube. Three.js reduces it to 10.
  • Runs everywhere -- Any modern browser supports it. No plugins, no installs, no native builds.
  • Huge ecosystem -- Thousands of examples, plugins, and a massive community.
  • Real-time rendering -- 60fps animations, particle systems, physics-ready geometry, and post-processing effects.
  • 3D + DOM -- Combine Three.js with React, Vue, or plain HTML. React Three Fiber makes it declarative.

The Story

Three.js was created by Ricardo Cabello (known online as Mr.doob) and first released in 2010. It started as a port of a ActionScript 3D engine to JavaScript, but quickly became its own thing.

The library has grown from a weekend project to the de-facto standard for WebGL — used by Google, NASA, Apple, and thousands of creative developers worldwide. It is entirely open-source (MIT license) and has over 1,000 contributors on GitHub.

What You Will Build

In this course you will:

  • Understand the scene graph: scenes, cameras, renderers, meshes
  • Work with geometries (Box, Sphere, Torus, Cylinder) and materials (Basic, Standard, Phong)
  • Add lights (Ambient, Directional, Point, Spot) for realistic shading
  • Transform objects with position, rotation, and scale
  • Build animation loops with delta time for frame-rate independence
  • Organize objects into groups and hierarchies
  • Control the camera and field of view
  • Add atmospheric fog
  • Detect mouse interaction with raycasting
  • Create particle systems with BufferGeometry
  • Combine everything into a final Solar System scene

Every lesson renders a live 3D preview directly in your browser.

Next →