- Installing the Tools
- How O3D Works
- The HTML File
- JavaScript File
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The HTML File
Since the O3D application is displayed in a web page, an HTML file is required; in this case, GettingStarted.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>O3D Tutorials</title> <script type="text/javascript" src="o3djs/base.js"></script> <script type="text/javascript" src="gettingstarted.js"></script> </head> <body> <div id="o3d" style="width: 600px; height: 400px;"></div> </body> </html>
The HTML is very basic, comprising two included JavaScript files and one DIV element. The o3djs/base.js file is part of the O3D utility library, and the gettingstarted.js file is a JavaScript file that's detailed in the next section of this article.
The DIV element is important, because this is where the O3D application will be positioned in the final web page. One of the steps in initializing the O3D plug-in requires specifying a DIV element that will contain the O3D plug-in. By default, this DIV element should have an ID that starts with o3d (so o3d, o3d-element, and o3d-position are all examples of a valid default ID). It's possible to override this default name, but using the defaults saves some coding.
O3D takes up 100% of the DIV element's client area, so it's important to specify the size of the DIV element. In this case, the size has been defined by an inline style attribute, but you can use CSS, a table, or any other parent element to define the size of the DIV element.