from AjaX3D.org - Tutorial Start

From Joe: Tony Parisi authored the original AjaX3D examples then published them on ajax3d.org as a great community service. Showing reliable DOM and extension httprequest performance in major html/xhtml host browsers, the set is a great and easily accessible proof that the X3D SAI is up to the job of living in DOM web pages. I think every good X3Der must consider capabiites and preferences of the host. For html/xhtml web browser hosts, so far as these examples are concerned, the good news is that when you scratch just below the surface, everything we need is fine.

I am hooked on using the X3D SAI along with DOM and extension XMLHttpRequest client/server interface, and toward working to standardize usable functionality to be included as a logical extension to the X3D SAI. Who can tell? There may be web applications where presence of an html/xhtml host web browser is not actually required to fulfill the need.

These examples started with me wanting to "learn from the Master" and "make them my own". Actual minor recoding commenced when I refused to use the old html embed element. Sure it probably works to a limited extent in most web browsers, but is ultimately doomed for use in the wild - especially when the time finally comes that browser coders agree how to handle the html/xhtml object element, attributes, and params.

The fact that I had to make a big deal out of the object element led to Tutorial 0, cross-browser, standard-chasing code to get one favorite web3D X3D browser SAI, Flux Player™, going in at least two different html/xhtml DOM host web browsers. When I say 'make a big deal out the object tag' I just mean that i just happen to see the future where various security and capability measures may just produce at least a 'de-facto' standard that makes it simple by not allowing embed elements to interact directly with the containing host DOM, or its host, for that matter. Several examples are presently available to show this trend. AjaX3D requires detailed interaction with the containing DOM. All X3D 'internal' scripting is available, but none of the 'external' scripting required by AjaX3D is available in this vision of the embed environment.

So I want to avoid this forcasted obsolecence by having these work using only the object element in a couple of key html/xhtml web browsers. As the standards-track resolves present web3D X3D browser differences, it is expected that other web3D X3D browsers can be used in these simple, basic examples. More to come, especially showing X3D standard SAI interfaces, as they become available. Of course further changes to each of Tony's original examples are just to make them seem a bit more reliable or readable for me.

My advice? Go see Tony's original examples at: http://www.ajax3d.org/content.html Tutorials including Tony's fine White Paper: Ajax3D: The Open Platform for Rich 3D Web Applications , then check these out to see what I learned.

AJAX3D.org Tutorials

Original Author: Tony Parisi tparisi@mediamachines.com
last updated: October 12, 2006
This version by: Joe D Williams joedw@hypermultimedia.com
last updated: October 15, 2006; March 29, 2007

This XMLHttpRequest (XHR) (http://en.wikipedia.org/wiki/XMLHttpRequest) tutorial sequence uses/reuses this Tutorial window for explanations and opens/reuses a new Example window to show the SAI<=>DOM<=>XMLHttpRequest action. For typical viewing, please reduce the width of this window to allow some room for the Example window.

One objective of this particular tutorial is to use a specific X3D 'browser' to show interactivity between the scene and the host html document. At this time, this is simply a matter of convenience to this author due to the current stage of X3D development. If you are using IE and you press launch, , IE will attempt to use Flux Player™. In the future, other choices will identify other web3D X3D tools that can use these examples. If you are using Firefox or Opera, scene loading will probably always default to the last X3D player you installed. If you do not have an X3D player installed, then you will be prompted to install Flux.

From the X3D scene point of view, the DOM does "External" scripting of the scene while the SAI does "Internal" scripting of the scene. We have the host "live" DOM document object connected to the embedded "live" web3D X3D browser SAI execution context object. We can easily pass events to produce a highly interactive result, and, with Ajax, employ http data transport facilities of the host.

Your first time through this tutorial, you may just read through the following descriptions, then begin the sequence using Next step: link at the bottom of this page. Use This AjaX3D tutorial start: link at the bottom of each page to return here.

Tutorial 0 - Hello X3D
We can provide interactive 3D hosted by the typical html/xhtml web browser as an informative and entertaining part of a web document. If you want to be closest to current html/xhtml standards, you should use the html object element to embed the X3D content in the page. This first example simply provides cross-browser code to show the basic embedding of an X3D scene in a web page using the two major HTML object APIs, Internet Explorer and Netscape/Firefox.

AJAX3D0.js - LoadObjx3d()
helloX3D.x3d - simple X3D scene
E0.htm - Example 0 html

Tutorial 1 - Hello AJAX3D. DOM<=>SAI connection
Shows the basics of establishing a connection between the HTML host Document Object Model (DOM) and the embedded X3D Scene Access Interface (SAI) - the "DOM" of X3D. This connection is then used to send events from the DOM to the SAI and dynamically change the contents of the X3D scene.

AJAX3D1a.js - LoadObjx3d()
AJAX3D1b.js - initX3Dbrowser(), browserChanged(), onSayHelloAJAX3D(), onSayHelloX3D()
helloAJAX3D.x3d - simple X3D scene
E1.htm - Example 1 html

Tutorial 2 - Connect SAI node events to DOM. SAI<=>DOM connection
This tutorial illustrates the DOM listening to SAI node events. This capability is fundamental for building dynamic applications which respond to user input initiated from the X3D scene. This tutorial updates the host web page when the user clicks on a shape in the X3D scene.

AJAX3D2a.js - LoadObjx3d()
AJAX3D2b.js - initX3Dbrowser(), browserChanged(), setListenerObserver()
AJAX3D2c.js - setupListeners(), sensor1Touched(), sensor2Touched()
X3Dempty.x3d - simple X3D scene
AJAX3Dlogo2.x3d - AJAX3D Logo
AjaX3DLogo.js - AJAX3D Logo isOver script - isOverX3D(), isOverAjax()
E2.htm - Example 2 html

Tutorial 3 - Dynamic Scene Creation
SAI<=>DOM<=>XMLHttpRequest happiness

AJAX3D3a.js - LoadObjx3d()
AJAX3D3b.js - initAjax3d(), browserChanged(), onClick(), wrapOffset(), addX3DFromString()
AJAX3D3c.js - sendXMLHttpRequest(), createXMLHttpRequest()
X3Dempty.x3d - simple X3D scene
Server-side Resources - boxtext.txt - conetext.txt - spheretext.txt
E3.htm - Example 3 html

X3D SAI exchanges data with host HTML DOM and http Server using standards-track interfaces. Like any other active media component, your actual html/xhtml/ecmascript code used to embed and control your scene must consider the host browser capabilities and preferences.

Next step: Tut0. X3D in HTML