3D Molecule Viewer

Rowan's interactive molecule viewer is built using Three.JS, a WebGL Javascript library.

A screenshot of an optimization in Rowan showing the interactive 3D viewer next to an interactive 2D graph.

Adjusting Your View

Rotating

To rotate the molecule viewer, click and drag.

Auto-Rotate

To automatically rotate the molecule viewer, click the gear icon in the bottom right corner and click "Rotate structure."

Zooming

To zoom in or out on the molecule viewer, use a scrolling motion (either two fingers on your trackpad, a scroll wheel, etc).

Panning

To pan the molecule viewer using a Mac, you can use a three finger "force touch" drag.

Resetting

To reset the rotation, zoom, and pan as well as clear your selection, click the refresh icon in the bottom right corner of the molecule viewer.

Selecting Atoms

To select an atom, click on it. An atom will stay selected until you click it again or clear your selection. Selected atoms will show with a transparent green highlight. Clicking a bond will select/deselect both bonded atoms.

Two bonded atoms selected in Rowan's molecule viewer with the bond's length showing in the top left corner.

Multiselect

To select many atoms at once, you can hold your "Control" key while clicking and dragging your mouse. This will enable the rectangular multiselect tool. To adjust the selection after you've released your mouse button, you can click on atoms to add or remove them from the selection.

Measuring a Bond, Angle, or Dihedral

To check the measure of a bond, angle, or dihedral, select the coordinate you wish to measure. (Remember that the order of selection matters for angles and dihedrals!) The measure will show in the top left hand corner of the molecule viewer.

Clearing Your Selection

To clear your selection, you can double click anywhere on the viewer that isn't an atom or click the reset icon in the bottom right hand corner of the viewer.

Checking an Atom's Element and Index

To check an atom's element and index, you can either hover over it or select it.

Information about the atoms you have selected will always appear in a green box in the top left corner of the molecule viewer. Information about the atom or bond your mouse is hovered over will appear in a white box below that.

Rowan uses a version of CPK coloring to color different elements.

View Settings

View settings are available via the gear icon in the bottom right corner of the molecule viewer.

Hide C–H Bonds

To hide C-H bonds on the structure you're viewing, click the gear icon and then click "Hide C–H Bonds." To show C-H bonds again, click the gear icon and then click "Show C–H Bonds."

Expand Viewer

To expand the viewer, click the gear icon and then click "Expand viewer." To close the expanded viewer, click the "X" icon in the top right corner.