Hi, welcome to Molecules3D!
Here you'll find a collection of 3D models for my favorite molecules.
This page describes Molecules3D & how to use it. The link top-right leads to the Molecules3D
viewer &
fascinating library of 3D models.
Molecules are a fantastic part of everyday life, as small as the universe is big. For this
collection I
chose
molecules that I find beautiful, colorful, symmetrical, suprising & inspiring.
I thought about how to present molecules in a somewhat unconventional way, eg materials, light
effects &
how
I imagine them.
I found looking at them this way makes it easier to understand chemistry & chemical reactions.
My name is William; I'm interested in software & 3D graphics. I hope you like my website & have a
fun
time exploring it!
There's more information below covering the Viewr3D viewer & configuration,
the galleries of built-in molecules,
Molecules3D options to view & analyse molecules as well as credits for technical contents.
Feedback & ideas are welcome (see 'about' in the Molecules3D menu).
P.S. Please share the link (Molecules3D.com) & check out my other URL: WHS3D.com!
Viewr3D™
This website uses Viewr3D, a browser-based app I created using three.js. It's designed to present
animated & dynamic 3D models written in javascript.
On starting, Viewr3D presents the loaded 3D model, together with a menu (top-right corner of
screen) & a
control bar (bottom of screen). The
user interface uses clicks, taps & dragging.
It's similar to other 3D software, such as games or CAD, but just in case here are some notes
explaining
the basics.
On starting it loads the first 3D model from the available models, which are organised as
galleries
(think
'art gallery').
Each gallery covers one kind of model, or related models. The gallery 'all' contains all the
models.
The gallery name & model name are displayed in the menu, under Viewr3D. You can change the
gallery &
model by
tapping the
names or using the arrows in the control bar.
The model is by default slowly turning, so you can view it from different angles. You can turn
this off
in
the control bar (autorotate).
You can move (drag) the camera around the model, orbiting like a satellite looking down.
Drag left: camera orbits left; it looks like the model rotates right.
Drag up: camera orbits up; it looks like the model rotates down.
The model name is also displayed in the control bar. You can change the
model using the arrow buttons in the control bar.
'>': go to the next model.
'>>': go to the last model in the gallery, or the first model in the next gallery.
'<' & '<<' work in a similar way.
'+' & '-': zoom in & out. They move the camera closer to the
center of the model, and away from it. One day I may add the 'pinching' gesture. :-)
The grid is a sphere drawn around the model to help understand how the camera moves
around the
model.
Some models have lighting, normally behind the camera starting position.
If you drag the camera around behind the model, you may see the light sources as white
balls on
the
other side of the model. This also often where you can get the most atmospheric view of
the
model.
The viewed 'world' has these four parts; the model, the grid, the light sources & the
camera
(which
you never see).
Configuration
The menu also shows details about the model, if you're interested, like the number of triangles
being
drawn.
You can change some Viewr3D settings, like background color, grid & field of view (fov).
backgound color: I find darker backgrounds more dramatic/atmospheric, especially when looking
towards
the light sources.
grid: You can choose to see the grid all the time, or (default) only when navigating (i.e.
dragging),
or not at all.
field of view: controls how much the camera sees; it's like the difference between a normal & a
wide-angle
lense.
If the menu (top-right) takes up too much space, you can collapse/expand the folders. The whole
menu
can even
be reduced
to one line.
Galleries & Models
I feel many of the molecules are beautiful in an artistic sense; colorful, symmetrical,
mystical.
So I arranged the lighting to make them more dramatic, & to emphasise the strange nature of their
microscopic environment.
And I grouped them together in different galleries:
'molecules (examples)': some examples highlighting the different modes that can be configured.
In the other galleries you can configure the mode. Plus by dragging the camera around the
molecule
you can view it with the light infront off it, at the side or behind it. There's also the
ambient
light & directional lights.
'organic': a collection of carbon based molecules, historically meaning related to life.
'inorganic': molecules that are not considered to be organic.
'aldehydes' & 'amino acids': I've started these as special interest groups; I'm planning to
extend
them.
'others': molecules that I haven't assigned to any other group yet.
'all': all the molecules in alphetical order.
I learned a lot choosing the molecules, & I'm always looking out for new ones.
When Viewr3D is showing a molecule, items are added to the menu with information & details about
the
molecule. There's also a 'mode' item to change the way the molecule is drawn.
Display Modes
There are different modes for displaying molecules:
'balls': spheres representing the atoms; the size is the outer electron shell (valence radius).
'sticks': shows the bonds only.
'ball & stick': shows the atoms, a little smaller, with the bonds.
'skinny':like ball & stick, but the atoms are all the same size, and smaller.
'valence shell': shows how the outer electrons are pulled along the bond - that's my idea by
the way. ;-)
'valence shell (e)': takes into account the electronegativity of each atom.
'space-filling I': based on the ideas of the Dutch physicist Johannes van der Waals. He & others
found
the effective boundaries of atoms, i.e. how close atoms get to each other when not bonding.
'space-filling II': space-filled marked by dots, atoms are valence shells.
'space-filling III': space-filled marked by dots, atoms & bonds shown as 'skinny'.
'electronegativty': atoms are colored by their electronegativity (Pauling, red-green).
'electrostatic': atoms are colored by their charge, based on how much electrons are pulled by the
relative
electronegativity (Pauling, red -ve, blue +ve, first order calculation - indicative).
The way I see it is, space-filling shows the resulting boundary of a molecule, which is made up
of
the bonded (& overlapping) atoms.
And it then becomes clearer that molecules are compact, little packages. Their shape & how they
fit
together (& charge distribution) greatly influence chemical reactions.
Coloring is (of course) artificial, the atoms are way too small to have any color.
By default the bonds between atoms are 'glowing' - try viewing molecules against the light!
Plus don't forget - you can choose in the menu how the molecules are drawn (ball & stick, etc). I
find the
'space-filling' modes fascinating - it's probably the closest to how molecules really 'look'.
Credits for Technical Content
Many people out there in the internet created, uploaded or explained stuff that I used & learned
from. Here's
some of the most significant.
three.js: An amazing public domain library for programming
3D
graphics in a browser using javascript.
It handles a lot of the graphics & maths functionality I needed, like making basic shapes
(spheres,
cylinders, polyhedra), the materials for surfaces & the
transforms. There's lots of interesting examples, by the way.
Wikipedia: The well-known, online knowledge resource.
Stack Overflow: A Q&A forum,
which helped me understand the many, tricky features I
faced working with javascript & browsers.
Brad Larson (Sunset Lake Software): He created
one
of the first molecule viewers for Apple's iOS (without three.js), and
explained how he did it.
This inspired me to see what's possible in
browsers using javascript.
PubChem: An online resource of molecule structures.
It's a fascinating place, where I searched for molecules I felt had an interesting structure or
important
functionality. Credits for the many molecule structures are listed there.
Copyright © 2023-2025 WHS3D. All rights reserved.
Molecules use 3D data from PubChem, processed &
presented by WHS3D. Viewr3D™ is
an app created by WHS3D using three.js.