如何使用“ three-gltf-loader” npm软件包制作动画

Question

我正在React上构建一个应用程序，其中我必须显示带有动画的3D模型（glTF）。

我正在使用“ three-gltf-loader” npm软件包，并且能够正确加载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 );
    }

...