Sometimes we want scenes which are containing more than just some simple objects. In this tutorial you will learn how to import your own X3D models or Scenes into the X3DOM context.

For including X3D files X3DOM provides an Inline node. By using inline in the x3d context you are able to load external x3d files.
Those files could contain simple objects, complexer objects or even whole scenes, and the best part: You still can manipulate all parts of it. Sounds good? Let's try it:

    <x3d width='500px' height='400px'> 
    <scene>
	<inline url="myScene.x3d"> </inline> 
    </scene> 
    </x3d>           
        

Make sure that you close the inline tag, otherwise it can lead to strange behaviour. Do not use a self closing tag. If you, for instance, include this X3D file, using the inline node, your result could look like this:

To manipulate our model, it's necessary to make sure we don't have any name conflicts. Therefore we use a nameSpace. As shown in the previous example X3DOM, HTML, CSS and some JavaScript we access a node by it's ID. In order to get those ID's we set the attribute mapDEFToID on true.

    <x3d width='500px' height='400px'> 
    <scene>
	<inline nameSpaceName="Deer" mapDEFToID="true" onclick='redNose();' url="Deer.x3d" >  </inline>
    </scene> 
    </x3d>           
        

Now we can access every node of our model by using the namespace prefix and a double underscore. This allows us to change the deer's nose to a more reddish color by using a javaScript function as shown below.

<script>
    function redNose()
    {
        if(document.getElementById('Deer__MA_Nose').getAttribute('diffuseColor')!= '1 0 0')
            document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '1 0 0');
        else
            document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '0 0 0');
    }
</script>
	   

The positive side effect of using inline is that models will be load when the X3DOM context is ready, which results in an empty X3DOM context but not an empty page. The user can see and interact with the website while X3DOM loads the model and shows the loading status in the upper left corner of it's canvas.

However if your model is small, and by small we talking about less than a few thousand triangles, you can include it directly in your HTML page, without using inline.

    <x3d width='500px' height='400px'> 
    <scene>
	<Shape>
	<Appearance>
	<Material diffuseColor='0.6 0.6 0.6' specularColor='0.8 0.8 0.8' shininess='0.145' />
	</Appearance>
	<IndexedFaceSet solid='false' coordIndex='...'> ... </IndexedFaceSet>
	</Shape>
    </scene> 
    </x3d>           
        

In this case, however, be aware of using closing tags, instead of self-closing tags. The reason for this is that X3D files are usually using XML encoding, and you cannot directly insert XML content into HTML pages.
Including small model data directly can have the advantage that your application doesn't need to run on a Web server, but the Web page will have to be fully loaded (including all model data) before any page content is displayed.

Back to page top ⤴