Three.js 变换动画

提示词

PLAINTEXT
1
使用 Three.js 和 GSAP 实现模型变换动画，包括位置、旋转和缩放的动画效果，使用 FBXLoader 加载模型。

效果描述

这是一个使用 GSAP 动画库实现模型变换动画的示例，包含位置、旋转和缩放的动画效果。

效果特性

  • 位置动画：模型沿 Y 轴向上移动
  • 旋转动画：模型绕 Y 轴旋转 45 度
  • 缩放动画：模型沿 X 和 Z 轴缩放 2 倍
  • FBX 模型加载：加载城市模型
  • GSAP 动画：使用 GSAP 实现平滑动画
  • Promise 链：使用 Promise.all 等待所有动画完成

核心参数

参数 值 说明
模型路径 files/model/city.FBX FBX 模型文件
模型缩放 0.0005 模型缩放比例
动画时长 3秒 GSAP 动画持续时间
位置偏移 Y+5 位置向上移动 5 单位
旋转角度 PI/4 旋转 45 度
缩放倍数 X/Z * 2 缩放 2 倍

核心代码解析

GSAP 变换动画

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function setTransformAnimate(mesh) {
    const position = mesh.position.clone();
    position.y += 5; // 位置向上移动

    const rotation = mesh.rotation.clone();
    rotation.y += Math.PI / 4; // 旋转45度

    const scale = mesh.scale.clone();
    scale.z *= 2; // 缩放z轴2倍
    scale.x *= 2; // 缩放x轴2倍

    const transformInfo_ = { position, rotation, scale };

    // 执行动画
    const promises_gsap = ["position", "rotation", "scale"].map((i) => {
        return new Promise((resolve) => {
            gsap.to(mesh[i], {
                x: transformInfo_[i].x,
                y: transformInfo_[i].y,
                z: transformInfo_[i].z,
                duration: 3,
                ease: "none",
                repeat: 0,
                yoyo: false,
                yoyoEase: true,
                onComplete: resolve,
            });
        });
    });

    Promise.all(promises_gsap).then(() => console.log("动画完成"));
}

FBX 模型加载

JAVASCRIPT
1
2
3
4
5
new FBXLoader().load(FILE_HOST + "files/model/city.FBX", (object3d) => {
    scene.add(object3d);
    object3d.scale.set(0.0005, 0.0005, 0.0005);
    setTransformAnimate(object3d);
});

技术亮点

  1. GSAP 动画：使用 GSAP 实现平滑的变换动画
  2. Promise 链：使用 Promise.all 等待多个动画完成
  3. 变换分离：位置、旋转、缩放分别动画
  4. FBX 加载：使用 FBXLoader 加载模型
  5. 克隆属性：使用 clone() 避免修改原始值

调试技巧

  1. 动画时长：调整 duration 参数控制动画速度
  2. 变换顺序：可以调整变换的顺序
  3. 模型缩放：FBX 模型通常需要缩放
  4. 动画回调：onComplete 回调在动画完成时触发
  5. Promise 处理：确保所有动画都完成后再执行后续操作

扩展方向

  1. 缓动函数：使用不同的 ease 函数创造不同效果
  2. 循环动画：设置 repeat: -1 实现循环动画
  3. 往返动画：设置 yoyo: true 实现往返动画
  4. 多模型动画：同时动画多个模型
  5. 动画序列：使用 GSAP Timeline 创建动画序列

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