Build a butane... in 2 lines!

by Andrew Peterson

I wrote code in ASE to make it dead easy to make beautiful, shareable, interactive 3-d graphics for the web browser. It can be as simple as two lines:

from ase.build import molecule
molecule('trans-butane').write('butane.html')

You can open the file in any web browser, email it to colleagues, or upload it to github. A screenshot of the output is below. Be sure to click on the image to interact. The 3-d controls are pretty cool. It should work on any modern web browser with HTML5 support, including those on smartphones. At least on my Android, it supports pinch-zoom-rotate.

Behind the scenes, the work is being done by a script located at ase.io.x3d.X3D, which saves the image in X3DOM html format (which requires HTML5). This X3DOM format will also allow you to edit your 3-d image in Blender, if you use it. (I still haven't made the switch...I still use POV-Ray.)

To keep the example simple, I made the molecule using ASE's molecule function. Of course, you can use this with any structure you like. If you have built a structure called atoms, just use

atoms.write('filename.html')

The code is smart enough that when it sees the .html extension, it will automatically output to the 3-d html format. Have fun!