GLTF Animation doesn't play when adding in material Three.js

Question

I have a working GLTF animation that automatically starts playing when the page loads, however whenever I try to add a material to it, the animation no longer plays but the material appears. How do I fix this or if there is an easier way just to add a block colour to a gltf model please let me know, thanks.

    var loader = new THREE.GLTFLoader();
    loader.setDRACOLoader( new THREE.DRACOLoader() );
    // Load a glTF resource
    loader.load(
      // resource URL
      '../models/fox3.gltf',
      // called when the resource is loaded
      function ( gltf ) {

        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Scene
        gltf.scenes; // Array<THREE.Scene>
        gltf.cameras; // Array<THREE.Camera>
        gltf.asset; // Object

        //Loading in and positioning model
        var object = gltf.scene;
        object.scale.set(10,10,10);
        object.position.set (-300, 20,-400);
        object.rotation.y = 0.5;
 
        //Playing Animation
         mixer = new THREE.AnimationMixer(gltf.scene);
         console.log(gltf.animations)
         mixer.clipAction( gltf.animations[0] ).play();


        //Adding texture/colour to model (causes animation to stop playing)
         // materialObj = new THREE.MeshBasicMaterial( { color: "#9E4300"} );
         // object.traverse(function(child){
         //   if (child instanceof THREE.Mesh){
         //     //child.material = materialObj;
         //   }
         // });


        console.log(object);
        scene.add( object )
      });

try materialObj = new THREE.MeshBasicMaterial( { color: "#9E4300", skinning: true} ); — prisoner849

emackey emackey · Accepted Answer · 2019-01-08T15:52:44

or if there is an easier way just to add a block colour to a gltf model please let me know, thanks.

I'll address this last part of your question. The MeshBasicMaterial has the lighting calculations turned off, and in glTF this is supported with an extension called KHR_materials_unlit.

Here's a sample model called BoxUnlit.gltf that shows this extension in action. Two key places to note are ExtensionsUsed at the top, and the material near the bottom.

One major gotcha here is that the material's BaseColorFactor is specified in linear colorspace, while textures are provided in sRGB colorspace. So you have to take your chosen color and convert it to linear, typically by mathematically raising each component to the power of 2.2.

For example, your question contains color value #9E4300, which in 0..255 scale is equal to (158, 67, 0). Divide each number by 255, then raise by 2.2:

  Red == (158 / 255.0) ** 2.2 == 0.348864834
Green == ( 67 / 255.0) ** 2.2 == 0.052841625
 Blue == (  0 / 255.0) ** 2.2 == 0.0

Use those values as the RGB values of the glTF model's BaseColorFactor, along with an alpha value of 1.0, like so:

"materials": [
    {
        "pbrMetallicRoughness": {
            "baseColorFactor": [
                0.348864834,
                0.052841625,
                0.0,
                1.0
            ]
        },
        "extensions": {
            "KHR_materials_unlit": {}
        }
    }
],

With that, ThreeJS should automatically select the MeshBasicMaterial for the model.

GLTF Animation doesn't play when adding in material Three.js

2 Answers