Как сделать анимацию с помощью пакета «3-gltf-loader» npm - PullRequest
Новая
       42

Как сделать анимацию с помощью пакета «3-gltf-loader» npm

0 голосов
/ 24 мая 2019

Я создаю приложение для реагирования, в котором мне нужно показать 3D-модель (glTF) с анимацией.

Я использую пакет npm "three-gltf-loader" и могу правильно загрузить 3D-модель. Но во время воспроизведения анимации это не работает нормально. Как только я добавляю код для запуска анимации, модель искажается.

Я пытался найти решение через Google, но у меня ничего не вышло. Я использую базовую кодовую базу с этого URL "https://medium.com/@colesayershapiro/using-three-js-in-react-6cb71e87bdf4".

Следующий код находится в функции componentDidMount () 

    let clock = new THREE.Clock();
    const loader = new GLTFLoader();
    loader.load(
      objMap,
        ( gltf ) => {
            const model = gltf.scene;
            // called when the resource is loaded
            model.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.geometry.center(); // center here
                }
            });
            model.scale.set(100,100,100);


            if (gltf.animations && gltf.animations.length) {
              const mixer = new THREE.AnimationMixer(model);
              mixers.push( mixer );
              for (var i = 0; i < gltf.animations.length; i++) {
                  var animation = gltf.animations[3];
                  if (animation.name == 'Idle'){
                    mixer.clipAction(animation).play();
                  }
              }
            }

            scene.add( model );

        },
        ( xhr ) => {
            // called while loading is progressing
            console.log( `${( xhr.loaded / xhr.total * 100 )}% loaded` );
        },
        ( error ) => {
            // called when loading has errors
            console.error( 'An error happened', error );
        },
    );

Следующий код находится в функции "animate ()" 

    for ( let mixer of this.mixers ) {
      mixer.update( delta );
    }

... Image for reference

...