Skeletal animation sample source code
This sample displays a model, animated via skeletal animation, also known as "skinning".
The page also provides buttons for control over the animation speed.
 |
Sample page |
| <html> | |
| <head> | |
| <title>Soldier Sample</title> | |
| <script type="text/javascript" src="https://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script> | |
| <script type="text/javascript"> | |
| var axis; | |
| // Gets called when the page has finished loading | |
| function Initialize() { | |
| // Create an object to handle the HTML canvas with id='viewport' and pass a function for continuous rendering | |
| var viewport = new AxAnimationElement("viewport"); | |
| // Create the axis engine object, ready to render onto the canvas | |
| axis = new Axis(viewport.canvas); | |
| // Assign a render function | |
| viewport.OnRender = function() { axis.RenderScene(); }; | |
| // Import a scene and when loading is done, start rendering | |
| axis.ImportScene("Soldier.axs", function() { viewport.StartRendering(); }); | |
| } | |
| // Buttons functions | |
| function OnChangeAnimationSpeed(factor) { | |
| var animation = axis.FindResource("Model frame", AxResourceType.Mechanism); | |
| animation.GetProperty("Speed").SetFloat(animation.GetProperty("Speed").GetFloat() * factor); | |
| document.getElementById("speedLabel").textContent = animation.GetProperty("Speed").GetFloat(); | |
| } | |
| function OnPlayPause() { | |
| var animation = axis.FindResource("Model frame", AxResourceType.Mechanism); | |
| animation.GetProperty("Active").SetBool(!animation.GetProperty("Active").GetBool()); | |
| } | |
| </script> | |
| </head> | |
| <body onload="Initialize();" style="margin:0;"> | |
| <input type="button" value="<" onclick="OnChangeAnimationSpeed(1.0 / 1.5);"> | |
| <input type="button" value="Play/Pause" onclick="OnPlayPause();"> | |
| <input type="button" value=">" onclick="OnChangeAnimationSpeed(1.5);"> | |
| Animation Speed: <span id="speedLabel"></span> | |
| <canvas id="viewport" style="width:100%; height:75%;"></canvas> | |
| </body> | |
| </html> |
 |
Html |
This example consists of a few elements nested in the body of the page
- A canvas element used to render on. It has its id set to "viewport", which will be used by the JavaScript code to identify it and use it for rendering
- Three input buttons, used to control the animation speed rate. These have their onclick event set to the OnPlayPause() or the OnChangeAnimationSpeed JavaScript methods, which manipulate the speed of the animation
- A text span, used to display the actual speed rate of the animation. It has its id set to "speedLabel" so that the JavaScript code can identify it and change its contents accordingly
The body element has its onload event set to call the Initialize() method, where the whole initialization and rendering is set.
 |
JavaScript |
The whole setup of the 3d scene and rendering is performed in the Initialize() method.
A viewport object is created to utilize the Html Canvas element for rendering and an instance of the Axis engine is created.
A function which does the rendering is assigned to the viewport's OnRender() method.
The scene file is then loaded asynchronously and when done, a callback function is called where continuous rendering is initiated.
The OnChangeAnimationSpeed() method changes the speed of the animation performed on the 3d model.
It queries the engine for the resource which is responsible for changing the animation frame and changes the value of its Speed property. Learn more about how properties and mechanisms work here
Then it finds the Html Span which displays the animation speed on the page and sets its text content appropriately.
The OnPlayPause() method does a similar thing, only instead of changing the Speed property, it changes the Active property, switching it off or on, thus stopping or resuming the animation.
You can get a better idea of how this application works by examining the scene in Axis Editor.