Creating interactive web sites with 3-D animations of

molecules and orbitals without writing code.

Jonathan Gutow, Chemistry Department, University of Wisconsin Oshkosh,

Oshkosh, WI 54901

Introduction

Modern computer graphics have made visualizing
molecules and orbitals in 3-D much easier. However,
including these elements in web pages is usually diffi-
cult, because significant custom coding is necessary.
The primary options capable of providing interactive 3-
D visualization are:

1) Chime™, which has not been updated in many
years and only works with a limited set of
browser+computer combinations.1

2) ChemAxon’s Marvin Java applet, is a commercial
applet that runs on most browser+computer combina-
tions and is free of charge for academic usage.2

3) the Jmol Java applet is open source and runs on
most browser+computer combinations.3

Of the three, Jmol presently has the most extensive
capabilities, including being able to read many ab initio
output files and the ability to generate graphical repre-
sentations of orbital surfaces and animated vibrations
from these files. Jmol also has an extensive set of
Javascript tools tightly linked to the applet.

The program Jmol_Web_Page_Maker 4 takes
advantage of the tight integration of Jmol and its
Javascript tools to create simple interactive web pages
using a graphical user interface (GUI). This allows
anyone, comfortable with their standard GUI, to create
web pages with interactive 3-D molecule and orbital
displays simply by selecting the files containing the
information they wish to display and then using their
favorite web page editor to add explanatory text.

Creating pages to display molecules.

There are 4 steps:

1) collect all the files with the 3-D structural informa-
tion in them (.pdb, .smol, gaussian and gamess .log
files, + many other formats are acceptable);

2) Use Jmol_Web_Page_Maker to create the basic
.html file;

3) Use an .html editor to add annotation to the web
page.

4) Put the new web page and all the molecule coordi-
nate files on your web server in the same directory.

 

Collecting the files

You may generate these yourself using any number
of programs or get them from many of the archives on
the web of structure files. It is recommended that all
files that will be used on a single page be kept in the
same directory.