3D Molecular Structure Viewer
Explore molecules in interactive 3D. Rotate, zoom and inspect lightweight ball-and-stick models of common chemical compounds directly in your browser.
- Interactive 3D
- HTML5 Canvas
- No Heavy Libraries
- Rotate & Zoom
- Chemistry Learning Tool
Molecules
Molecule
Selection
Atom colours
How to interact
- Rotate Drag / 1 finger
- Zoom Wheel / Pinch
- Pan Shift+Drag / 2 fingers
- Rotate (keys) ↑↓←→
- Zoom (keys) + −
- Reset R / Double-click
- Auto rotate A
What this 3D molecular structure viewer shows
This viewer draws seventeen common molecules as interactive ball-and-stick models you can turn around in real three dimensions. Every atom carries genuine x, y and z coordinates built from published experimental bond lengths and bond angles, so the shape you rotate is the shape the molecule actually has — not an artistic impression.
The rendering is deliberately lightweight. There is no Three.js, no WebGL framework and no external library of any kind: rotation matrices, the perspective divide and depth sorting are plain JavaScript, and the result is painted onto a single HTML5 canvas. That keeps the page small enough to load instantly and to keep working offline once opened.
What you can do with it
- Rotate with a mouse drag, one finger on a touchscreen, or the arrow keys.
- Zoom with the scroll wheel, a two-finger pinch, or the + and − buttons.
- Pan with Shift + drag or a two-finger drag.
- Inspect by clicking an atom for its element data, or a bond for its type.
- Compare shapes by switching molecules — the camera resets and refits automatically.
What is a molecular structure?
A molecular structure is the arrangement of atoms in a molecule in three-dimensional space: which atoms are bonded to which, how far apart they sit, and at what angles those bonds meet.
A structural formula written on paper tells you the connections but flattens everything into two dimensions. That is often enough for simple molecules, but it hides the information that determines how a substance actually behaves. Water's bend, not its formula, is why ice floats and why water dissolves salt. Methane's tetrahedral shape, not its four C–H bonds, is why it is nonpolar. Shape is chemistry.
Two numbers describe a structure completely once you know the connections. The bond length is the distance between two bonded nuclei, usually quoted in angstroms, where one angstrom is one ten-billionth of a metre. The bond angle is the angle formed at an atom between two of its bonds. Every molecule in this viewer is generated from exactly those two published quantities.
What is a ball-and-stick model?
A ball-and-stick model represents atoms as spheres and bonds as sticks joining them. It is designed to make bond angles and overall shape easy to see, at the cost of drawing atoms much smaller than they really are.
The trade-off is deliberate. If the spheres were drawn at true relative size they would swell until they touched and overlapped, hiding the bonds completely — that is a space-filling model, which shows how much room a molecule occupies but tells you almost nothing about its bond angles. A third style, the wireframe or line model, drops the spheres entirely and is useful for very large structures such as proteins where individual atoms would be indistinguishable anyway.
Ball-and-stick sits in the middle and is the right choice for teaching small molecules, which is why it is what almost every chemistry textbook uses for water, methane and ammonia.
How 3D molecular models work
It is worth understanding what the viewer is doing, because the same handful of ideas power every 3D graphics program ever written.
1. Coordinates
Each atom is stored as three numbers. The molecule is then shifted so its centre of geometry sits at the origin, which is what stops it drifting off-screen when it spins.
2. Rotation
Dragging the mouse changes two angles. Every atom's coordinates are passed through a rotation about the horizontal axis and then a rotation about the vertical axis, always in the same order — order matters in 3D rotation, and swapping it is what makes home-made viewers flip unexpectedly.
3. Perspective
A rotated atom is then divided by its distance from the viewpoint. Atoms nearer the front come out larger and atoms further back come out smaller, exactly as a camera lens behaves. Without this step the model looks like a flat cut-out no matter how smoothly it turns.
4. Depth sorting
Finally everything — atoms and every individual stick — is sorted by depth and painted from the furthest to the nearest. This is the painter's algorithm, and it is what makes a front atom properly hide the bond running behind it. Drawing in list order instead produces the tell-tale glitch where a rear atom sits on top of a front one.
Molecular geometry
Molecular geometry is the three-dimensional shape formed by the atoms of a molecule. It is predicted by VSEPR theory: electron pairs around a central atom repel one another and settle as far apart as they can get.
The crucial subtlety is that lone pairs count. They take up space and push bonds around, yet they are invisible in a ball-and-stick model. That is why water is bent rather than linear and why ammonia is a pyramid rather than a flat triangle — in both cases the shape you see is what is left after the invisible lone pairs have done their work.
| Molecule | Formula | Geometry | Bond angle | Polarity |
|---|---|---|---|---|
| Water | H2O | Bent | 104.5° | Polar |
| Carbon dioxide | CO2 | Linear | 180° | Nonpolar |
| Methane | CH4 | Tetrahedral | 109.5° | Nonpolar |
| Ammonia | NH3 | Trigonal pyramidal | 106.7° | Polar |
| Hydrogen sulfide | H2S | Bent | 92.1° | Polar |
| Sulfur dioxide | SO2 | Bent | 119.3° | Polar |
| Ethene | C2H4 | Trigonal planar centres | 121.3° | Nonpolar |
| Ethyne | C2H2 | Linear | 180° | Nonpolar |
| Benzene | C6H6 | Planar hexagonal ring | 120° | Nonpolar |
Linear geometry
All atoms on one straight line, 180 degrees apart. It arises when a central atom has two bonding regions and no lone pairs, as in carbon dioxide, and it is the only possible arrangement for a two-atom molecule such as hydrogen, oxygen or nitrogen. Linear symmetry is also why CO2 is nonpolar despite having two polar bonds: equal pulls in opposite directions cancel exactly.
Bent geometry
A central atom with two bonded neighbours and one or more lone pairs. Water bends to 104.5 degrees; hydrogen sulfide, whose larger sulfur atom holds its lone pairs further out, bends much further to about 92 degrees. Because a bent molecule is not symmetrical, its bond dipoles do not cancel — which is precisely why water is such a good solvent.
Tetrahedral geometry
Four bonds spreading to the corners of a tetrahedron at 109.5 degrees. This is the most important shape in organic chemistry, because every saturated carbon adopts it. Rotate the methane model and you will see why a flat drawing misleads: no two hydrogens are ever at 90 degrees to one another, even though a square-looking sketch suggests they are.
Trigonal pyramidal geometry
Three bonds and one lone pair, forming a pyramid on a triangular base. Ammonia's H–N–H angles are about 106.7 degrees, a little tighter than tetrahedral because a lone pair spreads out more than a bonding pair and squeezes the bonds together.
Single, double and triple bonds
A single bond shares one pair of electrons, a double bond shares two and a triple bond shares three. Each extra shared pair makes the bond shorter and stronger.
In this viewer a single bond is drawn as one stick, a double as two parallel sticks and a triple as three. The extra sticks are offset in true three-dimensional space rather than in the flat plane of the screen, so they stay correctly parallel as you rotate the molecule.
The carbon–carbon series makes the length trend easy to see. Rotate through ethane, ethene and ethyne and watch the two carbons pull closer together: 1.535 angstroms for the single bond in ethane, 1.339 for the double bond in ethene and 1.203 for the triple bond in ethyne.
Multiple bonds also lock geometry in place. The single bond in ethane lets its two ends spin freely, which is why the staggered arrangement shown here is only the most comfortable of many. The double bond in ethene allows no such rotation, which is why all six of its atoms are pinned into one flat plane.
The molecules in this viewer
Water — H2O
Oxygen at the centre with two hydrogens at 104.5 degrees. The oxygen also carries two lone pairs, which is what pushes the bonds in from the tetrahedral 109.5 degrees. The resulting asymmetry gives water its dipole, its unusually high boiling point and its ability to dissolve ionic solids.
Carbon dioxide — CO2
A carbon atom flanked by two oxygens at exactly 180 degrees, joined by double bonds. Rotating the model shows there is nothing to see from any angle other than a straight line — a good visual demonstration of why the molecule has no net dipole.
Methane — CH4
The textbook tetrahedron. Four hydrogens at the corners, carbon in the middle, every angle 109.5 degrees. Worth rotating slowly, because it is the shape most often misdrawn on paper.
Ammonia — NH3
Three hydrogens forming a triangular base beneath the nitrogen, with the lone pair occupying the space above. Tip the model to look down the axis and the pyramid becomes obvious.
Hydrogen, oxygen and nitrogen — H2, O2, N2
The three diatomic gases show the bond-order progression in its simplest form: a single bond in hydrogen, a double in oxygen and a triple in nitrogen. Nitrogen's triple bond is among the strongest in chemistry, which is why the gas that makes up most of the air is so reluctant to react.
Benzene — C6H6
A flat regular hexagon of carbons, each carrying one hydrogen. It is drawn with alternating single and double bonds because that is the clearest way to show it in a stick model, but the real molecule has six identical bonds with the electrons shared right around the ring. The viewer flags this whenever benzene is selected.
How to use the viewer
Pick a molecule from the list or a quick button, then explore it:
- Desktop: drag to rotate, scroll to zoom, Shift + drag to pan, double-click to reset.
- Touch: one finger to rotate, pinch with two to zoom, drag with two to pan.
- Keyboard: click the viewer once to focus it, then arrow keys to rotate, + and − to zoom, R to reset and A for auto-rotation.
- Inspect: a click without dragging selects an atom or bond and fills the Selection panel.
Auto-rotation pauses by itself the moment you start dragging and resumes when you let go, so it never fights you for control. If your operating system is set to reduce motion, auto-rotation stays off and everything else keeps working normally.
Limitations of molecular models
Every model is a simplification, and knowing where the simplification lies is part of using one properly.
- Atoms are not solid spheres. An atom is a nucleus surrounded by a fuzzy electron cloud with no hard edge. The sphere is a convenient stand-in.
- Bonds are not sticks. A bond is a region of shared electron density, not a rod. Sticks show connectivity and direction only.
- The spheres are not to scale. They are drawn small so the bonds stay visible. Real atoms are much larger relative to their bond lengths.
- Lone pairs are invisible. They shape the molecule but do not appear, which is why bent and pyramidal shapes can look arbitrary until you know they are there.
- Molecules are not rigid. Real bonds stretch, bend and rotate constantly. These models show one representative equilibrium geometry.
Scientific note. The viewer uses simplified ball-and-stick models for educational visualisation. Bond lengths and bond angles are taken from published experimental gas-phase values and are reproduced faithfully, but atom sphere sizes and the relative proportion of sphere to bond are adjusted for visibility and should not be interpreted as exact electron-density or molecular-scale representations.
Frequently asked questions
What is a 3D molecular structure viewer?
A 3D molecular structure viewer is a tool that draws a molecule as a solid object you can turn around, rather than as a flat diagram on paper. Each atom is stored with real x, y and z coordinates, so rotating the model shows you which atoms sit in front of which — information a two-dimensional structural formula simply cannot carry.
What is a ball-and-stick model?
A ball-and-stick model shows atoms as spheres and the bonds between them as sticks. The point of it is to make bond angles and the overall shape obvious. The spheres are drawn much smaller than real atoms so the sticks stay visible; a space-filling model does the opposite, showing atoms at their true relative size but hiding the bonds.
How do I rotate a molecule?
On a computer, press and hold the left mouse button anywhere on the black viewer and move the mouse. Dragging sideways spins the molecule around the vertical axis and dragging up or down tips it towards or away from you. On a phone or tablet, drag with one finger. You can also click the viewer and use the arrow keys.
How do I zoom the molecular model?
Scroll the mouse wheel over the viewer, pinch with two fingers on a touchscreen, or press the + and − buttons in the control bar. The zoom is limited at both ends so the molecule can never shrink to nothing or expand until it disappears off the edges.
How do I move the molecule around the screen?
Hold Shift and drag with the mouse, or drag with two fingers on a touchscreen. That pans the model without rotating it. The Reset button puts the position, rotation and zoom back to the starting view in one click.
Can I view water in 3D?
Yes. Water is the molecule the viewer opens with. You will see the red oxygen atom in the middle with two white hydrogen atoms angled off it, and rotating the model makes it clear that all three atoms lie in one plane with a distinct bend rather than a straight line.
What is the structure of H2O?
Water is one oxygen atom bonded to two hydrogen atoms by single bonds, with an H–O–H angle of about 104.5 degrees. The oxygen also carries two lone pairs of electrons that are not drawn in a ball-and-stick model but are what push the two bonds closer together.
What is the structure of CO2?
Carbon dioxide is linear: one carbon atom in the middle joined to an oxygen on each side by double bonds, with a bond angle of exactly 180 degrees. The carbon has no lone pairs, so there is nothing to bend the molecule out of a straight line.
What is the structure of CH4?
Methane is a carbon atom at the centre of a regular tetrahedron with a hydrogen at each of the four corners. Every H–C–H angle is 109.5 degrees. It is worth rotating this one, because a flat drawing of methane makes it look square when it is not.
What is the geometry of water?
Bent, sometimes called angular or V-shaped. Oxygen has four electron pairs around it — two bonding and two lone — arranged roughly tetrahedrally, but only the two bonded hydrogens are visible, so the shape you see is a bend of about 104.5 degrees.
What is the geometry of carbon dioxide?
Linear. The two double bonds sit as far apart as they can get, which is directly opposite one another at 180 degrees. This is why CO2 is nonpolar overall even though each individual C=O bond is polar: the two pulls point in exactly opposite directions and cancel.
What is the geometry of methane?
Tetrahedral. Four identical bonds and no lone pairs means the hydrogens spread out as evenly as possible in three dimensions, giving the ideal 109.5 degree angle between every pair of them.
What is a linear molecular geometry?
Linear means all the atoms lie on one straight line, giving a bond angle of 180 degrees. It happens when a central atom has two bonding regions and no lone pairs, as in carbon dioxide, and it is also the only possible shape for any molecule with just two atoms.
What is bent molecular geometry?
Bent geometry is a central atom with two bonded atoms and at least one lone pair, so the molecule forms an angle rather than a straight line. Water bends to about 104.5 degrees and hydrogen sulfide bends much further, to about 92 degrees.
What is tetrahedral geometry?
Tetrahedral geometry is four bonded atoms arranged around a central atom at the corners of a tetrahedron, with 109.5 degree angles between them. It is the shape that keeps four electron pairs as far apart as possible in three dimensions, and methane is the standard example.
What is trigonal pyramidal geometry?
Trigonal pyramidal is a central atom bonded to three others with one lone pair on top, making a pyramid with a triangular base. Ammonia is the classic case, with H–N–H angles of about 107 degrees — slightly less than tetrahedral because the lone pair takes up more room than a bond.
What is a chemical bond?
A chemical bond is a shared pair of electrons holding two atoms together. In these models each stick represents one shared pair. Sticks are drawn as straight lines between atom centres, which is a convenient simplification — real bonding electrons occupy a cloud spread around both atoms.
What is a single bond?
A single bond is one shared pair of electrons, drawn here as one stick. Single bonds allow the two atoms to rotate freely relative to each other, which is why ethane can twist while ethene cannot.
What is a double bond?
A double bond is two shared pairs of electrons, drawn as two parallel sticks. Double bonds are shorter and stronger than single bonds and they lock the geometry in place, so molecules like ethene stay rigid and flat.
What is a triple bond?
A triple bond is three shared pairs of electrons, drawn as three parallel sticks. It is the shortest and strongest of the three, which is why nitrogen gas, held together by a triple bond, is so unreactive at room temperature.
Does the viewer work on mobile?
Yes. One finger rotates the molecule, two fingers pinch to zoom and drag to pan. There are also visible buttons for rotating, zooming and resetting, so the tool stays usable if gestures are awkward. Only the viewer captures your gestures — the rest of the page scrolls normally.
Does this tool use HTML5 Canvas?
Yes. Everything you see in the viewer is drawn onto a single HTML5 canvas element. Atoms are painted with radial gradients to look spherical and bonds are drawn as tapered shapes rather than flat lines, all through the standard 2D canvas drawing commands.
Does this tool require Three.js or WebGL?
No. There is no 3D library involved at all. The rotation matrices, the perspective divide and the depth sorting are written directly in plain JavaScript, and the result is painted with the ordinary 2D canvas context. That keeps the page small and fast to load.
How does a 3D molecule viewer actually work?
Each atom holds an x, y and z coordinate. Every frame those coordinates are passed through rotation matrices, then divided by their distance from the camera so nearer atoms come out larger, then converted to flat screen positions. Finally everything is sorted by depth and drawn from back to front so closer atoms correctly cover the ones behind them.
Why do atoms nearer the front look bigger?
Because the viewer applies real perspective, exactly like a camera. An atom's drawn size is divided by its distance from the viewpoint, so the same atom looks larger when it rotates towards you and smaller when it swings away. That size change is a large part of what makes the model read as solid.
Can I click an atom to get information?
Yes. A single click or tap selects an atom and shows its element name, atomic number, atomic mass and how many bonds it has. Clicking a bond instead tells you whether it is single, double or triple. Dragging to rotate never selects anything by accident, because a movement beyond a few pixels is treated as a rotation rather than a click.
Can I see hydrogen, oxygen, carbon and nitrogen atoms?
Yes, and they follow the CPK colour convention that chemistry textbooks use: hydrogen white, carbon dark grey, nitrogen blue, oxygen red, sulfur yellow and chlorine green. A colour key is shown beside the viewer.
Are these molecular models scientifically exact?
The geometry is accurate: every bond length and bond angle is built from published experimental gas-phase values, so the shapes and angles are right. What is deliberately not to scale is the drawing — atom spheres are shrunk so the bonds remain visible. Treat it as an accurate shape diagram, not a picture of electron density.
Which molecules can I view?
Seventeen at the moment: water, carbon dioxide, methane, ammonia, hydrogen, oxygen, nitrogen, carbon monoxide, hydrogen chloride, hydrogen sulfide, sulfur dioxide, hydrogen peroxide, ethane, ethene, ethyne, methanol and benzene. Each one is built from its real published bond lengths and angles.
Why is benzene drawn with alternating bonds?
That is the Kekule convention, which is the clearest way to show benzene in a simple stick model. In reality all six carbon–carbon bonds in benzene are identical, with a length between a single and a double bond, because the electrons are spread evenly around the whole ring rather than fixed in three separate double bonds. The viewer notes this whenever benzene is selected.
Can I reset the molecular view?
Yes. Press the Reset button, double-click the viewer, or press the R key while the viewer has focus. That restores the original rotation, zoom and position without reloading the page or losing your molecule selection.
Is this tool free and does it need an account?
It is completely free with no sign-up. Every molecule is stored inside the page itself, so nothing is uploaded, no external service is contacted while you use it, and the viewer keeps working in an already-open tab even if you lose your connection.
More chemistry tools
Other tools in the ToolAdda chemistry section, all free and running entirely in your browser.