3 weeks

Advanced

Last updated: 2026-06-03

Three.js is a JavaScript library used to create 3D graphics and animations in the browser using WebGL without needing complex low-level coding.

PREREQUISITES

Before you jump into Three.js, you need a strong base.

👉 Three.js is just a tool without JavaScript and web basics, you won’t be able to control it.

1. HTML (Structure of your 3D app)

HTML is the skeleton of your webpage.

In Three.js, HTML is mainly used to:

Create a container (like <div> or <canvas>)
Load your JavaScript file
Add UI elements (buttons, text, etc.)

Example:

<body>
  <canvas id="webgl"></canvas>
</body>

👉 Three.js renders everything inside this <canvas>.

2. CSS (Styling your 3D scene container)

CSS controls how your page looks and behaves.

In Three.js projects, CSS helps you:

Make canvas fullscreen
Position UI elements over 3D (like buttons, menus)
Handle responsiveness

Example:

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

👉 Without CSS, your 3D scene may look broken or misaligned.

3. JavaScript (CORE — Most Important)

👉 This is the heart of Three.js.

Since Three.js is a JavaScript library, you MUST understand JS basics.

Key Concepts You Need:

✅ Variables

Store data

let speed = 5;

`const`

Cannot reassign.

const age = 20;

✅ Arrays

Store multiple values

let colors = ["red", "blue", "green"];

✅ Objects

Store structured data (VERY important for 3D)

let cube = {
  width: 1,
  height: 1,
  depth: 1
};

✅ Functions

Reusable logic

function rotate() {
  console.log("rotating...");
}

✅ Events

React to user actions

window.addEventListener("click", () => {
  console.log("Clicked!");
});

✅ DOM (Document Object Model)

Interact with HTML

const canvas = document.getElementById("webgl");

👉 Three.js uses ALL of these heavily.

4. Basic Math

Unit-5: 3 D Co-ordinate Geometry – B.C.A study

Coordinates (Positioning in 3D)

X → left/right
Y → up/down
Z → forward/back

👉 Example:

mesh.position.set(1, 2, 3);

📏 Vectors

Used to represent:

Position
Direction
Movement

👉 Example:

let direction = { x: 1, y: 0, z: 0 };

🔄 Angles & Rotation

Used to rotate objects

👉 Example:

mesh.rotation.y = Math.PI; // 180°

SETUP & INSTALLATION

Every three.js project needs at least one HTML file to define the webpage, and a JavaScript file to run your three.js code.

Before coding, need to add Three.js to project.

There are two main ways:

CDN (quick & beginner-friendly)
NPM (professional & scalable)

Install with CDN

CDN METHOD

👉 Best for:

Beginners
Quick demos
Learning concepts
No setup needed

What is CDN?

A CDN (Content Delivery Network) is just a hosted file online.

You directly link Three.js into your HTML.

👉 No installation. No terminal. Just plug and play.

Setup Steps

Step 1: Create basic project

project/
 ├── index.html
 └── script.js

Step 2: Add Three.js CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Three.js CDN</title>
  <style>
    body { margin: 0; }
  </style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
<script src="script.js"></script>

</body>
</html>

Pros of CDN

No setup required
Works instantly
Great for testing ideas
Beginner-friendly

Cons of CDN

Not scalable for big projects
Hard to manage dependencies
No modular imports
Not ideal for production

Install with NPM

NPM METHOD

Best for:

Real projects
React / Next.js
Large applications
Clean & modular code

What is NPM?

NPM = Node Package Manager

It installs libraries locally in your project.

Setup Steps

Step 1: Install Node.js

Download from: https://nodejs.org

Check installation:

node -v
npm -v

Step 2: Create project

mkdir three-project
cd three-project
npm init -y

Step 3: Install Three.js

npm install three

Step 4: Install a bundler (VERY IMPORTANT)

Three.js (NPM) needs a bundler like:

Vite

👉 Use Vite (simple and fast)

npm create vite@latest

Then:

cd your-project
npm install
npm run dev

Step 5: Import Three.js

import * as THREE from 'three';

Pros of NPM

Clean modular code
Easy to scale
Works with React / Next.js
Better performance control
Industry standard

Cons of NPM

Setup required
Needs Node.js knowledge
Slightly complex for beginners

CORE FOUNDATION

Every Three.js app is built on three core components:

Scene → where everything exists
Camera → how you view the scene
Renderer → how it gets displayed on screen

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

1️⃣ Import Three.js

import * as THREE from 'three';

👉 You are importing the Three.js library so you can use it.

2️⃣ Create Scene

const scene = new THREE.Scene();

👉 Think of scene = empty stage

This is where you will add:
objects (cube, sphere)
lights
models

3️⃣ Create Camera

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

👉 Think of camera = your eyes

This camera decides what part of the scene you see

Parameters:

75 → Field of View (how wide you see)
window.innerWidth / window.innerHeight → screen ratio
0.1 → near (closest visible distance)
1000 → far (farthest visible distance)

💡 Simple meaning:

"Show everything between 0.1 and 1000 units from camera"

4️⃣ Create Renderer

const renderer = new THREE.WebGLRenderer();

👉 Think of renderer = painter

It takes your scene + camera
Draws it using WebGL (GPU)

5️⃣ Set Size

renderer.setSize(window.innerWidth, window.innerHeight);

👉 This makes the canvas fill the screen

6️⃣ Add to HTML

document.body.appendChild(renderer.domElement);

👉 This adds the 3D canvas into your webpage

renderer.domElement = actual <canvas> element

Add this at the end:

renderer.render(scene, camera);

GLB

What is GLB?

.gltf → JSON + separate textures/files
.glb → Everything packed into one file

Most websites use GLB because it's easier and loads faster.

Load GLB Model

