Three.JS: The JavaScript Library for 3D Graphics

Introduction

Three.js is a powerful JavaScript library used to create 3D graphics, animations, and interactive experiences in the browser using WebGL. It simplifies 3D rendering without requiring developers to write raw WebGL code, making it easier to build stunning 3D websites, games, and visualizations.

Why Use Three.js?

Easy to Use – Simplifies complex WebGL programming.
High Performance – Uses GPU acceleration for rendering.
Cross-Platform – Runs on desktops, mobile devices, and VR/AR.
Interactive & Animated – Supports physics, shaders, and particle systems.
Massive Community – Well-supported with many examples and plugins.

Installation

You can install Three.js via npm or use a CDN.

Using npm (Recommended)

npm install three

Using CDN (Quick Start)

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

Basic Three.js Scene

A Three.js scene typically consists of: 1️⃣ Scene – The 3D world that holds objects. 2️⃣ Camera – The viewpoint for rendering the scene. 3️⃣ Renderer – The engine that draws 3D objects on the screen. 4️⃣ Objects – Geometries (cubes, spheres) added to the scene.

Example: Creating a Simple 3D Scene with a Rotating Cube

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Three.js Example</title>
    <style> body { margin: 0; overflow: hidden; } </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 1. Create a scene
        const scene = new THREE.Scene();

        // 2. Set up a camera (PerspectiveCamera: FOV, Aspect Ratio, Near, Far)
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // 3. Create a WebGL Renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 4. Create a cube (geometry + material)
        const geometry = new THREE.BoxGeometry(); // Cube shape
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 5. Animation loop
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01; // Rotate cube
            cube.rotation.y += 0.01;
            renderer.render(scene, camera); // Render the scene
        }

        animate(); // Start animation loop
    </script>
</body>
</html>

Core Concepts in Three.js

1. Scene, Camera, and Renderer

Scene – The 3D world where objects exist.
Camera – The "eye" that views the scene (Perspective or Orthographic).
Renderer – Converts 3D objects into pixels.

2. Lights

Lighting is essential for realistic 3D rendering.

Types of Lights:

THREE.AmbientLight() – General light for the entire scene.
THREE.PointLight() – Light from a point source, like a bulb.
THREE.DirectionalLight() – Sunlight-like lighting.

Example:

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);
scene.add(light);

3. Materials & Textures

Materials define how objects look (color, reflectivity, transparency).

Common Materials:

MeshBasicMaterial – No lighting, just color.
MeshStandardMaterial – Physically based material with lighting.
MeshPhongMaterial – Reflective surfaces.

Example:

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.7, roughness: 0.5 });

Adding a Texture

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("path/to/texture.jpg");
const material = new THREE.MeshBasicMaterial({ map: texture });

4. Loading 3D Models (GLTF, OBJ, FBX)

Three.js supports 3D models like GLTF, OBJ, FBX.

Example: Loading a GLTF Model

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

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

5. Animations in Three.js 🔄

Three.js supports animations using the Clock & Mixer system.

Example: Animating a Cube

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

Advanced Features of Three.js

Particle Systems – Create fire, smoke, rain effects.
Shadows & Reflections – Use ray tracing & realistic lighting.
Physics – Integrate Cannon.js or Ammo.js for realistic physics.
Virtual Reality (VR) & Augmented Reality (AR) – Compatible with WebXR.
Post-processing Effects – Use Bloom, Depth of Field, Motion Blur.

Conclusion

Three.js is the best choice for web-based 3D graphics. It allows developers to build interactive 3D experiences, games, data visualizations, and AR/VR applications.

Use Three.js if you are building:

3D websites & interactive experiences
NFT marketplaces with 3D previews
Web-based games & simulations
Augmented Reality (AR) & Virtual Reality (VR)

PreviousChartJS / D3.JS / Fabric JS NextHTML/CSS/JS/Tailwind CSS/Bootstrap

Last updated 1 year ago