ThreeJS 变形动画：geometry.morphTargets 详解

ThreeJS 是一个流行的 JavaScript 3D 库，它使得在浏览器中创建和显示 3D 图形变得简单。在 ThreeJS 中，geometry.morphTargets 是一个强大的功能，允许您创建变形动画。通过调整 morphTargets 的权重，您可以平滑地改变几何体的形状，从而实现各种动态效果。

什么是 Morph Targets？

Morph Targets 是一种在 3D 模型中定义变形目标的技术。这些目标定义了模型在不同状态下的形状，通过调整权重，可以将模型从一种形状平滑地变形到另一种形状。在 ThreeJS 中，每个几何体都可以包含多个 morphTargets，每个 morphTarget 定义了相对于原始形状的变形。

如何使用 geometry.morphTargets？

使用 ThreeJS 的 geometry.morphTargets 创建变形动画可以分为以下几个步骤：

1. 准备模型: 首先，您需要一个包含多个 morphTargets 的 3D 模型。这些目标通常在建模软件中预先定义，然后导出为 ThreeJS 支持的格式（如 OBJ 或 GLTF）。
2. 加载模型: 使用 ThreeJS 的加载器（如 GLTFLoader 或 OBJLoader）加载包含多个 morphTargets 的模型文件。
3. 设置权重: 在动画循环中，根据需要调整每个 morphTarget 的权重。权重的值在 0 到 1 之间，表示当前形状与对应 morphTarget 的接近程度。
4. 更新几何体: 将修改后的权重传递给几何体，ThreeJS 会自动计算并应用变形效果。
5. 实现动画: 通过定时更新权重值，您可以创建各种变形动画，如逐渐变形、循环变形等。

示例代码：

下面是一个简单的示例代码，演示如何使用 ThreeJS 的 geometry.morphTargets 创建变形动画：

```javascript
// 加载模型
const loader = new THREE.GLTFLoader();
loader.load(‘path/to/model.gltf’, function(gltf) {
// 获取几何体和材质
const geometry = gltf.scene.children[0].geometry;
const material = gltf.scene.children[0].material;

// 创建几何体实例
const mesh = new THREE.Mesh(geometry, material);

// 定义初始权重和目标权重
const initialWeight = 0;
const targetWeight = 1;

// 在动画循环中更新权重
function animate() {
requestAnimationFrame(animate);

// 根据时间计算权重值
const weight = Math.sin(Date.now() * 0.0005) * 0.5 + 0.5;
// 应用权重到所有 morphTargets
for (let i = 0; i < geometry.morphTargets.length; i++) {
  geometry.morphTargets[i].weight = weight;
}
// 更新几何体并渲染场景
mesh.geometry.update();
renderer.render(scene, camera);

}

animate();
});