three.js中的第一人称动画

时间:2018-09-12 11:15:03

标签: javascript animation three.js

我正在Three.js中制作第一人称游戏。我想在玩家移动或射击时显示枪支的某种动作。我对Three.js非常陌生,并且对使用animationmixer的Three.js中的动画一无所知。目前,我正在以最原始的方式进行此操作。我只是向枪支添加一个框架变量,并在每次新游戏更新中增加它。基于更新,我只是使用正弦来更改游戏的y位置并进行一些移动。

当动画是排序的并且不需要做诸如反冲和拾取某些物品之类的高级操作时,此方法非常有用。如何在three.js中处理这种动画?

1 个答案:

答案 0 :(得分:1)

如果您想要更高级的动画,可以下载带有动画的模型,例如这把枪https://sketchfab.com/models/26adfd631730494ab0fc80c806eada77,然后使用GLTF加载程序加载它(您可以在three.js / examples / js / loaders中找到它)

var loaderGLTF = new THREE.GLTFLoader();
loaderGLTF.load('gun.gltf', function (gltf) {
  gltf.scene.traverse(function (child) {
    var animations = gltf.animations;
    if (animations && animations.length) {
      mixer = new THREE.AnimationMixer(gltf.scene); // mixer is a global variable
      animation = mixer.clipAction(animations[0]));
      animation.play();
    }
  });
  scene.add(gltf.scene);
}, (xhr) => xhr, (e) => console.error(e));

只需记住在渲染循环中更新混频器,init函数中的clock = THREE.Clock()。

if (mixer) mixer.update(clock.getDelta());