[animation-mixer] Not working when inserting an element with createElement

[hassanshaikley]

Animation-mixer isn’t working when I add a glb model via document.createElement(glb_model); in that the model isn' animating.

When I write the HTML by hand there's no issue. I've been trying to debug this and I'll let you know if I find anything.

I found that this call const changes = AFRAME.utils.diff(data, prevData); results in {} on the first iteration which is the root of the issue. When I load it with straight HTML (no JS) it is an object that's populated with lots of stuff.

[hassanshaikley]

And if y'all want code this is it:

export const createCharacter = () => {
    // <a-gltf-model id="mage-dude" src="#mage_dude_asset" mage_dude position="0 0 0" class="collidable" animation-mixer></a-gltf-model>
    const mage_dudeEl = helper({
        "type": "a-gltf-model",
        "mage_dude": true,
        "id": "mage_dude",
        "position": "0 0 0",
        "src": "mage_dude_asset",
        "class": "collidable",
        "animation-mixer": true
    });

    const scene = document.getElementsByTagName("a-scene")[0];
    document.getElementsByTagName("a-scene")[0].appendChild(mage_dudeEl);

    return mage_dudeEl;
}


const helper = ({ type: type, ...attrs }) => {
    const element = document.createElement(type);
    for (var property in attrs) {
        element.setAttribute(property, attrs[property])
    }
    return element;

}

[dirkk0]

Not sure what's wrong with your code, but this works like a charm:

  var entityEl = document.createElement("a-entity");
  entityEl.setAttribute("id", "model1");
  entityEl.setAttribute("gltf-model", thisModel.name);
  entityEl.setAttribute("model-test", "");
  entityEl.setAttribute("animation-mixer", "loop: once;");

So I guess this is not really a bug.

[donmccurdy]

I think this has to do with the A-Frame component lifecycle, but I don't see an obvious issue in your code. If I remember right you do need to use vanilla setAttribute syntax — rather than the fancy three.js version that accepts objects — before the element is mounted and initialized:

entityEl.setAttribute("animation-mixer", "loop: once;");

[samyH]

I have found some issues with this also - First run though I create and append using jquery:

<a-entity id="checkpoint" gltf-model="#ring-glb" animation-mixer="clip: disc-in; timeScale: 0;" position="0 0 0" scale="11 11 11">

I have a close button which removes everything from the scene using:

fsGameObjects.map(function(e) { e.parentNode.removeChild(e); });

Next play through I create using the same creation method although rather than the animation being set at timeScale 0 and playing when triggered using setAttribute method as above, no subsequent animation-mixer calls do anything.

I'm still looking into it, but I'm thinking of creating a unique id each time to see if that helps.

[vincentfretin]

Can anyone having an issue here please provide a glitch example based on https://glitch.com/~aframe that uses latest aframe-extras master where you can reproduce the issue? Current build is https://cdn.jsdelivr.net/gh/n5ro/aframe-extras@09b8445/dist/aframe-extras.min.js