How to create animations in the viewer?

By Philippe Leefsma

Last time I wrote about how to create a basic tool for the LMV viewer, today we will see how to use a more complex tool which creates a camera motion loop.

But first, let's quickly review the few classical JavaScript functions that can help us achieve animations. Here is pretty good description I'm borrowing from the Mozzila Developer Network:

A block of JavaScript code is generally executed synchronously. But there are some JavaScript native functions (timers) which let us to delay the execution of arbitrary instructions:

• setTimeout()
• setInterval()
• setImmediate()
• requestAnimationFrame()

The setTimeout() function is commonly used if you wish to have your function called once after the specified delay. ThesetInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations. ThesetImmediate() function can be used instead of the setTimeout(fn, 0) method to execute heavy operations. TherequestAnimationFrame() function tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame.

An example of an animation using requestAnimationFrame in LMV is testable in my Physics extension demo. 

Another approach I wanted to illustrate today is using the update callback of a custom tool. Let's take a look at an empty implementation:

 1 /////////////////////////////////////////////////////
 2 // update is called by the framework
 3 // t: time elapsed since tool activated in ms
 4 /////////////////////////////////////////////////////
 5 this.update = function(t) {
 6 
 7     //run time based animation...
 8 
 9     return false;
10 };

Update will be invoked repeatedly by the viewer framework with the time t since the tool has been activated as argument. This can be used to create animations such as moving the camera on a predefined or computed path, move viewer components, animate three.js third party geometry, 2d graphics, visual cues when creating advanced commands, or anything cool we could think about ...

In order to play with that tool update function, I wrote the viewer extension that you can test below. I named it Explorer: it will animate the camera around the model using a circular trajectory computed on the fly. You can test the extension by opening the blog entry in it's own tab or click on the picture below:

Here is the full source of the Explorer Extension: