Terrain sample source code
In this example, a scene is loaded and displayed as usual.
An input model is added so that the camera is controlled by the mouse when the left or right button is pressed.
 |
Sample page |
| <html> | |
| <head> | |
| <title>Axis Engine Terrain 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"); | |
| // Create the axis engine object, ready to render onto the canvas | |
| var axis = new Axis(viewport.canvas); | |
| // Set the OnRender method, which gets called continuously by the AxAnimation element | |
| viewport.OnRender = function () { axis.RenderScene(); }; | |
| // Import a scene and when loading is done, start rendering | |
| axis.ImportScene("Terrain.axs", | |
| function() { | |
| // Set up an input model to use mouse input for controlling the camera | |
| axis.inputModels.Add(new AxWalkInputModel(axis, axis.FindResource("Camera", AxResourceType.Transform), 20.0, 5.0, 1.0, 5.0, | |
| "Mouse Left", "Mouse Right", "", "", "Mouse Scroll", "", "", "Mouse Y", "", "", "Mouse X", "Mouse Left,Mouse Right")); | |
| 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 |
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.
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 the camera is controlled by the mouse and second, the StartRendering() method is called on the viewport, which causes it to begin calling its OnRender() method continuously.
The AxWalkInputModel is set to provide control over the camera according to the input received from the mouse. It uses the left mouse button to move forward, the right mouse button to move backward, the mouse scroll to move up and down and the mouse movement over X and Y to turn the camera while the left or right mouse button is pressed.