使用yomotsu/camera-controls实现相机路径动画效果-CSDN博客

使用yomotsu/camera-controls实现相机路径动画效果

概述

本文将介绍如何使用yomotsu/camera-controls库创建平滑的相机路径动画效果。这个库是对Three.js相机控制的增强，提供了更灵活、更强大的相机操作方式。我们将通过一个具体示例，展示如何让相机沿着预定义的路径移动，同时保持对场景中特定点的注视。

核心概念

1. CameraControls简介

yomotsu/camera-controls是一个专门为Three.js设计的相机控制库，它扩展了Three.js原生相机的功能，提供了更流畅的交互体验和更精确的控制方式。与Three.js自带的OrbitControls相比，它提供了更多高级功能，如平滑过渡、精确位置控制等。

2. 路径动画原理

路径动画是指让相机沿着预定义的曲线路径移动，同时可以控制相机的朝向。这种技术常用于3D场景的自动漫游、产品展示等场景。实现原理包括：

定义一条3D曲线路径
在曲线上采样多个点
让相机依次通过这些点
同时控制相机的朝向

实现步骤

1. 初始化场景

首先需要设置基本的Three.js场景：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 100);
const renderer = new THREE.WebGLRenderer();

2. 安装CameraControls

CameraControls.install({ THREE: THREE });
const cameraControls = new CameraControls(camera, renderer.domElement);

3. 创建路径

使用Catmull-Rom曲线创建平滑路径：

const curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-3, 2, 1),
    new THREE.Vector3(2, 2, 0),
    new THREE.Vector3(-1, 0, 3),
    new THREE.Vector3(2, -1, 0)
]);

4. 实现路径动画

使用GSAP动画库控制相机沿路径移动：

const pathAnimation = gsap.fromTo(
    animationProgress,
    { value: 0 },
    {
        value: 1,
        duration: 3,
        onUpdate({ value }) {
            curve.getPoint(value, _tmp);
            cameraControls.setLookAt(
                _tmp.x, _tmp.y, _tmp.z,
                0, 0, 0,
                false // 禁用CameraControls的过渡效果
            );
        }
    }
);

关键点解析

曲线采样：使用getPoints(50)方法从曲线上采样50个点，用于可视化路径。
动画控制：
- 使用GSAP控制动画进度
- 在动画开始时禁用CameraControls的交互
- 动画结束后重新启用交互
相机定位：
- setLookAt方法同时设置相机位置和朝向
- 最后一个参数false确保使用GSAP的平滑过渡而非CameraControls的内置过渡