Palitri Axis3D

Robot sample source code

This very basic example loads a scene and displays it on the screen.
The keyframe animation is imported along with the scene and originates from a 3ds file.

Sample page

	<html>

	<head>
	<title>Axis Engine Robot 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' and pass a function for continuous rendering
	var viewport = new AxAnimationElement("viewport");
	// Create the axis engine object, ready to render onto the canvas
	var axis = new Axis(viewport.canvas);

	// Set a render function which will be called continuously
	viewport.OnRender = function () { axis.RenderScene(); };
	// Import a scene and when loading is done, start rendering in the callback function
	axis.ImportScene("Robot.axs", function() { 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

This example demonstrates the simplest setup of Axis, where a 3d scene is simply opened and rendered without programming any additional logic.
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.
This callback function is used to call the viewport's StartRendering() method, which initiates the continuous call of its OnRender method.