What is Three.js?

Three.js in Plain English

Imagine you want to show a spinning 3D product, a game world, or an interactive globe on a website. Normally that means writing WebGL — a low-level graphics language full of shaders, buffers, and matrix math that takes hundreds of lines just to draw a single triangle. Three.js is the library that does all of that for you.

Instead of wrestling with the GPU directly, you describe your scene with plain, readable objects: "here is a box, give it a red material, point a camera at it, add a light." Three.js translates that into the GPU instructions the browser needs. It is the single most popular way to put real-time 3D on the web, powering everything from indie games to product pages for major brands.

The Three Things Every Scene Needs

Almost every Three.js project is built from the same three core pieces. Once you understand them, everything else clicks into place:

Add a mesh (a shape made from a geometry plus a material), drop in a light so it is visible, and call renderer.render(scene, camera) in an animation loop. That is a complete, moving 3D scene.

A Complete Scene in Under 30 Lines

Here is a full working example — a spinning green cube. Save it as an HTML file and open it in any browser:

<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script>
  // 1. Scene, 2. Camera, 3. Renderer
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // A mesh = geometry + material
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshStandardMaterial({ color: 0x00ff88 })
  );
  scene.add(cube);

  // A light so we can see it
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(2, 2, 5);
  scene.add(light);

  // Animate
  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
</script>

What You Can Build With Three.js

• Browser games — first-person shooters, racing, puzzle, and multiplayer 3D games that run instantly with no download.
• Product configurators — let shoppers rotate, zoom, and customize a product in real time before they buy.
• Data visualizations — turn large datasets into interactive 3D charts, maps, and network graphs.
• Architectural walkthroughs — explore buildings and floor plans in 3D directly on a web page.
• Education & simulations — physics, chemistry, anatomy, and engineering models students can manipulate.
• Art & marketing experiences — immersive landing pages, music visualizers, and digital galleries.

WebGL vs WebGPU

Three.js sits on top of the browser's graphics APIs so you never touch them directly. For years that meant WebGL, which is supported everywhere and remains the default. Newer browsers now support WebGPU — a faster, more modern API that unlocks better performance for demanding scenes with many objects, advanced shaders, and compute work.

Three.js supports both. You get maximum compatibility with the WebGL renderer today, and a path to cutting-edge speed with the WebGPU renderer as adoption grows — without rewriting your scene.

Loading Real 3D Models

You are not limited to boxes and spheres. Three.js loads professional 3D models exported from Blender, Maya, or any 3D tool using standard formats — glTF/GLB (the recommended format), plus FBX, OBJ, and STL. A single glTF file can carry meshes, PBR materials, textures, and animations, and GLTFLoader brings it into your scene ready to render and animate.

Why Developers and Creators Choose Three.js

• Free and open source under the MIT license — use it in any personal or commercial project.
• Huge community — one of the most-starred libraries on GitHub, with endless examples and tutorials.
• Runs everywhere — desktop and mobile, no plugins, no app store, just a web page.
• Beginner friendly, expert capable — start with a cube in minutes, scale up to full games and simulations.

Frequently Asked Questions