Three.js Cheatsheet

Setup

Use this Three.js reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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);