Camera Waypoint Animation in Three.js

To create a camera animation that follows predefined waypoints around a 3D model with smooth transitions, you'll need to work with Three.js animation system. Here's how you can implement this functionality:

Approach Overview

1. Define waypoints (positions and rotations)
2. Create a path between waypoints
3. Animate the camera along this path

Implementation

1. Define Waypoints

First, define an array of waypoints with position and rotation information:

JAVASCRIPTCopied
const waypoints = [
  { position: new THREE.Vector3(10, 5, 10), lookAt: new THREE.Vector3(0, 0, 0) },
  { position: new THREE.Vector3(-10, 8, 5), lookAt: new THREE.Vector3(0, 2, 0) },
  { position: new THREE.Vector3(0, 10, -15), lookAt: new THREE.Vector3(0, 0, 0) },
  // Add more waypoints as needed
];

2. Create Animation System

You can use Three.js's animation system with TWEEN.js (a popular tweening library) for smooth transitions:

JAVASCRIPTCopied
// First, include TWEEN.js in your project
// <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>

let currentWaypoint = 0;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

function moveToNextWaypoint() {
  const nextWaypoint = (currentWaypoint + 1) % waypoints.length;
  
  // Create position tween
  new TWEEN.Tween(camera.position)
    .to({
      x: waypoints[nextWaypoint].position.x,
      y: waypoints[nextWaypoint].position.y,
      z: waypoints[nextWaypoint].position.z
    }, 3000) // Duration in milliseconds
    .easing(TWEEN.Easing.Cubic.InOut)
    .start();
  
  // Create a dummy object for camera rotation
  const lookAtDummy = new THREE.Object3D();
  lookAtDummy.position.copy(camera.position);
  camera.getWorldDirection(lookAtDummy.rotation);
  
  // Create rotation tween
  new TWEEN.Tween(lookAtDummy.position)
    .to({
      x: waypoints[nextWaypoint].lookAt.x,
      y: waypoints[nextWaypoint].lookAt.y,
      z: waypoints[nextWaypoint].lookAt.z
    }, 3000)
    .easing(TWEEN.Easing.Cubic.InOut)
    .onUpdate(() => {
      camera.lookAt(lookAtDummy.position);
    })
    .start();
  
  currentWaypoint = nextWaypoint;
}

3. Update Animation in Render Loop

Add TWEEN update to your animation loop:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  TWEEN.update();
  
  renderer.render(scene, camera);
}
animate();

4. Trigger Camera Movement

You can trigger the camera movement programmatically or based on user interaction:

JAVASCRIPTCopied
// Move to next waypoint every 5 seconds
setInterval(moveToNextWaypoint, 5000);

// Or trigger on button click
document.getElementById('nextWaypointBtn').addEventListener('click', moveToNextWaypoint);

Advanced Options

Using Curves for Smoother Paths

For more complex paths, you can use Three.js curves:

JAVASCRIPTCopied
// Create a smooth curve through waypoints
const points = waypoints.map(wp => wp.position);
const curve = new THREE.CatmullRomCurve3(points);
curve.closed = true; // Make it a loop if needed

// Sample points along the curve
const pointsOnCurve = curve.getPoints(100);

// Animate along the curve
let progress = 0;
function animateAlongCurve() {
  progress += 0.001;
  if (progress > 1) progress = 0;
  
  const point = curve.getPointAt(progress);
  camera.position.copy(point);
  
  // Look ahead on the curve
  const lookAtPoint = curve.getPointAt((progress + 0.01) % 1);
  camera.lookAt(lookAtPoint);
}

// Call animateAlongCurve in your animation loop

This implementation gives you a solid foundation for creating dynamic camera walkthroughs around your 3D models with smooth transitions between predefined waypoints.