用 Three.js 赋予 3D 人物生命：全面的动画指南

2024-03-23 14:33:16

Three.js：用动画赋予 3D 人物生命

在数字艺术的迷人世界中，创造逼真的 3D 人物动画是一项至关重要的任务。Three.js，作为 JavaScript 库，为实现此目标提供了强大的工具。在这个全面指南中，我们将深入探索如何利用 Three.js 为 3D 人物实施栩栩如生的动画效果。

Three.js 的神奇之处

Three.js 是一款功能强大的 JavaScript 库，专门用于在 Web 浏览器中构建交互式 3D 场景和动画。它提供了一套丰富的 API，可轻松操纵对象、应用变换，并处理光照和阴影。借助 Three.js，你可以将你的创意愿景变为现实，创造出引人入胜的 3D 体验。

从零开始构建动画人物

1. 初始化场景

首先，我们需要创建一个 Three.js 场景，作为我们人物动画的舞台。这涉及创建场景、相机和渲染器，它们是 3D 渲染的基础元素。

2. 加载人物模型

下一步是导入我们的 3D 人物模型。我们使用 GLTFLoader 从 glTF 文件中加载模型，该文件包含人物的几何形状和动画数据。加载模型后，我们将它添加到我们的场景中。

3. 应用姿势

关键步骤是将动画数据应用到人物模型上。Three.js 提供了 applyPose() 函数，该函数读取动画数据并更新模型中相应骨骼的旋转。通过遍历坐标数据并应用变换，我们可以让人物动起来。

4. 动画循环

为了实现平滑的动画，我们需要一个持续更新场景并触发渲染的动画循环。在这个循环中，我们更新人物姿势，并调用渲染器来绘制场景。

5. 示例代码

以下示例代码演示了如何使用 Three.js 创建一个基本的 3D 人物动画：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ canvas: canvas });

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('path/to/model.glb', (gltf) => {
  avatar = gltf.scene;
  scene.add(avatar);

  let poseDataArray = [
    {
      "Spine": { x: 0, y: 0.1, z: 0 },
      "RightArm": { x: 0.2, y: 0, z: 0 },
      "LeftHand": {x: 0.3, y: 0.3, z: 0.1},
    },
    {
      "Spine": { x: 0, y: 0.2, z: 0 },
      "RightArm": { x: 0.3, y: 0, z: 0 },
      "LeftArm": {x: 0.9, y: -0.5, z: 0.15},
      'LeftHandIndex1': {x: 0.9, y: -0.5, z: 0.15},
      'RightUpLeg': {x: 0.2, y: 0.2, z: 0.25},
      'LeftUpLeg': {x: 0.5, y: 0.2, z: 0.5}
    },
  ];

  let currentPoseIndex = 0;

  const animate = () => {
    requestAnimationFrame(animate);

    if (currentPoseIndex < poseDataArray.length) {
      applyPose(avatar, poseDataArray[currentPoseIndex]);
      currentPoseIndex++;
    }

    renderer.render(scene, camera);
  };

  animate();
});