I
I
IliaNeverov2020-08-10 17:42:29
css
IliaNeverov, 2020-08-10 17:42:29

How to make gltf model animation play in three js?

Hello! I have a gltf model that I have animated and pasted into the scene. Please tell me how to make this animation play.
Below is my code.

var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 10000);
      camera.position.z = 400;
      camera.position.y = 100;
      camera.position.x = -400;
      camera.rotation.y = -0.6;
      camera.rotation.x = 0;
      camera.rotation.z = 0;
      const skyColor = 0xfff9e8;  // light blue
      const groundColor = 0x433b2f;  // brownish orange
      const intensity = 1;
      const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
      scene.add(light);
      scene.background = new THREE.Color( 0x64A8D1 );


      var gltfloader = new THREE.GLTFLoader();

      var object= [];

      gltfloader.load('object.gltf', function(result){
          object[0] = result.scene;
          object[0].scale.set(35,35,35);
          object[0].position.set(-100, -65, 0);
          object[0].rotation.set(0.2, -20, 0);
          scene.add(object[0]);
      });
     var yposofbird = 0;
      // оживление сцены
      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      document.body.appendChild(renderer.domElement);
      renderer.ShadowMapEnabled = true;
      function render() {
        requestAnimationFrame(render);    

        object[0].position.y += yposofbird;


        renderer.render(scene, camera);


     };
    render();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stranger in the Q, 2020-09-29
@IliaNeverov

Load the model, select the animation to play:

const gltfLoader = new THREE.GLTFLoader();
const clock = new THREE.Clock();

let mixer;

gltfLoader.load( "model.gltf", model =>  {
    mixer = new THREE.AnimationMixer(model.scene);
    mixer.clipAction(model.animations[0]).play();  // <- первая по списку анимация
    scene.add(model.scene);
});

And then to requestAnimationFrameupdate the time:
mixer.update( clock.getDelta() )

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question