骨骼动画漫游三维世界！Three.js教你实现人物行走动画

2023-04-27 15:22:10

Three.js骨骼动画漫游三维世界

一、使用GLTF模型中的骨骼动画

在元宇宙和AR/VR技术的蓬勃发展下，对三维技术的应用需求不断飙升。而人物行走动画是三维场景中不可或缺的一项元素。Three.js，作为三维领域的一把利器，为我们提供了多种实现人物行走动画的途径。其中，使用GLTF模型中的骨骼动画是较为常见且便捷的一种方法。

GLTF（GL Transmission Format）是一种通用的三维模型格式，它支持骨骼动画。我们可以利用Three.js提供的GLTFLoader加载GLTF模型，再通过设置动画剪辑和动画混音器来播放动画。

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  const model = gltf.scene;
  const animationMixer = new THREE.AnimationMixer(model);
  const animations = gltf.animations;

  // 播放动画
  const animationClip = animations[0];
  const action = animationMixer.clipAction(animationClip);
  action.play();

  // 循环播放动画
  action.setLoop(THREE.LoopRepeat);
});

二、通过更改位置属性实现

如果GLTF模型中没有集成骨骼动画，我们还可以通过更改人物的位置属性来实现人物行走动画。这个方法的原理是，在场景不断刷新的过程中，我们持续更新人物的位置属性，从而让它在三维场景中移动。

const model = new THREE.Object3D();
scene.add(model);

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();

  // 更新人物的位置属性
  model.position.x += delta * 0.1;

  // 限制人物的移动范围
  if (model.position.x > 10) {
    model.position.x = -10;
  }

  renderer.render(scene, camera);
}

animate();