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.