HOW TO MAKE ONE
OBJECT FOLLOW ANOTHER
IN THREE.JS

Master object following behavior with step-by-step code examples and real-world applications.

Three.js Object Following

By Shane Brumback · January 15, 2024

Frequently Asked Questions

How do I make one 3D object follow another in Three.js?

Use the lookAt() method to point the follower toward the target, then move it forward each frame: follower.lookAt(target.position); follower.translateZ(speed). This makes the object smoothly chase the target while always facing it.

How do I make an object follow the mouse in Three.js?

Use a Raycaster to project the mouse position onto a plane in 3D space, then lerp the object toward that intersection point each frame. This creates smooth mouse-following behavior: object.position.lerp(targetPoint, 0.05).

What is lerp and why use it for following in Three.js?

Lerp (linear interpolation) smoothly blends between two values. Using position.lerp(target, factor) moves an object a percentage of the remaining distance each frame, creating natural easing. A factor of 0.05 gives smooth following; 1.0 gives instant snapping.

How do I add a delay to object following in Three.js?

Lower the lerp factor (e.g., 0.02 instead of 0.1) for slower, delayed following. For a trail effect where multiple objects follow each other with increasing delay, have each object follow the position of the one ahead of it in a chain.

Introduction

Object following is a fundamental technique in 3D graphics and game development. Whether you're building a camera system that tracks a player, creating enemy AI that pursues the player, or implementing interactive 3D experiences, understanding how to make one object follow another is essential. In Three.js, there are several approaches to implement object following behavior, each with its own advantages and use cases.

From third-person camera systems in games to particle effects that trail behind moving objects, this technique is fundamental to creating engaging 3D experiences. Understanding the different methods — linear interpolation, distance-based following, and velocity-based movement — will help you choose the right approach for your specific use case and create smooth, professional-looking interactions in your Three.js projects.

In this tutorial, you'll build a complete interactive demo featuring a WASD-controlled target with three different follower objects, each using a distinct following algorithm. You'll see the differences in behavior firsthand and learn when to use each approach in your own projects.

What You'll Learn

  • Simple lerp-based following for smooth, easy-to-implement tracking
  • Distance-based following that maintains a fixed offset from the target
  • Velocity-based following with acceleration and damping for physics-like movement
  • Using lookAt() to orient followers toward their target
  • Building a reusable ObjectFollower class that combines all methods
  • WASD keyboard controls for moving a target object in 3D space
  • Camera following with smooth interpolation

Prerequisites

Basic familiarity with Three.js (scene, camera, renderer setup) and JavaScript. You should understand how the animation loop works with requestAnimationFrame. No advanced math knowledge is required — the tutorial explains the vector operations step by step.