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
helloajax3d.js
helloajax3d.x3d

Example Files - download as ZIP
helloajax3d.zip

Here is a new take on the classic Hello World program. This tutorial shows the basics of embedding an X3D world in a web page, establishing a connection to the world via the Scene Access Interface (SAI)—the “DOM of 3D”— and using that connection to dynamically change the contents of the scene. This tutorial displays the message “Hello AJAX3D!” inside the 3D scene, using a 3D text object. The message is displayed when the user clicks on a button in the web page.  

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

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

The web page then defines an onClick function for the “Say Hello” button. The function uses the SAI to change the value of a Text node object inside the X3D world, as follows:  

Step 1: Get a handle to the X3D “Browser.” In X3D, the term “Browser” actually refers to the X3D viewing application. (I always thought this terminology was a bit unfortunate and could lead to confusion with the containing “web browser” – but that’s the way it is and we need to live with it.). In file helloajax3d.js:       

var browser = document.FLUX.getBrowser();  

Step 2: Get a handle to the ExecutionContext. Once we have a handle to the X3D browser, we can access the ExecutionContext object, which allows us to get access to all of the objects in the scene:      

  var context = browser.getExecutionContext();  

[Q: why is this called an ‘ExecutionContext?’ A: Too much information for now; we will answer that question in a subsequent tutorial. Just go with the flow for now…]  

Step 3: Get a handle to the Text node. The embedded X3D file contains an X3D Text node, used to display text within the 3D world. The node is initialized with an empty string value, which we are going to change in the next step.   Here is the Javascript code to get a handle to the X3D node:      

  theText = context.getNode("THETEXT");  

For the X3D-curious, the operative lines of X3D code in file helloajax3d.x3d are:    

<Text DEF="THETEXT" string='""'>
<FontStyle size='2' family='sans'/>
</Text>  

Step 4: Set the Text node value. Here is where the action is – the code then sets the ‘string’ property of the Text node. This property is defined as a multi-valued array, with one entry per line of text.       

theText.string[0] = "Hello";
theText.string[1] = "AJAX3D!";  

Now you should see the text “Hello AJAX3D!” appear in the window. But this is not just text; it’s 3D text. Use the mouse or keyboard to move around it or make it spin!