Search code examples
animationthree.jstextures

Updated textures stops animation in three.js


Moving on from yesterday. I'm swapping out a texture on a .GLTF on page refresh. The texture now works fine and dandy...

But only on files that have no animation. The texture update however, seems to stop them in their literal tracks. I've not sure what's causing it or how to reload the animations.

Here's the code:

    var creaturePath = "models/gltf/creature/";
    var creatureFile = "creature_roar.gltf";

    // load the model
    var loader = new GLTFLoader().setPath( creaturePath ); // creature

    loader.load( creatureFile, function ( gltf ) 
    {
        gltf.scene.traverse( function ( child )
        {
            if ( child.isMesh )
            {
                // override textures
                texture.flipX = false;
                texture.flipY = false;
                my_material = new THREE.MeshBasicMaterial({map: texture});
                // child.material = my_material; // this is the problem line
                texture.needsUpdate = true;
            }

        } );

        var model = gltf.scene;

Solution

  • If you replace the material, you have to ensure to set MeshBasicMaterial.skinning and/or MeshBasicMaterial.morphTargets to true. Otherwise skeletal and/or morph target animation won't be supported by the material.

    three.js R113