Resources > Axis > Web > Getting Started

First steps with Axis

This page shows how to build a very simple web page which displays a 3D scene with Axis.

	See demo page
	Download resources

Note that due to the web browsers' Wikipedia same-origin resource policy, a web page can only load 3D scenes which are located on the same website as the page itself.
This means you will have to upload your 3D scenes and resources on the same server where your web page is.

The basic HTML page

Start from scratch with a plain html page with nothing but a title and an empty body.

	<html>

	<head>
	<title>Axis web page</title>
	</head>

	<body>
	</body>

	</html>

Setting up Axis

To include Axis and be able to use it, add the following line in the <head> section

This line of code includes the whole Axis library. With that all of the engine's functionality will be available for use.
You can either load Axis from this location or copy it to your web server and load from there.

Write some code!

Now, let's make use of Axis.
That will happen in another <script> tag, where we'll have a few things:

Initialize function, which is to be called when the web page has loaded. Everything will be done in this function.
AxAnimationElement object, which represents the canvas element onto which to render. It also provides a continuous callback to a function, which is convenient place to perform rendering of a frame.
Axis object, which represents the engine itself. This object's ImportScene function will load the 3D scene and its callback function will be called when loading is finished and rendering can begin.

	<script type="text/javascript">
	function Initialize() {
	var animation = new AxAnimationElement('viewport');
	var axis = new Axis(animation.canvas);

	animation.OnRender = function() { axis.RenderScene(); };
	axis.ImportScene(new AxString('Robot.axs'), function() { animation.StartRendering(); });
	}
	</script>

Finally

In the <body> section of the HTML, set the onload to call our Initialize function.
Then insert a canvas element and set its id to "viewport", as expected by the AxAnimationElement object.

	<body onload="Initialize();">
	<canvas id="viewport" style="width:100%; height:100%;"></canvas>
	</body>

Altogether

So here's the full source code stitched together:

	<html>

	<head>
	<title>Axis web page</title>

	<script type="text/javascript" src="http://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script>

	<script type="text/javascript">
	function Initialize() {
	var animation = new AxAnimationElement('viewport');
	var axis = new Axis(animation.canvas);

	animation.OnRender = function() { axis.RenderScene(); };
	axis.ImportScene(new AxString('Robot.axs'), function() { animation.StartRendering(); });
	}
	</script>
	</head>

	<body style="margin:0;" onload="Initialize();">
	<canvas id="viewport" style="width:100%; height:100%;"></canvas>
	</body>

	</html>

Conclusion

In this example, the Axis library is loaded from the Palitri server.
The used library path points to the current release, meaning it uses the latest release of Axis.
When a new version of Axis is released, the current release will get updated with the new version, so you may prefer to use fixed version or load from a local copy on your own server. For more info, check the versioning page.