Revolve 2D Splines with Three.js LatheGeometry

In Three.js, creating symmetrical 3D rotational shapes like vases, glasses, bottles, or columns is made highly efficient using LatheGeometry. This article explains the core purpose of LatheGeometry, details the mathematical process of how it revolves a 2D spline around a central axis to generate 3D meshes, and provides a clear, practical code implementation to help you use it in your web graphics projects.

What is LatheGeometry?

LatheGeometry is a built-in Three.js class designed to generate 3D meshes by spinning a 2D profile (a shape defined by a series of points) around a central axis. This process is modeled after a physical woodturning lathe, where a block of material is spun rapidly while a chisel carves out a symmetrical shape.

In 3D web graphics, this technique is incredibly efficient. Instead of defining thousands of individual 3D polygons manually, you only need to define a single flat 2D boundary line (a spline) and let Three.js handle the math of rotating it.

How LatheGeometry Revolves a 2D Spline

The revolution process relies on a 2D coordinate system mapped to a 3D space, revolving around the Y-axis. Here is the step-by-step breakdown of how Three.js turns a 2D spline into a 3D object:

1. Defining the 2D Profile: You define a sequence of 2D points using THREE.Vector2. In this coordinate system, the X-axis represents the radius (how far the point is from the center of rotation), and the Y-axis represents the height.
2. The Y-Axis as the Pivot: Three.js uses the Y-axis as the fixed axis of rotation. Because of this, the X coordinates of your points should generally be positive (greater than or equal to zero) to avoid self-intersection or inverted faces.
3. Sweeping the Points: The engine rotates each point in a circle around the Y-axis. As it rotates, it generates vertices at regular angular intervals.
4. Creating the Face Mesh: Finally, Three.js connects the newly generated vertices with triangular faces, producing a smooth, closed (or semi-closed) 3D surface.

Key Parameters of LatheGeometry

The LatheGeometry constructor accepts four parameters to customize the output:

new THREE.LatheGeometry(points, segments, phiStart, phiLength)

• points (Array): An array of Vector2 coordinates representing the 2D profile.
• segments (Integer): The number of circumferential steps used to complete the revolution. A higher number makes the object rounder but increases the polygon count. The default is 12.
• phiStart (Float): The starting angle of the revolution in radians. The default is 0.
• phiLength (Float): The radial sweep angle of the revolution. The default is Math.PI * 2 (360 degrees) for a fully closed object. You can lower this to create partial cuts or sliced shapes.

Practical Code Example

The following code demonstrates how to define a smooth 2D spline using CatmullRomCurve2, extract its points, and pass them to LatheGeometry to create a 3D vase shape.

import * as THREE from 'three';

// 1. Create a 2D path (spline) using bezier or catmull-rom curves
const curve = new THREE.CatmullRomCurve2([
    new THREE.Vector2(0, -2),   // Base center
    new THREE.Vector2(1.5, -2), // Base outer edge
    new THREE.Vector2(1, -1),   // Lower body
    new THREE.Vector2(2, 1),    // Widest part
    new THREE.Vector2(0.5, 2.5),// Neck
    new THREE.Vector2(1, 3)     // Rim
]);

// 2. Extract smooth points along the curve (e.g., 30 points)
const points = curve.getPoints(30);

// 3. Generate the Lathe Geometry
// Revolves the points with 32 segments for a smooth circle
const geometry = new THREE.LatheGeometry(points, 32);

// 4. Create Material and Mesh
const material = new THREE.MeshStandardMaterial({ 
    color: 0x3b82f6, 
    roughness: 0.2, 
    metalness: 0.1,
    side: THREE.DoubleSide // Visible from both inside and outside
});

const latheMesh = new THREE.Mesh(geometry, material);

// 5. Add to scene
scene.add(latheMesh);

By mastering LatheGeometry, you can drastically reduce the file size and complexity of your 3D assets, utilizing mathematical rotation to dynamically render complex organic and architectural structures in real time.