How do I make the gltf model animation play back in three js?

Questions
, ,
1

Hello! I have an animated gltf model and put on stage. How to make this animation play.
My code is shown below.

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();
2

Duplicate of: Easiest way to play skeletal animation from glTF

1 Like