The resources for the tutorials are in a zip file resources.zip.
To simplify code entry in the workshop I have included the finished examples in resource files and have temporarily disabled the sections I want considered by enclosing them in comment tags. To see the results edit the files to remove the comment tags and save them to accesible webspace.
Open littleheart.html in your text editor.
Two sections of the code have been enclosed in comments.
Comments in html look like this <!--This is a comment--> and are ignored by the web browser. If you delete the comment notation you will have "uncommented" the encapsulated text and it will no longer be ignored by the web browser.
For example the section that looks like this:
<!--
<script src="http://www.x3dom.org/download/dev/x3dom.js"></script>
<link rel="stylesheet" href="http://www.x3dom.org/download/dev/x3dom.css">
-->
becomes:
<script src="http://www.x3dom.org/download/dev/x3dom.js"></script>
<link rel="stylesheet" href="http://www.x3dom.org/download/dev/x3dom.css">
When you load the webpage the browser will load x3dom.js and x3dom.css. The first of these files is the renderer (the tool that draws/plays the 3D content), the second is a stylesheet that declares appearance parameters for the renderer. Including them in the header means the web browser can draw 3D files like the ones you'll be loading.
Next enable the section that loads the 3D content. This section currently looks like this:
<!--
<x3d style='width:100%; height:100%; border:0; margin:0; padding:0;'>
<scene>
<inline url="3d/littleheart.x3d"> </inline>
</scene>
</x3d>
-->
Uncomment this section, save the file, upload it and view the page in your browser. You should see a 3D model of a pink teddy bear. The bear is called littleheart. The piece of html you enabled instructs the web browser to interpret a 3d description, then declare a scene node, it then used the inline feature to load a scene file. In this case the file is called littleheart.x3d, and is in a folder called 3d. There are other 3d files in the 3d folder if you wish to try them, I recommend eSheep.x3d.
This section has shown the basics of using a web page to load the libraries and a scene file for X3Dom. Before moving on to the next lesson try opening littleheart.x3d (in the 3d folder) using a text editor and find the timer that drives the animation. Hint: it's the only line containing the word TimeSensor. The purpose of this final step was to get you to look inside the 3D scene description file. The final set of numbers (line 53) is the geometry definition for the bear shape. The model was made using photogrammetry with a mobile phone app, the result is that this is quite a large file.