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.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
</head>
<body>
<x3d width='300px' height='200px'>
<scene>
<!-- 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'>
<shape>
<appearance>
<material diffuseColor='red' />
</appearance>
<box size='2 2 2'/>
</shape>
</Transform>
</Transform>
</scene>
</x3d>
</body>
</html>
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 supports X3D directly. The JavaScript link loads the X3DOM framework, a framework for integrating 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.
Next, I define an appearance element, and within that a material element with its diffuseColor attribute set to red. You could also set the diffuseColor attribute to an RGB color with each color on a scale from 0 to 1 for 100%.
Lastly, within the shape element I define a box element, the boxes size attribute defines the box as being 2 units wide, by 2 units high, by 2 units deep.
The code shown below is very similar to the previous example, except it draws a cone.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
</head>
<body>
<x3d width='300px' height='200px'>
<scene>
<!-- 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'>
<shape>
<appearance>
<ImageTexture url="10centwash.jpg"><ImageTexture/>
</appearance>
<cone bottomRadius='2' height='4' />
</shape>
</Transform>
</Transform>
</scene>
</x3d>
</body>
</html>
Note that in the first rotation transform I used a negative value in order to get the bottom of the cone facing outward. In the appearance element, instead of using a material element, I used an ImageTexture element with it's url attribute set to the URL of an image file. The cone element itself has its bottomRadius attribute set to 2 units, and its height element set to 4 units.
<cylinder radius='0.5' height='5.0'/>
Well, you should now have enough knowledge to begin experimenting with X3D. I leave you with the syntax for the cylinder shape so that you can create your own next example. Have fun!
More Graphics Design Tips:
• Tips and Tricks for Getting Free Images
• MathML mo Element Operators
• MathML mtext Element to Display Plain Text
• How to Make a Simple Animated Banner in Flash CS3
• SVG For Responsive Web Design
• Introduction to X3D (Extensible 3D)
• How to Make Beautiful Skies with GIMP
• Coding Color for the Web
• How to De-haze a Photo with GIMP
• SVG Image Clipping