Three.js GSAP 相机动画

提示词

PROMPT
1
使用 Three.js 和 GSAP 实现相机和控制器目标的动画效果，包含相机位置移动和目标点移动。

效果描述

这是一个使用 GSAP 动画库实现相机和控制器目标动画的示例，展示如何平滑地移动相机视角。

效果特性

  • 相机动画：相机位置平滑移动
  • 目标动画：控制器目标点平滑移动
  • GSAP 动画：使用 GSAP 实现平滑动画
  • GUI 控制：使用 lil-gui 控制动画触发
  • OrbitControls：轨道控制器
  • 辅助线：坐标轴和网格辅助

核心参数

参数 值 说明
相机初始位置 (0, 30, 30) 相机起始位置
目标位置 (20, 20, 20) 相机目标位置
控制器目标 (-5, 2, 1) 控制器目标点
动画时长 2秒 GSAP 动画持续时间
ease 函数 none 线性缓动

核心代码解析

GSAP 相机动画函数

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
function createGsapAnimation(position, position_, gsapQuery = null) {
    return gsap.to(position, {
        ...position_,
        duration: 2,
        ease: "none",
        repeat: 0,
        yoyo: false,
        yoyoEase: true,
        ...gsapQuery,
    });
}

GUI 触发动画

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
new GUI()
    .add(
        {
            fn: () => {
                // 创建一个相机动画
                createGsapAnimation(camera.position, { x: 20, y: 20, z: 20 });
                // 创建一个目标运动动画
                createGsapAnimation(controls.target, { x: -5, y: 2, z: 1 });
            },
        },
        "fn",
    )
    .name("播放");

技术亮点

  1. 相机动画：使用 GSAP 平滑移动相机
  2. 目标动画：同时动画控制器目标点
  3. GUI 集成：使用 lil-gui 控制动画
  4. 参数展开：使用展开运算符传递参数
  5. 独立动画：相机和目标分别动画

调试技巧

  1. 动画时长：调整 duration 控制动画速度
  2. 缓动函数：使用不同的 ease 函数创造不同效果
  3. 目标位置：调整 controls.target 改变观察点
  4. 相机位置：调整 camera.position 改变视角
  5. 动画顺序：可以按顺序或同时执行多个动画

扩展方向

  1. 路径动画：使用曲线路径实现相机沿路径移动
  2. 多相机：在多个相机之间切换
  3. 缩放动画：动画相机 FOV 实现缩放效果
  4. 动画序列：使用 GSAP Timeline 创建动画序列
  5. 交互式动画：根据用户输入触发不同动画

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。