Three.js — JavaScript 3D Library for the Web

What it is

Three.js is a JavaScript library that makes WebGL and WebGPU rendering accessible. Instead of writing low-level shader code and managing GPU buffers, you work with high-level abstractions: scenes, cameras, lights, geometries, and materials. It is the most widely used 3D library for the web.

Three.js serves frontend developers who need 3D visualization (product configurators, data visualization, games), creative developers building interactive experiences, and teams adding 3D elements to existing web applications.

How it saves time or tokens

Raw WebGL requires hundreds of lines of boilerplate for a spinning cube: shader compilation, buffer binding, matrix math, and render loop management. Three.js reduces this to a dozen lines. The built-in loader system handles glTF, OBJ, FBX, and other 3D file formats without custom parsing code.

The ecosystem of examples, addons, and community extensions means most common 3D patterns (orbit controls, post-processing, physics) are already solved.

How to use

1. Install Three.js:

npm install three

1. Create a basic scene:

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. Add a mesh and render:

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

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

Example

Loading a glTF model with orbit controls:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

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

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

This gives you a draggable, zoomable 3D model viewer in under 20 lines of code.

Related on TokRepo

• AI tools for design -- Tools for visual and 3D design workflows
• AI tools for coding -- JavaScript development tools and libraries

Common pitfalls

• Not disposing of geometries and materials when removing objects. Three.js does not garbage-collect GPU resources automatically. Call .dispose() on geometries, materials, and textures to prevent memory leaks.
• Using uncompressed textures. Large PNG/JPG textures consume GPU memory. Use KTX2/Basis compressed textures for production applications.
• Ignoring the render loop frame budget. At 60fps you have 16ms per frame. Complex scenes with many draw calls need optimization (instancing, LOD, frustum culling).