I’m new to three.js and I’ve been messing around with the examples from the master.zip. Using the webgl_loader_fbx.html file as a template, I’ve loaded a model of a device with an exploding animation so you can see all the parts inside. Right now it’s repeating the animation indefinitely. Ultimately I want the explode animation to play when either the model or a button is clicked (not sure if one is easier than the other), and then I’d like it to reassemble when the model/button is clicked a second time.
How do I set it up so that the animation only plays when the model or button is pressed? And for the reassembly, can I make it play an animation in reverse or should I have a separate reassembly animation when I export my model? If it matters, I’m using an fbx.
Can anyone help me out? I apologize in advance; I’m not very experienced at coding/programming.
In your code you must be using .play() on the animation clip to start it. You just want to call it both from the button onclick event, and also from the mouse click event.
Just keep variables referencing the desired clips (assign them when the model loads) and call .play()on them where you want.
The button click will be something like:
button.addEventListener( 'click', function (evt ) {
theClip.play();
}, false );
For the second case please see the Raycaster examples.
About playing the animation backwards, I don’t know if it is possible, sorry. Perhaps someone knows?
I haven’t had an opportunity to test it, but you’re advice makes sense. No worries on the backward animation thing. I’m just not that well-versed with all this and was curious about what’s possible.
As specified in the AnimationAction docs, AnimationAction.timeScale controls the speed of the animation. Default is 1.0, but changing it to negative values will cause the animation to play backwards.
If you want the animation to play just once, instead of looping, then you should set the AnimationAction.loop = THREE.LoopOnce;. Additionally, you probably want to set AnimationAction.clampWhenFinished = true;, so the animation stops on the last frame, instead of resetting.
Overall, everything you need is in the AnimationAction docs. Three.js has the best documentation in the world!
