3D Web page in under 10 lines of HTML
This example shows how to use the <axis-viewport> HTML element to insert 3d content on a web page with minimal code and no scripting.
Please note, that this functionality is supported by the current versions of Chrome, Opera and Safari. It is expected to be supported in Firefox version 60/61 and soon in Edge
 |
Original page |
 |
Html |
| <html> | |
| <head> | |
| <title>Axis 3D Web page in under 10 lines of HTML</title> | |
| <script type="text/javascript" src="https://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script> | |
| </head> | |
| <body> | |
| <axis-viewport src="Robot.axs" style="width: 100%; height: 100%;" defaultcontrols="true" ></axis-viewport> | |
| </body> | |
| </html> |
This example illustrates a very simple HTML page, which uses the <axis-viewport> element to display a 3d scene.
First, in order to be able to use the <axis-viewport> element, the Axis framework has to be referenced in the web page. This is achieved in the <script> element in line 4, where the path to the Axis framework is given.
For more info on the path to the framework, check out the Axis versions page.
The <axis-viewport> element is placed as any other HTML element and has its src attribute set to the file which contains the 3d scene
It also has its defaultcontrols attribute set to true. This allows for user input like mouse and touch gestures to interact with the element and the displayed scene. It provides some default rotation zooming and panning of the camera.
There is also some typical styling applied in order to set its desired size.
For details on the <axis-viewport> element, check out the HTMLAxisViewportElement page.