first person animations in three.js

Question

i am making a first person game in three.js. i want to show some sort of movement in the gun when the player moves or fires. i am extremely new to three.js and know absolutely nothing about animation in three.js using the animationmixer. currently i am doing this in the most primitive way possible. i am simply adding a frames variable to the gun and increasing it in every new game update. based on the update i am simply using sine to change the y-position of the game and give it some movements.

this method is good when the animations are sort and doesnt have to do advanced stuff like recoil and picking up some item. how do handle this kind of animations in three.js?

corashina corashina · Accepted Answer · 2018-09-12T11:50:24

If you want more advanced animations you can download models with animations, for example this gun https://sketchfab.com/models/26adfd631730494ab0fc80c806eada77, then load it using GLTF loader (you can find it in 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));

Just remember to update mixer in the render loop, clock = THREE.Clock() in init function.

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

first person animations in three.js

1 Answers