Smooth Vector Interpolation with Three.js Lerp

This article explains how to smoothly interpolate between two 3D vectors in Three.js using the built-in linear interpolation (lerp) methods. You will learn the difference between Vector3.lerp() and Vector3.lerpVectors(), understand the mathematical concept of the alpha interpolant, and see how to implement smooth movement animations inside a standard Three.js render loop.

Understanding Linear Interpolation (Lerp)

Linear interpolation, commonly abbreviated as “lerp”, is a mathematical technique used to find a point that lies somewhere along a straight line between two existing points. In Three.js, this is highly useful for creating smooth movement, camera transitions, and easing animations.

The formula relies on an “alpha” value (usually represented as \(t\) or \(\alpha\)) between 0 and 1: * An alpha of 0 returns the starting vector. * An alpha of 1 returns the target vector. * An alpha of 0.5 returns the exact midpoint between the two vectors.

Method 1: Vector3.lerp()

The lerp() method interpolates the vector it is called on towards another target vector. This method modifies the original vector directly.

Syntax

vectorA.lerp(vectorB, alpha);

Example

If you want to move a vector halfway toward another point:

import * as THREE from 'three';

const positionA = new THREE.Vector3(0, 0, 0);
const positionB = new THREE.Vector3(10, 20, 30);

// Interpolate positionA 50% of the way towards positionB
positionA.lerp(positionB, 0.5);

console.log(positionA); // Output: Vector3 { x: 5, y: 10, z: 15 }

Method 2: Vector3.lerpVectors()

If you do not want to modify your starting vector, use lerpVectors(). This method sets the calling vector to the interpolated result between two other specified vectors.

Syntax

resultVector.lerpVectors(vectorA, vectorB, alpha);

Example

import * as THREE from 'three';

const start = new THREE.Vector3(0, 0, 0);
const end = new THREE.Vector3(10, 10, 10);
const currentPosition = new THREE.Vector3();

// Calculate the 20% mark between start and end without modifying them
currentPosition.lerpVectors(start, end, 0.2);

console.log(currentPosition); // Output: Vector3 { x: 2, y: 2, z: 2 }

Creating Smooth Animations in the Render Loop

To achieve a smooth easing effect (often called “lazy tracking” or “damping”), you can call lerp() inside your animation loop. By using a small, constant alpha value, the object will quickly move toward the target when far away, and slow down as it approaches.

Implementation

import * as THREE from 'three';

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a mesh
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// Define the target position we want the cube to move to
const targetPosition = new THREE.Vector3(3, 2, 0);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    // Smoothly interpolate the cube's position toward the target by 5% each frame
    cube.position.lerp(targetPosition, 0.05);

    renderer.render(scene, camera);
}

animate();

In this animation loop, the cube’s position will smoothly glide and settle at the target coordinates (3, 2, 0). Adjusting the alpha value (e.g., changing 0.05 to 0.1) will increase or decrease the speed and responsiveness of the transition.