Creating a Camera Path with Pause Points in Three.js

To create a closed curve for your camera to follow with specific pause points, you can use Three.js curve classes. Based on your requirements, I'll show you how to implement this using the CatmullRomCurve3 class, which is great for smooth camera paths.

Step 1: Create a Closed Curve

First, let's create a closed curve that the camera will follow:

JAVASCRIPTCopied
import * as THREE from 'three';

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

// Create a closed curve
const curve = new THREE.CatmullRomCurve3(points, true); // true makes it a closed curve

Step 2: Define Pause Points

Next, define the points where you want the camera to pause:

JAVASCRIPTCopied
const pausePoints = [
  { position: 0.25, duration: 2000 }, // Pause at 25% of the curve for 2 seconds
  { position: 0.5, duration: 3000 },  // Pause at 50% of the curve for 3 seconds
  { position: 0.75, duration: 2000 }  // Pause at 75% of the curve for 2 seconds
];

Step 3: Implement Camera Movement

Now, let's implement the camera movement along the curve with pauses:

JAVASCRIPTCopied
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const scene = new THREE.Scene();

// Variables to track movement
let progress = 0;
let isPaused = false;
let pauseTimer = 0;
let currentPauseIndex = 0;
const speed = 0.0005; // Adjust speed as needed

// Optional: Visualize the curve
const curvePoints = curve.getPoints(50);
const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(curveGeometry, curveMaterial);
scene.add(curveObject);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  if (!isPaused) {
    // Move along the curve
    progress += speed;
    if (progress > 1) progress = 0; // Loop back to start
    
    // Check if we need to pause
    for (let i = 0; i < pausePoints.length; i++) {
      const pausePoint = pausePoints[i];
      // If we're close to a pause point
      if (Math.abs(progress - pausePoint.position) < speed) {
        isPaused = true;
        pauseTimer = pausePoint.duration;
        currentPauseIndex = i;
        // Set exact position to avoid drift
        progress = pausePoint.position;
        break;
      }
    }
    
    // Update camera position
    const point = curve.getPointAt(progress);
    camera.position.copy(point);
    
    // Optional: Make camera look ahead on the curve
    const lookAtPoint = curve.getPointAt((progress + 0.01) % 1);
    camera.lookAt(lookAtPoint);
  } else {
    // Handle pause timer
    pauseTimer -= 16; // Approximate for 60fps
    if (pauseTimer <= 0) {
      isPaused = false;
      // Move slightly past the pause point to avoid getting stuck
      progress = pausePoints[currentPauseIndex].position + speed;
    }
  }
  
  renderer.render(scene, camera);
}

animate();

Step 4: Enhance with Smooth Transitions

For smoother transitions when pausing and resuming, you can implement easing functions:

JAVASCRIPTCopied
// Add this before your animation loop
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

// Then modify your animation loop to include easing when starting/stopping

Complete Example

Here's a more complete example that puts everything together:

JAVASCRIPTCopied
import * as THREE from 'three';

// Setup scene, camera, 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 closed curve
const points = [
  new THREE.Vector3(-20, 5, 20),
  new THREE.Vector3(20, 5, 20),
  new THREE.Vector3(20, 5, -20),
  new THREE.Vector3(-20, 5, -20)
];
const curve = new THREE.CatmullRomCurve3(points, true);

// Define pause points
const pausePoints = [
  { position: 0.25, duration: 2000 },
  { position: 0.5, duration: 3000 },
  { position: 0.75, duration: 2000 }
];

// Visualize the curve
const curvePoints = curve.getPoints(100);
const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(curveGeometry, curveMaterial);
scene.add(curveObject);

// Add some objects to the scene for reference
const gridHelper = new THREE.GridHelper(50, 50);
scene.add(gridHelper);

// Variables for camera movement
let progress = 0;
let isPaused = false;
let pauseTimer = 0;
let currentPauseIndex = 0;
const speed = 0.0005;

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  if (!isPaused) {
    progress += speed;
    if (progress > 1) progress = 0;
    
    // Check for pause points
    for (let i = 0; i < pausePoints.length; i++) {
      const pausePoint = pausePoints[i];
      if (Math.abs(progress - pausePoint.position) < speed) {
        isPaused = true;
        pauseTimer = pausePoint.duration;
        currentPauseIndex = i;
        progress = pausePoint.position;
        break;
      }
    }
    
    // Update camera position and orientation
    const point = curve.getPointAt(progress);
    camera.position.copy(point);
    
    const lookAtPoint = curve.getPointAt((progress + 0.01) % 1);
    camera.lookAt(lookAtPoint);
  } else {
    pauseTimer -= 16;
    if (pauseTimer <= 0) {
      isPaused = false;
      progress = pausePoints[currentPauseIndex].position + speed;
    }
  }
  
  renderer.render(scene, camera);
}

animate();

This implementation will create a camera that follows a closed path, pausing at specific points along the way before continuing. You can adjust the curve points, pause positions, and durations to fit your specific needs.