3d models with x3dom

I was looking for a way to bring existing 3d models that I’d created in other programs into webpages so that they could be rotated and manipulated without the need for the original software. There are solutions out there but they are not always very helpfully documented, so I thought I’d summarise what I’ve learned so far!

There are two main approaches to 3d graphics for the web, declarative and imperative. Essentially, as far as I understand it, the declarative approach (SVG for 2d, X3Dom for 3d) simply declares the object and lo! it appears, whereas in the imperative approach (canvas for 2d, WebGL for 3d) objects are created via JavaScript functions. Of course the reality and the pros and cons of each approach are clearly more complicated than this, but for a relatively simple model, and where functions are not going to be re-used, the declarative approach is certainly appealing. The crystallographic programs VESTA and KrystalShaper, in which I had created many models, export in the VRML format, which has been superseded by X3D, the language that is used by X3Dom. The 3D modelling program Art of Illusion, in which I had created a small number of models, exports in VRML as well as two other formats, while Blender has a wide variety of import and export formats. The workflow for making the models ready for use in webpages therefore consisted of importing the VRML files in Blender and re-exporting in X3D format, which could be inserted into HTML code with minor modifications. The X3Dom approach involves the use of a JavaScript file and a CSS file. These can either be downloaded and stored in local folders or called directly from the x3dom.org server. There is some sample code on the x3dom.org tutorial page. Documentation for X3Dom exists but there appears to be a pretty steep learning curve between including simple primitives and importing and manipulating complex models built in other programs. Perhaps the expectation is that most of the modelling work will have been done elsewhere. However, from my own experience, the models cannot be used exactly as-imported; instead, they do need some manipulation, and hence some understanding of x3d syntax is necessary. One of the main difficulties I had was finding out which primitives can be used, hence this post! The picture below shows the five primitives: cylinder (yellow), box (red), sphere (blue), plane (green) and cone (magenta). More complex shapes can be specified as “indexed face sets”. The code required to generate the image above is as follows:

<x3d width=”1200px” height=”700px”>
<scene>
<shape>
<appearance>
<material diffusecolor=”1 0 0″></material>
</appearance>
<box></box>
</shape>
<transform translation=”-3 0 0″>
<shape>
<appearance>
<material diffusecolor=”0 1 0″></material>
</appearance>
<plane solid=”false”></plane>
</shape>
</transform>
<transform translation=”3 0 0″>
<shape>
<appearance>
<material diffusecolor=”0 0 1″></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<transform translation=”0 -3 0″>
<shape>
<appearance>
<material diffusecolor=”1 1 0″></material>
</appearance>
<cylinder></cylinder>
</shape>
</transform>
<transform translation=”0 3 0″>
<shape>
<appearance>
<material diffusecolor=”1 0 1″></material>
</appearance>
<cone></cone>
</shape>
</transform>
</scene>
</x3d>

Note the similarity to HTML and that the ordering of items (“nodes”) is somewhat counterintuitive – we first have to open a tag declaring where an item will be translated to, then open a second tag declaring that a shape is present, then describe its appearance and only then declare what sort of shape it is!

Many aspects, for example the size of the elements and the position of the viewport, are set by default, allowing us to set up an initial scene with very few lines of code and then subsequently to refine it.

Another aspect of note is that, by default, the plane element, as obtained by simply using <plane></plane>, has the property ‘solid=”true”‘. This means that is we rotate to look at the reverse side of the plane, it will no longer be visible. To make the plane visible from both sides, set its property to <plane solid=”false”></plane>.

A  screenshot of one of the crystallographic models exported from VESTA can be seen below:


Close-packing models (part 2)

As mentioned in Part 1, the Balls and Sticks software can be used to create attractive models to illustrate the two common close-packed structures as well as more complex models based on these. For functionality that is not available in Balls and Sticks, such as plotting lattice planes and crystal faces or exporting vector graphics or three-dimensional data, the .CIF files exported from Balls and Sticks can be imported into VESTA. Note that the colour and atomic radius data used for the elements in Balls and Sticks is not preserved in VESTA, and these must be manually set up if required. Using VESTA you can add lattice planes as shown to illustrate where the close-packed planes are: and you can export data in the 3D format .wrl which can (with some conversion and manipulation) be used to make rotatable 3D models that can be used in other applications (including directly in web pages – more on this in a subsequent post).