@IliaNeverov

Как сделать так чтобы анимация gltf модели воспроизводилась в three js?

Здравствуйте! У меня есть gltf модель , которую я заанимировал и вставил на сцену. Подскажите пожалуйста как сделать так чтобы эта анимация воспроизводилась.
Ниже представлен мой код.
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();
  • Вопрос задан
  • 1105 просмотров
Решения вопроса 1
strangerintheq
@strangerintheq
z = z*z + с
Загружаем модель, выбираем проигрываемую анимацию:

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);
});


И потом в requestAnimationFrame обновляем время:

mixer.update( clock.getDelta() )
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы