Built-in Geometries
Three.js ships with a collection of ready-made geometries for common shapes that you can use to build your scenes with. These are all subclasses of BufferGeometry. This means that they generate the vertex positions, normals, and UVs for you so you don't have to build them by hand.
BoxGeometry
A rectangular box defined by width, height, and depth. You can also control the number of segments on each face, which matters when you want to deform vertices or need smoother shading.
typescript
// BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
const geometry = new THREE.BoxGeometry(1, 1, 1);
// A tall, thin box with extra segments
const detailed = new THREE.BoxGeometry(0.5, 2, 0.5, 1, 4, 1);SphereGeometry
A sphere defined by its radius. The widthSegments and heightSegments parameters control how smooth it looks meaning that more segments create a rounder shape. This also means that more triangles are generated for the GPU to process.
typescript
// SphereGeometry(radius, widthSegments, heightSegments)
const geometry = new THREE.SphereGeometry(1, 32, 32);
// Low-poly sphere (great for stylized looks)
const lowPoly = new THREE.SphereGeometry(1, 8, 6);
// Partial sphere (phi/theta control how much of the sphere to generate)
const halfSphere = new THREE.SphereGeometry(1, 32, 32,
0, Math.PI * 2, // phiStart, phiLength (horizontal sweep)
0, Math.PI / 2 // thetaStart, thetaLength (vertical sweep)
);CylinderGeometry and ConeGeometry
Cylinders have a top and bottom radius and you can simply set the top radius to 0 and you get a cone. Three.js also provides ConeGeometry as a convenience. Both support an openEnded parameter to remove the caps.
typescript
// CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded)
const cylinder = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
// Tapered cylinder
const tapered = new THREE.CylinderGeometry(0.3, 0.8, 2, 32);
// ConeGeometry(radius, height, radialSegments, heightSegments, openEnded)
const cone = new THREE.ConeGeometry(0.8, 2, 32);
// Open-ended cylinder (tube shape)
const tube = new THREE.CylinderGeometry(0.5, 0.5, 2, 32, 1, true);TorusGeometry and TorusKnotGeometry
A torus is a donut shape defined by its ring radius and tube thickness. A torus knot is a more complex shape where the tube winds around itself. This is great for testing materials and lighting, but I have to admit, not much else :).
typescript
// TorusGeometry(radius, tubeRadius, radialSegments, tubularSegments)
const torus = new THREE.TorusGeometry(1, 0.4, 16, 100);
// TorusKnotGeometry(radius, tubeRadius, tubularSegments, radialSegments, p, q)
// p and q control how the knot winds
const knot = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
// Different winding numbers create different knot shapes
const trefoil = new THREE.TorusKnotGeometry(1, 0.3, 100, 16, 2, 3);
const cinquefoil = new THREE.TorusKnotGeometry(1, 0.3, 100, 16, 2, 5);PlaneGeometry, CircleGeometry, and RingGeometry
Flat 2D shapes are useful for floors, walls, UI elements, and particles. PlaneGeometry creates a rectangle, CircleGeometry a filled disc, and RingGeometry a flat annulus.
typescript
// PlaneGeometry(width, height, widthSegments, heightSegments)
const plane = new THREE.PlaneGeometry(2, 2);
// CircleGeometry(radius, segments, thetaStart, thetaLength)
const circle = new THREE.CircleGeometry(1, 32);
// RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments)
const ring = new THREE.RingGeometry(0.5, 1, 32);Polyhedra
Three.js includes the Platonic solids, which are geometries built from identical regular polygons. These are useful for low-poly aesthetics or as starting points for subdivision. Increasing the detail parameter subdivides each face, approaching a sphere.
typescript
// All take (radius, detail), detail 0 is the base shape
const tetra = new THREE.TetrahedronGeometry(1, 0); // 4 faces
const octa = new THREE.OctahedronGeometry(1, 0); // 8 faces
const dodeca = new THREE.DodecahedronGeometry(1, 0); // 12 faces
const icosa = new THREE.IcosahedronGeometry(1, 0); // 20 faces
// Higher detail subdivides faces (detail 2 icosahedron ≈ smooth sphere)
const subdividedIcosa = new THREE.IcosahedronGeometry(1, 2);The Effect of Segments
Every built-in geometry lets you control the number of segments. At the end of the day, this adjusts how many triangles make up the shape. More segments means smoother curves and better lighting at the cost of performance. Here's the same sphere at different segment counts:
typescript
// Low segments: visible facets, fewer triangles
const low = new THREE.SphereGeometry(1, 4, 3);
// Medium: a reasonable default
const medium = new THREE.SphereGeometry(1, 16, 12);
// High: very smooth, more triangles
const high = new THREE.SphereGeometry(1, 64, 48);
// Check the triangle count
console.log(geometry.index.count / 3); // number of triangles