Three.js + GSAP实战：5分钟搞定3D立方体的弹跳动画（附双击暂停技巧）-CSDN博客

Three.js与GSAP的化学反应：打造令人过目不忘的3D交互体验

你是否曾惊叹于那些网页上丝滑流畅、充满活力的3D动画？一个立方体在屏幕上弹跳、旋转，仿佛拥有生命，而用户只需双击就能让它瞬间定格。这种引人入胜的交互背后，往往不是单一技术的功劳，而是Three.js与GSAP这对黄金搭档的完美协作。对于已经掌握了Three.js基础，渴望让3D场景“活”起来的前端开发者而言，理解如何将这两个强大的库结合使用，是提升项目视觉表现力和用户体验的关键一步。无论是打造一个酷炫的产品展示页，还是为游戏增添生动的细节，掌握基于物理感的动画和即时交互控制，都能让你的作品从“能用”跃升到“惊艳”。今天，我们就深入探讨如何利用GSAP的缓动函数，特别是其标志性的bounce效果，为Three.js对象注入灵魂，并赋予用户掌控动画节奏的能力。

1. 环境搭建与项目初始化

在开始编写任何动画代码之前，一个清晰、高效的项目环境是成功的一半。我们假设你已经对Three.js的基础概念，如场景（Scene）、相机（Camera）、渲染器（Renderer）和网格（Mesh）有了一定的了解。这里，我们将聚焦于如何将GSAP无缝集成到你的Three.js项目中，并构建一个最小化但功能完整的起点。

首先，通过你喜欢的包管理器来安装必要的依赖。如果你使用npm，可以运行以下命令：

npm install three gsap

或者，如果你倾向于在浏览器中直接通过CDN使用，可以在HTML文件的<head>部分引入它们：

<script src="/https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="/https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

提示：建议始终使用Three.js和GSAP的官方或知名CDN链接，以确保版本的稳定性和安全性。

接下来，我们创建一个基础的HTML文件，并初始化一个Three.js场景。下面的代码块展示了一个非常标准的初始化流程，它创建了一个场景、一个透视相机、一个渲染器，并添加了一个简单的立方体。

import * as THREE from 'three';
import gsap from 'gsap';

// 1. 创建场景
const scene = new THREE.Scene();

// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 4. 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial(); // 使用法向材质，方便观察旋转
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. 基础动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

至此，一个静态的3D立方体已经出现在你的浏览器中。但我们的目标是让它动起来，而且是富有弹性的动起来。在进入GSAP的核心部分前，理解Three.js自身的动画循环（requestAnimationFrame）与GSAP时间轴的关系至关重要。GSAP并不会取代这个循环，而是优雅地控制在这个循环中变化的属性值。

2. GSAP核心：缓动函数与属性动画

GSAP（GreenSock Animation Platform）之所以强大，很大程度上归功于其丰富而精细的缓动（Easing）系统。缓动函数定义了动画过程中属性值变化的速率，它决定了动画是匀速、先快后慢、还是像弹簧一样弹跳。对于Three.js对象，我们可以动画化其几乎任何属性：position（位置）、rotation（旋转