Frog sample source code
This example loads and displays a simple model and uses the mouse input to rotate it manually.
 |
Sample page |
| <html> | |
| <head> | |
| <title>Axis Engine Frog Sample</title> | |
| <script type="text/javascript" src="https://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script> | |
| <script type="text/javascript"> | |
| // Gets called when the page has finished loading | |
| function Initialize() { | |
| // Create an object to handle the HTML canvas with id='viewport' | |
| var viewport = new AxAnimationElement("viewport"); | |
| // Since we're not using the right mouse button, enable the browser's default context menu to allow image saving | |
| viewport.contextMenuEnabled = true; | |
| // Create the axis engine object, ready to render onto the canvas | |
| var axis = new Axis(viewport.canvas); | |
| // Gets called continuously when rendering | |
| viewport.OnRender = function() { axis.RenderScene(); }; | |
| // Import a scene and when loading is done, start rendering | |
| axis.ImportScene("Frog.axs", | |
| function() { | |
| // Set up an input model to use mouse X and Y input for rotation while the left mouse button is pressed | |
| axis.inputModels.Add(new AxRotationInputModel(axis, axis.FindResource("SMFrog", AxResourceType.Transform), 2.0, 5.0, | |
| "Mouse Y", "", "", "Mouse X", "", "", "Mouse Left")); | |
| viewport.StartRendering(); | |
| } | |
| ); | |
| } | |
| </script> | |
| </head> | |
| <body onload="Initialize();" style="margin:0;"> | |
| <canvas id="viewport" style="width:100%; height:100%;"></canvas> | |
| </body> | |
| </html> |
 |
Html |
This example consists of a single canvas element inside of the body of the page.
The body element has its onload event set to call the Initialize() method, where the whole initialization and rendering is set.
The canvas element has its id set to viewport. This id will be used by the JavaScript code to identify which element to use for rendering.
 |
JavaScript |
In this example, the 3d model automatically rotates. This motion is set in the scene itself.
The whole setup of the 3d scene and rendering is performed in the Initialize() method.
First, the viewport object is created. As an input parameter, its constructor accepts a string, which holds the id of the Html canvas element, which will be used to render on. This object utilizes the Html canvas element and provides an event for continuous rendering and other features useful for drawing realtime graphics.
Since this example doesn't use the right mouse button for its purposes, the default context menu, standardly provided by the respective browser is enabled. It usually allows, for example, to save the rendered image. By default this menu is disabled by AxAnimationElement in order not to disrupt the operation of the 3d application.
The axis object is then created. It is an instance of the Axis engine, which does the 3d rendering. As an input parameter, its constructor accepts a canvas object, which is provided by the viewport object.
After the viewport and the engine are created, the viewport's OnRender event is set. This event is called continuously by the viewport object and is used for the engine to do the actual rendering.
The ImportScene() method of the Axis engine loads the given file and calls back a function when done.
In this callback function, first an input model is set so that 3d model can be controlled by the mouse and then, the StartRendering() method is called on the viewport, which causes it to initiate continuous calling of its OnRender() method.
The AxRotationInputModel is set to provide control over the 3d model by rotating it up and down via the mouse Y axis, left and right via the mouse X axis and on condition that the mouse left button is pressed.