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:
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
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
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
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.
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.
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);
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;
.html file;
3) Use an .html editor to add annotation to the web
page.
page.
4) Put the new web page and all the molecule coordi-
nate files on your web server in the same directory.
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.
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.
