GLTF2 animations

[amitrajput1992]

Description

When using GLTF2ModelLoader to load in .gltf files, animations that are present in the resource are ignored, instead, there's another param 'animations' that we need to pass explicitly while setting the source to the Model component.

from #320

<Model
          source={{
            gltf2: asset('duck.gltf'),
            animations: this.state.animations,
          }}
/>

I have a gltf model and in the definition itself, the animations json is defined. But what I see in GLTF2ModelLoader.js, animations are only applied for the ones that are passed explicitly.

// apply the definition animation settings
      this.updateAnimation(definition);

I am not sure if this is the intended behaviour with gltf2 models or should there be support for built in definition animations.

Expected behavior

Support animations built into the definition.

Actual behavior

definition animations are ignored

Reproduction

1. Load the model available at: monstergltf.gltf.zip
2. Animations don't run.

Solution

Allow definition animations as well as explicit animations.

const onLoad = gltf => {
      if (gltfStateCache.has(this.url)) {
        gltfStateCache.addReference(this.url);
      } else {
        // disabling until gltf clone issue is resolved
        // https://github.com/mrdoob/three.js/issues/11573
        //gltfStateCache.addEntry(this.url, gltf);
      }
      // https://github.com/mrdoob/three.js/issues/11573
      //this.scene = gltf.scene.clone();
      this.scene = gltf.scene;

      this.mixer = new THREE.AnimationMixer(this.scene);

      // load the animations into the mixer
      const animations = gltf.animations;
      if (animations && animations.length) {
        for (let i = 0; i < animations.length; i++) {
          const animation = animations[i];
          this.allAnimations[animation.name] = this.mixer.clipAction(animation);
        }
      }

      // apply the definition animation settings
      this.updateAnimation(gltf); // this is the change here

      // need to wait a frame for other attributes to setup
      // FIXME
      requestAnimationFrame(() => {
        parent.add(this.scene);
      });
    };

Additional Information

• 'react-vr' package version: 2.0.0
• 'react-vr-web' package version: 2.0.0
• Operating System: Linux Mint 18
• Graphics Card: Intel 4000
• Browser: Chrome 59
• VR Device: None

[mikearmstrong001]

I set this up to reference a separate file on purpose. The justification is that it is not uncommon in games to have geometry separate from the animations as different teams work on them. Your point is valid though and we probably want both

[amitrajput1992]

Any plan on supporting this soon? Else I can setup a PR to address the same

[kevinsimper]

This could be pretty interesting as I was also looking into if it was actually possible to use animations with the models.