Three’s still a vague understanding of the animation part of three.js.
Can someone help regarding animating a bunch of texts ( created with TextBufferGeometry ) at different intervals, stopping the animation for some texts in between and not for others.
The .chain() method from Tween library was helpful for me in earlier simple animations. Now going through the Animation docs on the website, I can see some constants like THREE.LoopRepeat and others, KeyframeTracks, clipAction to mention a few that I think could be of help.
But somehow, I am not able to understand the appropriate order in which to use them!
It could be great if someone could help!
Thanks in advance
P.S. The examples of animation in the docs load some external models in JSON format and then use AnimationMixer and clipAction over it, which is something I am not looking forward to doing ( still, if the portion after the model has loaded could be explained, would be better )!
Have you seen the misc_animation_keys example? It goes over setting up a basic animation for a cube rather than a loaded model. There’s also a short introduction to the animation system here.
The three.js animation system is really intended for playing animations created in other programs though (or at least, that’s what its good at). When it comes to building your own animations it’s much more limited compared to, say, the Greensock library so it might be worth investigating that and seeing whether it suits your project better.
Thanks for the reply! Yes, I have seen the misc_animation_keys_example and it helps quite a lot as it doesn’t use any externally loaded model. I even referred to the Animation System description on the website. Though I am able to get AnimationMixer and AnimationClip now, writing KeyFrames is a thing I still find confusing! It would be really helpful if you could suggest how to animate a text created with TextBufferGeometry to sweep through the screen and stop/start in between its horizontal path.
Oh! Yeah, I came across the Greensock library a while ago, just wanted to use three.js solely for the project!
Yes, came across this example just today!
A nice example using the tween library, it actually eases quite many things. Still, wanted to use solely three.js with some shader code as and when required for the projects, and wasn’t able to entirely get it ( the animation section here ), hence asked!
I am now able to animate my own objects! Could you please help me with one more thing!
How can I actually pause the animation of a particular text when it reaches a specific position in space while animating?
I saw that we could get the object’s position when the animation is ‘finished’ by the appropriate event listener and calling event.target._root.position
Is there some similar way where the position where the object goes is tracked all the while it animates starting from clipAction.play() ?
It would be really helpful if you could suggest how to animate a text created with TextBufferGeometry to sweep through the screen and stop/start in between its horizontal path.