Glb setTime animation mixer

🧑‍💻 Technical Support
1

I have a simple GLB file that is a mesh deform wave animation. I would like to place multiple copies of the wave but offset their start frames to get a more realistic ocean.

Is it possible to start a glb animation at say frame 10?

2

Hi @Bill_Sullivan!

I believe the ideal way to go here would be to add a looped setTimeout to all the elements with the same model. Here’s how I would do it in steps:

  1. Add a class to all the copies of the glb in the scene, for example wave
  2. Create a file called wave-animator.js and write a component called wave-animator and inside this component, the following:
export const waveAnimatorComponent = {
  init() {
    this.delay = 100
    this.waves = document.querySelectorAll('.wave')
    
    this.el.sceneEl.addEventListener('realityready', () => {
      this.waves.forEach((wave, idx) => {
        setTimeout(() => {
          wave.setAttribute('animation-mixer', {
            clip: '*',
            loop: 'repeat',
          })
        }, idx * this.delay)
      })
    })
  },
}

You’ll notice that I added a delay of 100ms per wave. this won’t delay the animation of the first wave because the index is 0, but every other wave animation will be delayed by increments of 100 milliseconds. You can edit the this.delay value to then reflect the delay you wish to have per wave.

  1. in your app.js file, import this component like so:
import { waveAnimatorComponent } from './wave-animator'

AFRAME.registerComponent('wave-animator', waveAnimatorComponent)
  1. In your a-scene attach the wave-animator component and from that point on it should work

Hope this helps :slight_smile:

3

Hi Joao,

Thanks for this. I was looking for something like animation-mixer.mixer.setTime(10) (I did find some showing this animation-mixer.mixer) but no examples of 8thwall implimention. I was starting to think along the lines of what you’ve shown, adding the extra waves via java and delaying them being added to the scene to create the offset. What you’ve shown should work for me, thank you!

1 Like
4

Try using the animation-mixer’s startAt param?

Configures the animation clip to begin at a specific start time (in milliseconds). This is useful when you need to jump to an exact time in an animation. The input parameter will be scaled by the mixer’s timeScale. Negative values will result in a pause before the animation begins.

1 Like