The animation clips are dynamically created based on some state. You can see an example in another question I opened: As animations go faster there is increasing error in accuracy
Here’s one section where i’m creating the animations:
for (let child of [...readGroups.children].reverse()) {
console.log(child.name, child.position.z, readGroups.position.z)
cb('testing ' + child.name)
await asyncAnimate([
new THREE.NumberKeyframeTrack(readGroups.uuid + '.position[z]', [0, SPEED], [readGroups.position.z, - child.position.z + 150])
])
if (child.name == state.read) {
cb('match! moving down')
await asyncAnimate([
new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y - 150])
])
readChild = child
scene.remove(readClone)
break
} else {
await asyncAnimate([
new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y - 30])
])
await asyncAnimate([
new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y + 30])
])
cb('no match moving...')
}
}
will probably be helpful to throw in the asyncAnimate function too:
function asyncAnimate(tracks) {
return new Promise((resolve, reject) => {
let clip = new THREE.AnimationClip(null, SPEED, [...tracks])
let clipAction = mixer.clipAction(clip)
clipAction.setLoop(THREE.LoopOnce)
clipAction.clampWhenFinished = true
clipAction.play()
function res() {
mixer.removeEventListener('finished', res)
mixer.stopAllAction()
resolve()
}
mixer.addEventListener('finished', res)
})
}