一、动画系统核心原理

1.1 动画循环机制

Three.js的动画系统基于浏览器渲染循环构建，通过requestAnimationFrame实现高性能动画。该API与浏览器刷新率同步（通常60fps），确保动画流畅性。

function animate() {
  requestAnimationFrame(animate);
  // 更新逻辑
  renderer.render(scene, camera);
}
animate();

关键优化点：

避免在循环中创建新对象
使用增量计算替代绝对赋值
合理控制帧率（可通过performance.now()实现）

1.2 基础变换动画

物体变换包含位置(position)、旋转(rotation)、缩放(scale)三大属性，支持逐帧修改实现动态效果：

function updateScene() {
  // 复合旋转（欧拉角）
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  // 正弦波位置动画
  const time = Date.now() * 0.001;
  mesh.position.y = Math.sin(time) * 2;
  // 呼吸效果缩放
  mesh.scale.set(
    1 + Math.sin(time * 0.5) * 0.3,
    1 + Math.sin(time * 0.5 + 1) * 0.3,
    1 + Math.sin(time * 0.5 + 2) * 0.3
  );
}

进阶技巧：

使用四元数(Quaternion)避免万向节死锁
矩阵变换(Matrix4)实现复杂组合变换
顶点着色器实现GPU加速动画

二、专业动画解决方案

2.1 补间动画系统

补间动画通过定义起始/结束状态自动生成中间帧，主流实现方案包括：

TWEEN.js 基础用法

import * as TWEEN from 'three/addons/libs/tween.module.js';
const tween = new TWEEN.Tween(mesh.position)
  .to({ x: 5, y: 0, z: 3 }, 2000)
  .easing(TWEEN.Easing.Elastic.Out)
  .onUpdate(() => {
    // 实时更新回调
  })
  .start();
// 在动画循环中更新
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  renderer.render(scene, camera);
}

GSAP 高级特性

GSAP提供更丰富的动画控制：

gsap.to(mesh.scale, {
  x: 1.5,
  y: 1.5,
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: "power2.inOut"
});

2.2 骨骼动画系统

对于角色动画，Three.js支持GLTF格式的骨骼动画：

const mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
function animate() {
  const delta = clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}

性能优化：

使用动画分层(AnimationLayers)
关键帧压缩
蒙皮矩阵批量处理

三、交互系统开发

3.1 鼠标交互体系

射线投射检测

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener('mousemove', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});
function checkIntersection() {
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    const obj = intersects[0].object;
    obj.material.emissive.setHex(0x666666);
    // 触发点击事件等
  }
}

高级交互模式

拖拽控制：结合TransformControls
悬停提示：使用Sprite或CSS2DRenderer
选择框：实现矩形区域选择

3.2 键盘与游戏手柄

键盘事件处理

const keyMap = {};
window.addEventListener('keydown', (e) => { keyMap[e.key] = true; });
window.addEventListener('keyup', (e) => { keyMap[e.key] = false; });
function updateControls() {
  if (keyMap['w']) mesh.translateZ(0.1);
  if (keyMap['s']) mesh.translateZ(-0.1);
  if (keyMap['a']) mesh.translateX(-0.1);
  if (keyMap['d']) mesh.translateX(0.1);
}

游戏手柄支持

const gamepads = {};
window.addEventListener("gamepadconnected", (e) => {
  gamepads[e.gamepad.index] = e.gamepad;
});
function handleGamepad() {
  const gamepad = gamepads[0];
  if (gamepad) {
    mesh.position.x += gamepad.axes[0] * 0.1;
    mesh.position.z += gamepad.axes[1] * 0.1;
  }
}

3.3 物理交互集成

结合某物理引擎实现真实碰撞：

// 初始化物理世界
const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.82, 0)
});
// 创建物理刚体
const shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const body = new CANNON.Body({ mass: 1, shape });
world.addBody(body);
// 同步到Three.js
function syncPhysics() {
  mesh.position.copy(body.position);
  mesh.quaternion.copy(body.quaternion);
}

四、性能优化策略

动画批处理：合并相似物体的更新逻辑
层级裁剪：使用frustumCulling自动剔除不可见物体
工作线程：将复杂计算移至Web Worker
LOD系统：根据距离动态调整模型细节
实例化渲染：对重复物体使用InstancedMesh

五、典型应用场景

产品3D展示：结合动画说明和交互热点
数据可视化：动态图表与用户过滤交互
虚拟展厅：第一人称控制与物品交互
游戏原型：角色控制与物理反馈系统

通过系统掌握这些技术，开发者可以构建出从简单演示到复杂交互应用的全方位3D解决方案。建议结合实际项目需求，逐步深入各个模块的实现细节。

Three.js 动画与交互开发实战指南