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)
Last updated
Was this helpful?