This tutorial describes how to load arbitrary 3D geometry inside your web page with x3dom. We are going to develop an online catalog of 3D objects, that popup inside our page using the popular lightbox overlay principle (click here for the demo). In our case, the 3D objects are X3D files of 3D scanned historical objects. By Jens Keil.
Our main page is only the overview of all objects. Hence, we are going to generate a grid with thumbnail images of our objects. We link these images to a second page with the X3DOM content. Since we have 36 objects our grid consists of 6 rows and 6 columns. Let’s use a table for that.
<table id="demo_table" class="gallery clearfix > <tr> <td><a href="external_html_page"><img /></a></td> </tr> </table>
In order to tell the script that our linked content should be opened inside the overlay, we add some query parameters at the end of the URL. For example:
<a href="dcm200310301737.html?iframe=true&width=500&height=600" rel="prettyPhoto[iframe]" />
Having finished to set up the grid, we initialize the lightbox script after the table definition:
Now, let’s take a look on the inlined page. We have such a page for every 3D object inside our grid. First, we export the scanned data into the X3D file format. Then we convert the X3D file into a X3DOM/HTML file (see Generic 3D data conversion).
Our X3D decoded 3D content is inside the generated HTML now. We may add a headline or some textual explanation here; indeed, even any other media we’d like to be displayed inside our lightbox overlay. Note, that adding the script node with a link to x3dom.js at the end is doing all the magic: from declarative X3D/HTML5 to visual 3D content inside your web page.