Import Loader

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

Load Model

const loader = new GLTFLoader();

loader.load(
  '/models/shoe.glb',

  function(gltf) {

    const model = gltf.scene;

    model.scale.set(1,1,1);

    model.position.set(0,0,0);

    scene.add(model);

  },

  function(xhr) {

    console.log(
      (xhr.loaded / xhr.total * 100)
      + '% loaded'
    );

  },

  function(error) {

    console.log(error);

  }
);

DRACO Loader

Without Draco:

shoe.glb = 20 MB

With Draco:

shoe.glb = 2-5 MB

Huge performance improvement.

Import

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

KTX2 Texture Compression

Professional websites use:

GLB + Draco + KTX2

Benefits:

Faster loading
Less GPU memory
Mobile optimization

Import:

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

Used for compressed textures.

Step 1: Create the Sandal in Blender

You make 3 separate objects:

Sandal
├── Sole
├── Top
├── Buckle

In Blender Outliner:

Collection
 ├── Sole
 ├── Top
 ├── Buckle

⚠️ Don't join them (Ctrl + J).

Keep them as separate meshes.

Step 2: Export as GLB

File
→ Export
→ glTF 2.0
→ Format: GLB

Export:

sandal.glb

Inside that single GLB:

Sole Mesh
Top Mesh
Buckle Mesh

are all stored separately.

Step 3: Load in Three.js

const loader = new GLTFLoader();

loader.load('/models/sandal.glb', (gltf) => {

    const sandal = gltf.scene;

    scene.add(sandal);

});

At this point:

Sole
Top
Buckle

appear together as one sandal.

Step 4: Access Individual Parts

Because they are separate objects in Blender:

loader.load('/models/sandal.glb', (gltf) => {

    const sandal = gltf.scene;

    const sole =
    sandal.getObjectByName("Sole");

    const top =
    sandal.getObjectByName("Top");

    const buckle =
    sandal.getObjectByName("Buckle");

    scene.add(sandal);

});

Now Three.js can control each part independently.

let sole;
let top;
let buckle;

loader.load('/models/sandal.glb', (gltf) => {

  const sandal = gltf.scene;

  sole = sandal.getObjectByName("Sole");
  top = sandal.getObjectByName("Top");
  buckle = sandal.getObjectByName("Buckle");

  scene.add(sandal);

});

Animate in the Render Loop

Rotate Only the Buckle

function animate() {

    requestAnimationFrame(animate);

    if(buckle){
        buckle.rotation.y += 0.02;
    }

    renderer.render(scene, camera);

}

animate();

Only the buckle rotates.

Using GSAP

Most product websites use GSAP.

<script src="https://cdn.jsdelivr.net/npm/gsap@3"></script>

Animate Buckle

gsap.to(buckle.rotation,{
    y:Math.PI * 2,
    duration:2,
    repeat:-1,
    ease:"none"
});

Environment & Realism

make 3D scenes look realistic using:

HDRI
Environment Maps
HDR Lighting
Sky & Skybox
Cube Maps
Reflections
Reflection Mapping
Realistic Materials
PBR Workflow

Without these, models look like plastic toys.

With these, models look like real products.

HDRI (High Dynamic Range Image)

Definition

An HDRI is a 360° image containing lighting and color information from a real-world environment.

Unlike JPG or PNG images, HDRI stores:

Bright sunlight
Dark shadows
Light intensity
Reflection information

Why Use HDRI?

HDRI helps objects understand:

Where light comes from
How bright the scene is
What should be reflected

Real-Life Example

Imagine holding a shiny spoon.

The spoon reflects:

Ceiling
Fan
Windows
Lights

A 3D object needs the same environmental information.

HDRI provides it.

Benefits

Realistic lighting
Better reflections
Professional product renders
Natural shadows

Import:

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

Example

const loader = new RGBELoader();

loader.load('studio.hdr', (texture) => {

    texture.mapping =
    THREE.EquirectangularReflectionMapping;

    scene.environment = texture;
});

Environment Maps

Definition

An Environment Map tells objects what exists around them.

It acts as the surrounding world for:

Reflections
Lighting
Realism

Example

scene.environment = hdrTexture;

What Happens?

Before:

Object floating in empty space

After:

Object surrounded by a real environment

Real-Life Example

Sunglasses reflect:

Buildings
Cars
Trees

Environment maps allow 3D objects to do the same.

HDR Lighting

Definition

Using HDRI as a light source instead of relying only on traditional lights.

Traditional Lighting

const light =
new THREE.DirectionalLight();

Only one light source.

HDR Lighting

scene.environment = hdrTexture;

Thousands of lighting values are used from the HDR image.

Sky & Environment

Definition

The sky creates a believable outdoor environment.

Without a sky:

Black empty background

With a sky:

Realistic outdoor scene

Three.js Sky

import { Sky } from
'three/examples/jsm/objects/Sky.js';

const sky = new Sky();

scene.add(sky);

Important Properties

Turbidity

Controls atmospheric haze.

sky.material.uniforms.turbidity.value = 10;

Higher Value:

More foggy

Lower Value:

Clear sky

Rayleigh

Controls sky brightness.

sky.material.uniforms.rayleigh.value = 3;

Mie Coefficient

Controls sun glow.

sky.material.uniforms.mieCoefficient.value = 0.005;

Use Cases

Day scenes
Sunset scenes
Open-world environments

Reflection Mapping

Definition

Reflection Mapping is the process of using environment data to generate reflections.

Workflow

Environment
      ↓
Reflection Map
      ↓
Material
      ↓
Reflection

Example

scene.environment =
hdrTexture;

const material =
new THREE.MeshPhysicalMaterial({

    metalness: 1,

    roughness: 0
});

Result

The object reflects the HDR environment.