How to Learn Three.js from Scratch: Complete Beginner's Guide

DJC > Tutorial

Three.js is the most popular library for developing 3D graphics on the web using JavaScript and WebGL. Thanks to its power and ease of use, it allows you to create interactive experiences, visualizations, video games, simulations, and 3D models directly in the browser.

In this guide, you will learn step-by-step how to get started with Three.js, from the basic concepts to practical examples, with a structure designed to rank well in search engines.

What is Three.js?

Three.js is a JavaScript library that simplifies the use of WebGL, allowing you to render 3D graphics without working directly with shaders or low-level graphics code.

Benefits of using Three.js

  • Lower learning curve compared to pure WebGL.
  • Active community and extensive documentation.
  • Compatible with all modern browsers.
  • Allows you to create professional 3D experiences.

What you can create with Three.js

  • 3D video games.
  • Data visualizations.
  • Interactive models and products.
  • Animations and simulations.
  • Advanced visual effects and animated backgrounds.
  • WebXR applications (VR and AR).

Prerequisites

To follow this Three.js tutorial, you need basic knowledge of:

  • JavaScript
  • HTML
  • CSS

Advanced math or graphics knowledge is not required, although it can help in more advanced stages.

How to install Three.js

Option 1: Use a CDN (ideal for testing)

<script src="https://unpkg.com/three@0.165.0/build/three.min.js"></script>

npm install three

Create your first Three.js scene

Below is a functional example to start working with Three.js. You can copy it into an HTML file and open it in your browser.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Three.js: First Scene</title>
  <style>
    body { margin: 0; overflow: hidden; }
  </style>
</head>
<body>

<script src="https://unpkg.com/three/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 3;

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

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

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

  animate();
</script>

</body>
</html>

Fundamental concepts of Three.js

1. Scene

The main container where all 3D objects, lights, and cameras are added.

2. Camera

Defines the perspective from which the scene is viewed. The most commonly used is PerspectiveCamera, as it simulates human vision.

3. Renderer (WebGLRenderer)

Converts your 3D scene into visible graphics in the browser using WebGL.

4. Meshes

Objects made up of a geometry (shape) and a material (appearance).

Examples of available geometries:

new THREE.BoxGeometry()
new THREE.SphereGeometry()
new THREE.PlaneGeometry()

How to add lights in Three.js

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(3, 3, 3);
scene.add(light);

Commonly used light types:

  • AmbientLight
  • DirectionalLight
  • PointLight
  • SpotLight

How to use OrbitControls to move the camera

OrbitControls allows you to rotate, zoom, and pan the camera with your mouse.

<script src="https://unpkg.com/three/examples/js/controls/OrbitControls.js"></script>

const controls = new THREE.OrbitControls(camera, renderer.domElement);

How to load 3D models in Three.js (GLTF/GLB)

The recommended formats are GLTF and GLB.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

Animations in Three.js

To play animations within GLTF models:

mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

Inside the animation loop:

const delta = clock.getDelta();
mixer.update(delta);

Physics in Three.js

Three.js does not include a physics engine, but it integrates easily with libraries such as:

  • Cannon-es
  • Ammo.js
  • Rapier.js

Basic example:

import * as CANNON from "cannon-es";

Official documentation: https://threejs.org/docs/

Visual editor: https://threejs.org/editor/

Official examples: https://threejs.org/examples/

Recommended learning resources:

  • Three.js Journey
  • Three.js Fundamentals

To consolidate your knowledge, it is advisable to create a small project that includes:

  • Camera with controls
  • Several geometries and materials
  • Lighting
  • A 3D model loaded in GLTF
  • User interaction
  • Animations

For example: a simple 3D mini-game or an interactive model viewer.

DJC > Tutorial