Studio: updating ecs.GltfModel by code, animationClip not playing

🧑‍💻 Technical Support
1

Hi everyone,

In my WebAR app, I’m trying to update a component on one of my entities: ecs.GltfModel(..), specifically its url property to load a new model.

I have a reset function that is called at some point to update the GltfModel’s “url” and play its animation:

const handleReset = (event, world, component) => {
  const {data: {url, clip}} = event
  const {eid} = component

  handlePause(component)
  handleGrowing(component, false)

  // Load a new Mushroom component
  // ecs.GltfModel.mutate(world, eid, (cursor) => {
  //   cursor.url = url
  //   cursor.animationClip = 'Jump'
  //   cursor.repetitions = -1
  // })
  const currentModel = ecs.GltfModel.cursor(world, eid)
  currentModel.url = url
  currentModel.animationClip = clip
  currentModel.repetitions = -1 // forever loop
}

The new model is loaded, but the animation clip is never playing on this newly loaded model (clip is always defined with the expected value). I tested using cursor, mutate, and acquire/commit, but I can’t get the animation to play. I also did try to ecs.GltfModel.remove(..) and then ecs.GltfModel.set(..) but the animation is not playing.

I noticed an error happening when updating GltfModel url and playing a new animation. THREE.PropertyBinding: Trying to update node for track: Head2.position but it wasn't found.
It seems this error could be related to the fact that some parts of the previous GLTF model, are not fully disposed. Is there something I can do to fix this issue? Thank you.

2

Hi,
I got a similar issue while working in the Cloud Editor.
The solution was to wait for the GLTF model to fully load.
In the Cloud Editor, there is an event that triggered this, but I’m not sure if Studio has a similar one:
Cloud editor code

myObj.addEventListener('model-loaded', () => {
  // Once the model is loaded, we can start the animation
})

Maybe you can add a timer to wait for 1 second before playing the animation:

setTimeout(() => {
  // Play animation after 1 second
}, 1000);
3

Thank you, indeed with cloud editor and a-frame you can do this,

But with studio there is another callback available once the model is fully loaded: ecs.events.GLTF_MODEL_LOADED : { model } unfortunately I tried to play the animation within the callback too but it’s not working. I think there is another problem.

4

The solution I chose is as follows: I created as many entities as I needed, each with its own gltfModel and a component with the logic I need for this model.

Initially, I considered having a single Entity with its component attached to it, where I could dynamically update a URL parameter to load different models and animations. This approach seemed interesting, as it would avoid creating extra entities for each model that shares the same logic, differing only in their models and animations. However, this might not be the best approach in this case, at the end a component is also made to be reusable.