Three.js Cheatsheet

Setup

Use this Three.js reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

Quick Playground Check

Three.js snippets are easiest to verify in a JavaScript playground or online code editor that supports ES modules and a canvas preview. If you only need JavaScript syntax practice before rendering WebGL, use Hack University's JavaScript online compiler to run code online; for visual Three.js work, choose a browser playground with a real <canvas> preview.

Installation

// npm
npm install three

// with types (TypeScript)
npm install three @types/three

// CDN (ES module, no bundler)
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js';

Imports

// Named imports (tree-shakeable, recommended with bundlers)
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshStandardMaterial,
  Mesh,
  AmbientLight,
  DirectionalLight,
} from 'three';

// Namespace import (simpler, slightly larger bundle)
import * as THREE from 'three';

Addons (formerly examples/jsm)

// Addons are NOT in the core — import from the addons path
import { OrbitControls }  from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader }     from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader }    from 'three/addons/loaders/DRACOLoader.js';
import { RGBELoader }     from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass }     from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { GUI }            from 'three/addons/libs/lil-gui.module.min.js';

With older builds or CDN use the full path three/examples/jsm/....

Minimal Boilerplate

import * as THREE from 'three';

// 1. Scene
const scene = new THREE.Scene();

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

// 3. Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

// 4. Object
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00aaff });
const cube     = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. Light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 4, 3);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.4));

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

// 7. Resize handler
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

Vite Setup (recommended)

// vite.config.js — no special config needed; Three.js is pure ESM
import { defineConfig } from 'vite';
export default defineConfig({});

<!-- index.html -->
<canvas id="canvas"></canvas>
<script type="module" src="/main.js"></script>

// main.js — attach to existing canvas instead of creating one
const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('canvas'),
  antialias: true,
});

Version Checking

import { REVISION } from 'three';
console.log('Three.js r' + REVISION); // e.g. "Three.js r169"

WebGLRenderer Constructor Options

Option	Type	Default	Notes
`canvas`	`HTMLCanvasElement`	auto-created	Attach to existing `<canvas>`
`antialias`	`boolean`	`false`	MSAA; enable for sharp edges
`alpha`	`boolean`	`false`	Transparent canvas background
`premultipliedAlpha`	`boolean`	`true`	Standard web compositing
`stencil`	`boolean`	`true`	Stencil buffer
`depth`	`boolean`	`true`	Depth buffer
`logarithmicDepthBuffer`	`boolean`	`false`	Fixes z-fighting at huge scales
`powerPreference`	`string`	`'default'`	`'high-performance'` / `'low-power'`
`preserveDrawingBuffer`	`boolean`	`false`	Needed for `toDataURL()` screenshots
`failIfMajorPerformanceCaveat`	`boolean`	`false`	Throw if only software renderer

Common Renderer Settings

renderer.shadowMap.enabled    = true;
renderer.shadowMap.type       = THREE.PCFSoftShadowMap; // default PCFShadowMap
renderer.outputColorSpace     = THREE.SRGBColorSpace;   // correct gamma (default since r152)
renderer.toneMapping          = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure  = 1.0;
renderer.setClearColor(0x000000, 1); // background color, alpha

Cleanup / Disposal

// Always dispose to avoid GPU memory leaks
geometry.dispose();
material.dispose();
texture.dispose();
renderer.dispose();

// Remove from scene
scene.remove(mesh);