The animation starts just when the image target is detected but not with sound, help!

🧑‍💻 Technical Support
1

Hi ! this is my code that starts animationbut NOT with the sound even if I made an splash screen before. I put the code just with the animation that works for the image target ( not with sound), Can any one help me adding audio?

import * as ecs from ‘@8thwall/ecs’

ecs.registerComponent({
name: ‘PlayGLBClipOnImageFound’,
schema: {
model: ecs.eid, // Nodo del modelo GLB
clipName: ecs.string // Nombre del clip o “*” para reproducir todos
},

stateMachine: ({ world, eid, schemaAttribute }) => {
ecs.defineState(‘default’)
.initial()
.listen(world.events.globalId, ‘reality.imagefound’, () => {
const { model, clipName } = schemaAttribute.get(eid)

    setTimeout(() => {
      ecs.GltfModel.set(world, model, {
        animationClip: clipName || '*',
        loop: false,
        paused: false,
        time: 0,
        timeScale: 1,
        crossFadeDuration: 0
      })

      console.log(`🎬 Animación '${clipName || "*"}' reproducida con delay`)
    }, 50)  // 50 ms de retardo
  })

}
})

2

Hi, welcome to the forum!

Something like this? HELP! Image Target Lost with video Issue — Visual Studio ECS Code - #10 by GeorgeButler

3

MY HEROOOOOOO!!! just one more… My GLB model restarts when image target is lost and that causes the audio to become out of sync. What I need to change my model to not restart?

import * as ecs from ‘@8thwall/ecs’

ecs.registerComponent({
name: ‘PlayGLBClipOnImageFound’,
schema: {
model: ecs.eid, // Nodo del modelo GLB
clipName: ecs.string // Nombre del clip o “*” para reproducir todos
},

stateMachine: ({ world, eid, schemaAttribute }) => {
ecs.defineState(‘default’)
.initial()
.listen(world.events.globalId, ‘reality.imagefound’, () => {
const { model, clipName } = schemaAttribute.get(eid)

    setTimeout(() => {
      ecs.GltfModel.set(world, model, {
        animationClip: clipName || '*',
        loop: false,
        paused: false,
        time: 0,
        timeScale: 1,
        crossFadeDuration: 0
      })

      console.log(`🎬 Animación '${clipName || "*"}' reproducida con delay`)
    }, 50)  // 50 ms de retardo
  })

}
})

4

Your model animation will restart anytime the target is found. If you don’t want it to reset you’ll need to add a variable to keep track if it’s ever been restarted before.