Control GLTF animation based on a value or scroll.

[AnupamKris]

Description

I have a model which is animated in blender and I am able to play it in Tres. But I want to control the timeline based on the window scroll or any value in the app. How can I achieve this? I went through the docs completely but didn't find anything..

Suggested solution

A function to control the animation like setTime or setFrame.

Alternative

No response

Reproduction Repository

https://github.com/AnupamKris/threeBugFix

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alvarosabu]

Hi @AnupamKris do you mean creating an AnimationMixer? If so you can do it with this composable available on cientos package https://cientos.tresjs.org/guide/abstractions/use-animations.html#useanimations

If you are looking for a way to take control of the whole renderer loop, you will need to wait for future releases, we are working on it atm, see #633 for more info

[AnupamKris]

I want to know if I could bind the animations timeline or seek to a value in vue. I saw the mixer.setTime() and mixer.update() functions, but nothing seems to be affecting the animation. When I tried it. I took the mixer object from the useAnimations()

[alvarosabu]

Can you add a minimal reproduction of your use-case so we can help you?

[AnupamKris]

Sorry I saw this message late, Ill put a stackblitz to explain my usecase asap tomorrow. I want to achieve something similar to the box moving effect on scroll on TresJS Home page but with animations inside GLTF file..

[AnupamKris]

Hi, I've added the repo to reproduce.. So I have an GLTF with an animation I want to control the timeline of the animation with the range slider that I have in the script.

[JaimeTorrealba]

I was playing with this. https://app.screencastify.com/v3/watch/5cDL9JzkTyrbhG5exoOW

That is what you're looking for?

The scroll is controling the animations of the model

https://stackblitz.com/edit/stackblitz-starters-xqaza7?file=src%2Fcomponents%2FTheModel.vue,src%2Fcomponents%2FTheExperience.vue