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
| Class | Key Parameters |
|---|---|
BoxGeometry | w, h, d, wSeg, hSeg, dSeg |
PlaneGeometry | w, h, wSeg, hSeg |
CircleGeometry | radius, segments |
SphereGeometry | radius, wSeg, hSeg |
CylinderGeometry | rTop, rBot, h, rSeg |
ConeGeometry | radius, h, rSeg |
TorusGeometry | radius, tube, rSeg, tSeg |
TorusKnotGeometry | radius, tube, tSeg, rSeg, p, q |
TetrahedronGeometry | radius, detail |
IcosahedronGeometry | radius, detail (smooth sphere at detail≥1) |
CapsuleGeometry | radius, length, capSeg, rSeg |
ExtrudeGeometry | shape, options |
ShapeGeometry | shape |
LatheGeometry | points[], segments |
TubeGeometry | curve, 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
PlaneGeometryfaces +Z by default. Rotate withmesh.rotation.x = -Math.PI / 2to lay flat on the XZ ground plane.
SphereGeometryat lowwidthSegments(< 16) looks faceted — use 32+ for smooth appearance.
IcosahedronGeometrywithdetail >= 1creates a smooth-subdivided icosphere, often preferred overSphereGeometryfor uniform polygon distribution.
Always call
geo.computeVertexNormals()after manually setting positions without normals, otherwise lighting will be wrong.
BufferAttributeitems are indexed, not per-face. For non-indexed geometry each triangle is 3 separate vertices; withsetIndex()you share vertices.