This example shows the basics of embedding an X3D world in a web page, using a browser of your choice. Maybe not every browser, but ones that support either the Internet Explorer API or the Mozilla Firefox/Netscape API.
It would be great not to have to concern ourselves with cross-browser HTML and DOM implementations and the good news is that when you scratch just below the surface, everything is fine. Basic AJAX appears consistent in IE and Ff, eliminating the need for a lot of feature testing leading to code forking. However, right at the first step - including X3D in an html/xhtml web browser - we find a potential problem.
Testing in latest IE and Ff seems to show that Ff will not process
an object element if the IE classid attribute
is included. (Maybe that is because the IE style 'clsid:' is not a uri?)
Given this current response and other observations showing other minor
differences, along with general security issues, we need to create an
object based on host browser capabilities and preferences.
The best overall way to show active content using X3D hosted on a
typical html/xhtml web browser is to use simple ecmascript to evaluate
a basic browser capability check and generate a
specific object element.
In the final workings of this example, the player works the same in both host browsers, It is just simple differences, some based on security and history, that make it just a bit harder for us to get the good stuff in there in othewise reliable modern html host browsers. But X3D applies in many different platforms, and each will have small differences. It may be that no single X3D content delivery tool will ever dominate, or even be the author-preferred web3D X3D player out there in the wild. In that case, since this is aimed at ISO X3D, and we shouldn't worry about which player represents the object, but probably still must know some basic capabilities and preferences of the host.
Setup: Embed X3D content in the page.
We see the X3D content embedded in the html document The scene is showing
some simple 3D text "Hello X3D". By testing a feature of the browser
we create an html object element that causes the X3D scene to be loaded
into an area (a div) of the html page.
IE HTML DOM object: supports ActiveX/IE API
<object id="objx3d" class="x3dscene" type="model/x3d+xml"
classid="clsid:918B202D-8E8F-4649-A70B-E9B178FEDC58"
codebase="http://mediamachines.com/download/SetupFluxPlayer.exe">
<param name="src" value="helloX3D.x3d">
<param name="DASHBOARD" value="FALSE">
<div>Got .X3D?</div>
</object>');
It is very simple to use the 'classid' and 'codebase' attrs to identify a specific control to be used along with a site for download if that control is not installed. This always works in IE (when allowed by security) whether or not Flux Player™ is installed. Doing this by script also eliminates the control activation step. If this does not work in IE then security is interfering and you must enable scripting and other active content.
Ff HTML DOM object: supports Firefox/Netscape Plugin API.
<object id="objx3d" class="x3dscene" type="model/x3d+xml"
codebase="http://mediamachines.com/download/SetupFluxPlayer.exe">
<param name="src" value="helloX3D.x3d">
<param name="DASHBOARD" value="FALSE">
<div>Got .X3D?</div>
</object>
Please notice that the only difference between these two
examples is use of the the classid.
For the IE version, classid forces IE to use
the Flux Player™ control.
In fact, if you do not wish to specify a certain X3D player,
this code should work for all IE, Firefox, and Opera.
Ff appears to be more limited
by not allowing the author to identify a specific control
(looks at 'type' instead of 'classid'?), but otherwise should work.
Where a control claiming a specific mimetype has never been loaded,
the Ff object may use codebase to
go for the plug-in installer (be patient and wait for a Security menu).
If there is an installed handler for the mime content type,
Ff may try it.
Some object attributes and parameter
values are explained below:
| Parameter | Description | id | Used by the HTML DOM to identify this particular document element in order to exchange events and data with the X3D SAI. |
|---|---|
| src | The X3D source file to be loaded |
| type | The MIME content type of the object. Both use to help find a control to use for viewing this content. |
| classid | IE Specify which control to use for viewing this content (in this case, Flux). |
| codebase | Specify where to go for the plug-in installer (in this case, Flux). |
| DASHBOARD | typical player parameter to turn off the built-in navigation dashboard controls |
Step 1: Interact with the X3D “Browser”.
Now you should see the text “Hello X3D!” appear in the window.
But this is not just text; it’s 3D text, one of the most simple
built-in triangulated mesh types.
Use the mouse and keyboard to move around it!.
There is a right-click menu.
Refresh/Reload Example page to restart.
Next step Tut1. Connecting DOM and SAI
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