Search code examples
javascripthtmlaframevirtual-reality

Aframe 'startEvents' not working with gltf model

I'm trying to animate the position of a gltf model using A-Frame by clicking on a button. The animation works without the 'startEvents' property but stops working as soon as the property is added. The animation does work on an aframe primitive.

Here's an example of the problem: https://jsfiddle.net/ofp46ge0/1/

HTML:

<a-entity id="#whale" gltf-model="#whale" position="0 1.5 -10" rotation="5 -50 0" scale="5 5 5" 
animation="property: position; from: 0 1.5 -10; to: 0 0 0; startEvents: position; dur: 2000; delay: 2000;">
</a-entity>

JS:

document.querySelector(".enter").addEventListener('click',function () {
  document.querySelector("#whale").emit("position");
});

What am I missing here?

Solution

  • You have an <a-asset-item id="whale"> and your event is going there. Rename it to id="whaleModel".