Introduction to X3D (Extensible 3D)
By Stephen Bucaro
X3D is code that allows you to display three dimensional objects and worlds on your
webpage. It also allows you make those objects active, in other words move them
around on the webpage, and interactive, which means that you can allow your website's
visitors to interact with your 3D objects. I don't need to tell you how this can
make your educational and how-to articles much more effective, and it allows you
to create 3D games on your webpage.
X3D uses XML (eXtensible Markup Language), so to use X3D you must understand the
rules of XML. XML consists of a hierarchical structure of tags. XML tags are similar
to HTML tags. A tag is basically some text enclosed within < and > characters.
Except with XML you must have an opening tag and a closing tag (<tag></tag>).
Each XML document has a root element. And it can have one and only one root element.
With X3D, that root element is the <x3d></x3d> tag. The first element
within the root element, is the <scene></scene> element. Each X3D document
can have one and only one scene element.
Within the scene element you can have one or more <group></groupd> elements.
The group element is optional. It can be used to group together all the 3D shapes
related to one specific object. Within a group element (or without a group element)
will be the <shape></shape> element or elements. The primitive shapes
are box, cone, cylinder, and sphere.
However, the shape elements may be contained within a <transform></transform>
element. A transform element is used to define a translation - that is a location and
rotation with 3D coordinate space. The transform element is optional.
A shape element may contain an <appearance></appearance> element. The
appearance element will contain a <material></material> element or
an <ImageTexture></ImageTexture> element. The material element will
define the shape's color. The ImageTexture element will reference an image to use
for the surface of the shape.
Finally, within the shape element will be an element defining the shape, for example,
<box></box> Now before we go any further, lets look at some basic X3D code.
Shown below is the code for a webpage that displays a red cube.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<x3d width='300px' height='200px'>
<!-- x y z axis of rotation (0 or 1) and angle of rotation in radians -->
<Transform rotation='0 1 0 0.7854'>
<Transform rotation='0 0 1 0.7854'>
<material diffuseColor='red' />
<box size='2 2 2'/>
In the head of the document there is a meta tag that tells Internet Explorer to display content in
the highest mode available. You don't need this if you're not using Internet Explorer. No browser
and manipulating X3D scenes as HTML5 DOM elements.
The attributes in the opening x3d tag create a 3d drawing space similar to an html5 canvas. Next
I have the opening scene tag. Within the scene element we define two Transform rotation
tags. Rotations in X3D are very complicated. One way to simplify them is to to rotate an object only
around a main axis. If necessary define rotations around one main axis after another. The syntax for
a rotation transform is shown below.
<Transform rotation='x y z angle'>
Place a 1 in the axis you wish to rotate around, place an 0 in the other two axis. The angle of
rotation is in radians; 30 degrees = 0.5236radians, 45 degrees = 0.7854 radians. Therefore the
above code rotates the shape 45 degrees around the y axis, then 45 degrees around the z axis.