ThreeJS分离模型与动画，解锁模型自由更换与动画保持

2024-03-30 16:54:01

ThreeJS 中分离模型与动画数据，解锁灵活模型交换

简介

在 ThreeJS 中，我们经常需要将模型数据和动画数据分离，例如在游戏中更换角色模型时保留角色动画。传统的做法是将每个动画打包到单个模型中，限制了模型的灵活性。本文将详细介绍如何在 ThreeJS 中实现模型和动画数据的分离，让你可以自由地更换模型，同时保持动画。

创建独立的文件

第一步是创建两个独立的文件：

模型文件： 存储模型数据（如 .gltf 或 .obj）。
动画文件： 存储动画数据（如 .glb 或 .fbx）。

加载模型和动画

使用 ThreeJS 的 GLTFLoader 或 FBXLoader 加载模型和动画文件：

const modelLoader = new GLTFLoader();
const animationLoader = new FBXLoader();

modelLoader.load('model.gltf', (gltf) => {
  scene.add(gltf.scene);
});

animationLoader.load('animation.fbx', (animation) => {
  mixer = new THREE.AnimationMixer(gltf.scene);
  mixer.clipAction(animation.animations[0]).play();
});

分离模型和动画数据

加载模型和动画后，分离数据：

const model = gltf.scene;
const animationClip = animation.animations[0];

更换模型

现在，我们可以更换模型，而动画依然保持：

const newModelLoader = new GLTFLoader();

newModelLoader.load('newModel.gltf', (newGltf) => {
  const newModel = newGltf.scene;

  // 添加新模型到场景
  scene.add(newModel);

  // 将动画剪辑应用到新模型
  mixer.clipAction(animationClip).setEffectiveTime(0).setEffectiveWeight(1).play();
});