Extract Evenly Spaced Points from Three.js Curves

This article explains how to use the getSpacedPoints method in Three.js to extract a set of equidistant points along a 3D curve. You will learn the difference between standard curve sampling and arc-length sampling, see a practical code implementation, and understand how to use these points to create smooth paths or animate objects at a constant speed.

Understanding getSpacedPoints vs getPoints

When working with curves in Three.js (such as CatmullRomCurve3 or CubicBezierCurve), you often need to retrieve coordinate points along the path. Three.js provides two main methods for this:

How to Use getSpacedPoints

To extract evenly spaced points, define your curve, call getSpacedPoints with the desired number of divisions, and use the returned array of vector objects.

Here is a practical JavaScript example:

import * as THREE from 'three';

// 1. Define the control points for the curve
const controlPoints = [
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(-5, 5, 5),
    new THREE.Vector3(0, 0, 10),
    new THREE.Vector3(5, -5, 5),
    new THREE.Vector3(10, 0, 0)
];

// 2. Create the curve
const curve = new THREE.CatmullRomCurve3(controlPoints);

// 3. Extract evenly spaced points
// Passing 50 divisions returns an array of 51 equidistant Vector3 points
const divisions = 50;
const spacedPoints = curve.getSpacedPoints(divisions);

// 4. Use the points to create a visual line representation
const geometry = new THREE.BufferGeometry().setFromPoints(spacedPoints);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const line = new THREE.Line(geometry, material);

// Add the line to your Three.js scene
scene.add(line);

Key Considerations