O3D Tutorial 1: Initialisieren einer O3D Anwendung

Beitrag geschrieben von King of Darkness am 2010-02-02

Kurzbeschreibung:
O3D ist eine sehr performante 3D Engine bei der man mit JavaScript 3D Grafiken auf Websiten erzeugen kann.

Das erste was man tun muss ist sich das O3D Plugin für seinen Browser von der O3D Seite laden (http://code.google.com/intl/de-DE/apis/o3d/). Ist das erledigt ist der Browser nun fähig O3D Anwendungen auszuführen.

Bevor man aber nur anfangen kann zu entwickeln, benätigt man noch die o3djs JavaScript Bibliothek, diese findet man eben falls auf der O3D Seite. In meinen Tutorials wird sich die Bibliothek in einem Unterordner o3djs befinden.

Wenn diese kleinen Dinge erledigt wurden kann nun der Spaß beginnen.

Wie man O3D einbindet ist eigentlich ganz einfach, alles was zu tun ist, ist das man ein div Container mit der id o3d erstellt. Dieses div wird dann von O3D als Clientbereich initialisiert.

Code:

<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>

Für das Verständnis gehen wir jetzt noch mal den oben stehenden Code durch:

Das erste wichtige was passiert ist das der Haupt O3D JS Code geladen wird.

Code:

Dann binden wir die o3djs.util und o3djs.math Bibliotheken ein.o3djs.util bringt viele nützliche Funktionen mit die bei ein Anwendung braucht. o3djs.math bringt die Funktionalität mit um mit Matrizen und Vektoren zu rechnen, welches wir aber nicht in diesem Bespiel verwenden. Diese wird auch benötigt in allen Anwendungen die mit Koordinaten arbeiten, also eine sehr wichtige Bibliothek. Es gibt noch viele andere Bibliotheken, aber jetzt brauchen wir erstmal nicht mehr.

Code:

   o3djs.require('o3djs.util');

   o3djs.require('o3djs.math');

Danach initialisieren wir die window.onload und unload Events um O3D korrekt zu initialisieren und auch wieder zu beenden.

Code:

   window.onload = init;

   window.onunload = uninit;

Als nächstes Initialisieren wir ein paar globale Variablen die wärend der laufenden Anwendung gesetzt werden.

Code:

   var g_o3d;

   var g_math;

   var g_client;

Der nächste Codeblock initialisiert alles. Die makeClients() Funktion sucht das div mit der id o3d und Konvertiert es zu einem clientbereich für O3D, danach ruft es die mitgegebene callback Funktion auf. In der Callback Funktion werden die globalen variablen und Bibliotheken initialisiert. o3dElement ist die Variable in der sich das HTML Element befindet welche der Clientbereich ist. g_client ist der einstiegspunkt fÃ¼r die O3D Anwendung, g_o3d ist der O3D Namespace. g_math ist der Namespace für die Mathe Bibliothek.

Code:

   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);

   }

Nun die Funktion die angerufen wird wenn der Benutzer die Seite verlässt. Diese Funktion entfernt alle callbacks, so das diese nicht mehr aufgerufen werden können nachdem der Benutzer die Seite verlassen hat.

Code:

   function uninit() {

       if (g_client) {

         g_client.cleanup();

      }

   }

Zu guter letzt setzen wir noch unseren Renderbereich, das div-tag mit der id o3d.

Code:

Wenn man sich die Seite jetzt im Browser anschaut wird man einen leeren Renderbereich sehen mit dem wir im nächsten Tutorial weiterarbeiten.