Tutorial 3: Dynamic Scene Creation
Author: Tony Parisi tparisi@mediamachines.com  
Last updated: October 11, 2006  

Live Example Demonstration - 3D world opens in a seperate window.
Try The Demo

Example Files - displayed as text files, open in a seperate window.
index.html
ajax3d.js
tutorial3.js
boxtext.txt
conetext.txt
spheretext.txt

Required Image Files - displayed in a seperate window.
conethumb.jpg
cubethumb.jpg
spherethumb.jpg

Example Files - download as ZIP
ajax3d-dynamic.zip

This tutorial illustrates how to use Ajax techniques to dynamically create a 3D scene. First, an XMLHttpRequest object is used to fetch text data from the server. Then, the application uses advanced capabilities of the X3D SAI to dynamically create nodes based on that text and add them to an initially empty scene.

The tutorial builds upon the framework that we created in the previous lesson. We again begin with an empty scene; however this time we do not load any X3D files at all. Each image acts as a button to create a new piece of X3D content from a string and add it to the scene. Each new object gets added to the right of the previous one. The result: the world’s dumbest modeling package ever – running in a web browser!

Setup: Embed an empty X3D world in the page. In index.html, we see the X3D viewer embedded using an EMBED tag with the following parameter values (explained below):

<embed WIDTH="640" HEIGHT="480" NAME="FLUX" SRC=" " TYPE="model/x3d" DASHBOARD="0" BGCOLOR="0xFFFFFF">

Step 1: Load dynamic content using XMLHttpRequest.

When one of the images is clicked, the onClick() function determines which piece of X3D to create and then fetches a piece of text from the server that will be used to create the X3D. This is accomplished via the following lines of code:

// in the body of onClick:

str = sendRequest(request);

…

// Helper function to create request

function createXMLHttpRequest()

{

      try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}

      try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}

      try { return new XMLHttpRequest(); } catch(e) {}

      alert("XMLHttpRequest not supported");

      return null;

}

// Helper function to perform request; synchronous to keep it simple for now

function sendRequest(url)

{

      var xmlhttp = createXMLHttpRequest();

      if (xmlhttp)

      {

            var i;

            xmlhttp.open("GET", url, false);

            xmlhttp.send("");

            // now extract the views based on the response, repopulate array, list, and form items

            return xmlhttp.responseText;

      }

}

Function createRequest uses typical Ajax programming techniques to create an XMLHttpRequest object in a browser-independent fashion that will work with IE, Firefox and other browsers.

Function sendRequest uses the newly created XMLHttpRequest to actually send the request: first, the request is set up by calling the open() method; then the request is actually sent by calling send(). send() can be called either synchronously or asynchronously. We are calling it synchronously here for simplicity; if it were the asynchronous version we would supply a callback function as the argument to send(). sendRequest then returns the string in the XMLHttpRequest object’s responseText property. At this point, we have some X3D source text that can be dynamically inserted into the scene—once we figure out how to do that.

Step 2: Dynamically create a 3D object and add it to the scene. Now that we have the X3D data required to create a new object, we must use the SAI calls to create the object and insert it into the live scene. For this we have defined another helper function in our framework called createX3DFromString() – see file ajax3d.js:

function createX3DFromString(str)

{

      var scene = browser.createX3DFromString(str);

      var rootnodes = scene.getRootNodes();

      var i;

      // Do a bit of work to deal with the quirky X3D add/remove root node paradigm

      for (i = 0; i < rootnodes.length; i++)

      {

            node = rootnodes[i];

            scene.removeRootNode(node);

            context.addRootNode(node);

      }

}

Our framework version of createX3DFromString takes some of the extra grunt work out of using the raw SAI call – specifically the need to crawl through the array of returned nodes, remove them from the scene object, and add them to the live context object. It’s boring stuff and that’s why we made a helper function for it.

The tutorial application calls createX3DFromString with the string returned from our sendRequest helper function, after wrapping it with a little extra X3D “stuff’ in order to place it appropriately in the X dimension, using the helper function wrapOffset():

// Helper to move the newly created object to a new place in the world - offsets X coordinate

function wrapOffset(str)

{

      return "Transform { translation " + xoffset + " 0 0 children [ " + str + " ] }";

}

That’s it; click on an image and Voila!— Objects appear in the scene. While this tutorial is a contrived example, it illustrates the basic principles required for dynamically generating content from server-side data sources—an essential element in developing dynamic Ajax3D applications.