O3D is a very powerful 3D rendering engine which allows you to use Javascript to add full 3D graphics to a web page. mybloggingplanet.com

The first thing to do is to download the O3D plugin for your browser from the O3D site. Once that is installed, your browser will be capable of using O3D.

Before you can develop a web page though, you will need the o3djs Javascript library which is also available from the O3D site. In my tutorials, the o3djs files are located in a subfolder simply called o3djs.

Once you have that housekeeping out of the way, the fun can begin.

The general principle of how O3D is embedded in a page is that you create a div with an id of o3d, and then O3D initialises this div as the client area.

Thus, setting up an empty application is rather easy. Here is the code to set this up:

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Tutorial 1: A skeleton application</title>
      <script type="text/javascript" src="o3djs/base.js"></script>
      <script type="text/javascript">
         o3djs.require('o3djs.util');
         o3djs.require('o3djs.math');

         // Events
         // Run the init() function once the page has finished loading.
         // Run the uninit() function when the page has is unloaded.
         window.onload = init;
         window.onunload = uninit;

         // global variables
         var g_o3d;
         var g_math;
         var g_client;

         //Creates the client area.
         function init() {
            o3djs.util.makeClients(initStep2);
         }

         //Initializes O3D.
         function initStep2(clientElements) {
            // Initializes global variables and libraries.
            var o3dElement = clientElements[0];
            g_client = o3dElement.client;
            g_o3d = o3dElement.o3d;
            g_math = o3djs.math;

            // Initialize O3D sample libraries.
            o3djs.base.init(o3dElement);
         }

         //Removes any callbacks so they don't get called after the page has unloaded.
         function uninit() {
            if (g_client) {
               g_client.cleanup();
            }
         }
      </script>
   </head>
   <body>
      <h1>Tutorial 1: A Skeleton Application</h1>
      This is a skeleton O3D application that shows how to create an empty rendering area.
      <br/>
      <div id="o3d" style="width: 300px; height: 300px;"></div>
   </body>
</html>

Breaking down the above code, the first important thing to do is to load the main O3D Javascript code using the <script> tag.

   <script type="text/javascript" src="o3djs/base.js"></script>

Then we include the o3djs.util and 03djs.math libraries. o3djs.util provides a bunch of utility functions that are needed by the application. o3djs.math provides matrix and vector maths functionality, which while we are not going to implement in this example, would be used in any coordinates specified in an application, so it is pretty much a required library. There are many more libraries but we don’t need them for now.

   o3djs.require('o3djs.util');
   o3djs.require('o3djs.math');

After this, we initialise the window.onload and unload events so that we can initialise and clean up after O3D correctly.

   window.onload = init;
   window.onunload = uninit;

Next we initialise some global variables which will be set during the O3D initialisation

   var g_o3d;
   var g_math;
   var g_client;

The next block of code is the initialisation functions. The makeClients() function finds the div’s with o3d in the id and converts them to an client area, after which it calls the callback function specified. This callback is where the global variables and libraries are initialised. o3dElement is the HTML element which the client are is in. g_client is the entry point for the O3D application. g_o3d is the O3D namespace. g_math is the math library namespace.

   function init() {
       o3djs.util.makeClients(initStep2);
   }

   function initStep2(clientElements) {
      var o3dElement = clientElements[0];
      g_client = o3dElement.client;
      g_o3d = o3dElement.o3d;
      g_math = o3djs.math;
      o3djs.base.init(o3dElement);
   }

After that the function to clear up once we close the page is defined. This removes any callback functions so that they are not fired after we leave the page

   function uninit() {
       if (g_client) {
         g_client.cleanup();
      }
   }

Finally, within the body text of the page, we put the div which will contain the rendering area.

   <div id="o3d" style="width: 300px; height: 300px;"></div>

Once we load the page in a browser, a blank rendering area should be displayed, which starting from the next tutorial, we are going to make do interesting things.

Share