Three.js Cheatsheet

Geometries

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.

Built-in Geometry Types

Box / Plane / Circle

new THREE.BoxGeometry(
  width,          // default 1
  height,         // default 1
  depth,          // default 1
  widthSegments,  // default 1
  heightSegments, // default 1
  depthSegments   // default 1
);

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength);

Spheres and Cylinders

new THREE.SphereGeometry(
  radius,         // default 1
  widthSegments,  // longitude divisions (≥3, 32 looks smooth)
  heightSegments, // latitude divisions (≥2, 16 typical)
  phiStart,       // default 0
  phiLength,      // default Math.PI * 2
  thetaStart,     // default 0
  thetaLength     // default Math.PI
);

new THREE.CylinderGeometry(
  radiusTop,      // default 1
  radiusBottom,   // default 1
  height,         // default 1
  radialSegments, // default 32
  heightSegments, // default 1
  openEnded,      // default false
  thetaStart,     // default 0
  thetaLength     // default Math.PI * 2
);

new THREE.ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);

Polyhedra and Special Shapes

new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q);

new THREE.TetrahedronGeometry(radius, detail);
new THREE.OctahedronGeometry(radius, detail);
new THREE.IcosahedronGeometry(radius, detail);
new THREE.DodecahedronGeometry(radius, detail);

new THREE.CapsuleGeometry(radius, length, capSegments, radialSegments);

Extrusion and Lathe

// ExtrudeGeometry — extrude a 2D Shape along a path
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 1);
shape.closePath();

const extrudeSettings = {
  steps:          2,       // segments along the extrusion path
  depth:          0.5,     // extrusion depth
  bevelEnabled:   true,
  bevelThickness: 0.05,
  bevelSize:      0.03,
  bevelSegments:  3,
};
const geo = new THREE.ExtrudeGeometry(shape, extrudeSettings);

// ShapeGeometry — flat fill of a 2D Shape
const flatGeo = new THREE.ShapeGeometry(shape);

// LatheGeometry — revolution around the Y axis
const points = [
  new THREE.Vector2(0, 0),
  new THREE.Vector2(0.5, 0.5),
  new THREE.Vector2(0.3, 1),
  new THREE.Vector2(0, 1.2),
];
const lathe = new THREE.LatheGeometry(points, segments, phiStart, phiLength);

// TubeGeometry — tube along a Curve
const path  = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-2, 0, 0),
  new THREE.Vector3(0,  2, 0),
  new THREE.Vector3(2,  0, 0),
]);
const tube = new THREE.TubeGeometry(path, tubularSegments, radius, radialSegments, closed);

Geometry Reference Table

ClassKey Parameters
BoxGeometryw, h, d, wSeg, hSeg, dSeg
PlaneGeometryw, h, wSeg, hSeg
CircleGeometryradius, segments
SphereGeometryradius, wSeg, hSeg
CylinderGeometryrTop, rBot, h, rSeg
ConeGeometryradius, h, rSeg
TorusGeometryradius, tube, rSeg, tSeg
TorusKnotGeometryradius, tube, tSeg, rSeg, p, q
TetrahedronGeometryradius, detail
IcosahedronGeometryradius, detail (smooth sphere at detail≥1)
CapsuleGeometryradius, length, capSeg, rSeg
ExtrudeGeometryshape, options
ShapeGeometryshape
LatheGeometrypoints[], segments
TubeGeometrycurve, tSeg, radius, rSeg, closed

BufferGeometry (Custom)

const geo = new THREE.BufferGeometry();

// Vertices (flat Float32Array, 3 values per vertex)
const vertices = new Float32Array([
  -1, -1, 0,
   1, -1, 0,
   0,  1, 0,
]);
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// Normals
const normals = new Float32Array([0, 0, 1,  0, 0, 1,  0, 0, 1]);
geo.setAttribute('normal', new THREE.BufferAttribute(normals, 3));

// UV coordinates
const uvs = new Float32Array([0, 0,  1, 0,  0.5, 1]);
geo.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));

// Index (optional — reuse vertices)
const indices = new Uint16Array([0, 1, 2]);
geo.setIndex(new THREE.BufferAttribute(indices, 1));

// Colors (per-vertex) — needs vertexColors: true on material
const colors = new Float32Array([1,0,0, 0,1,0, 0,0,1]);
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

// Recompute after manual edits
geo.computeVertexNormals();
geo.computeBoundingBox();
geo.computeBoundingSphere();

Dynamic / Updatable Attributes

// Mark an attribute for GPU update
const posAttr = geo.getAttribute('position');
posAttr.array[i * 3]     = newX;
posAttr.array[i * 3 + 1] = newY;
posAttr.array[i * 3 + 2] = newZ;
posAttr.needsUpdate = true; // REQUIRED

// For partial updates (perf)
posAttr.updateRange.offset = 0;
posAttr.updateRange.count  = 3 * numChangedVertices;

Geometry Utilities

// Center geometry at origin
geo.center();

// Translate/rotate/scale the geometry data itself (bakes transform)
geo.translate(0, -0.5, 0);
geo.rotateX(Math.PI / 2);
geo.scale(2, 2, 2);

// Normalize positions (fit inside unit sphere)
geo.normalize();

// Bounding info
geo.computeBoundingBox();
const box    = geo.boundingBox;    // THREE.Box3
const center = new THREE.Vector3();
box.getCenter(center);
const size   = new THREE.Vector3();
box.getSize(size);

// Merge multiple geometries
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
const merged = mergeGeometries([geo1, geo2, geo3]);

// Dispose when done
geo.dispose();

Shape and Path API

const shape = new THREE.Shape();

// Drawing commands (like Canvas 2D)
shape.moveTo(x, y);
shape.lineTo(x, y);
shape.quadraticCurveTo(cpX, cpY, x, y);
shape.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);
shape.arc(aX, aY, radius, startAngle, endAngle, clockwise);
shape.absarc(aX, aY, radius, startAngle, endAngle, clockwise);
shape.ellipse(aX, aY, xRadius, yRadius, startAngle, endAngle, clockwise, rotation);
shape.closePath();

// Holes
const hole = new THREE.Path();
hole.absarc(0.5, 0.5, 0.2, 0, Math.PI * 2, false);
shape.holes.push(hole);

Gotchas

PlaneGeometry faces +Z by default. Rotate with mesh.rotation.x = -Math.PI / 2 to lay flat on the XZ ground plane.

SphereGeometry at low widthSegments (< 16) looks faceted — use 32+ for smooth appearance.

IcosahedronGeometry with detail >= 1 creates a smooth-subdivided icosphere, often preferred over SphereGeometry for uniform polygon distribution.

Always call geo.computeVertexNormals() after manually setting positions without normals, otherwise lighting will be wrong.

BufferAttribute items are indexed, not per-face. For non-indexed geometry each triangle is 3 separate vertices; with setIndex() you share vertices.