Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

Introduction to X3D (Extensible 3D)

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268