I Built a 3D Molecule Builder That Teaches Chemistry Through Interactive Geometry

TL;DR: Building molecules in 3D changes how you learn chemistry. VEX Molecule Studio lets you place atoms, bond them together, and watch the shape appear with real bond angles and masses, no installation required. It's a teaching tool that bridges the gap between flat drawings and plastic kits.

When you stare at a flat drawing of water, you see H₂O: two hydrogen atoms, one oxygen. The formula tells you what's there, but it hides the shape. Water bends at 104.5 degrees. Carbon dioxide is linear. You won't know that from the letters on a page.

I wanted to hold a molecule. Not read about it, not imagine it - actually build it atom by atom and see the shape form in front of me. So I built VEX Molecule Studio, a 3D molecule builder that runs in your browser. Pick an element, place it in space, bond it to another atom, and the molecule settles into its real geometry. Bond angles appear. Molar mass updates. The shape becomes visible.

This article walks through what the tool is, how it compares to drawings and plastic kits, how to use every feature on desktop and mobile, what's under the hood, and what it deliberately cannot do. I built it, so I'm writing this as the person who made it. That also means I'll tell you plainly where it stops.

What 3D Molecule Studio Does

VEX Molecule Studio is a browser-based 3D molecule builder I designed and built under VisionVix, my studio in London. It's for students, teachers, and anyone curious about how molecules fit together. You don't install anything. Open visionvix.world, press Open Simulators, and choose Molecule Studio from the list.

The interface puts tools along the top and five tabs beside the molecule: Info, Library, Proteins, Equations, and Grapher. Every shape follows fixed rules. The same molecule always gives the same result, because the geometry comes from VSEPR theory, not guesswork and not AI.

How It Compares to Drawings and Kits

There are three common ways to learn molecule shapes. Each does a different job.

The builder doesn't replace a kit in your hands or a well-drawn diagram. It adds what they can't: instant feedback on shape, angle, and mass while you build. You see the geometry appear as you work, not after you finish.

Step-by-Step Walkthrough

1. Open the Platform and Choose Molecule Studio

Everything starts at visionvix.world. The landing page opens on the 3D Simulation Platform hero section, with a green Open Simulators button under the headline. It runs the tools right in your browser.

Open Simulators takes you to the Choose Your 3D World Simulator page. At the time of writing, it shows nine worlds: seven live and two coming soon. Press Enter Simulator on the Molecule Studio card.

2. Build a Molecule from Scratch

Choose an element in the picker. Each card shows how many bonds it likes to make. Oxygen says 2. Hydrogen says 1. Carbon says 4.

Use the Place tool and click in empty space to add an atom. Switch to the Bond tool, click one atom, then another. A bond appears.

Build an oxygen with two hydrogens. The Studio names the result: a bent shape with a bond angle of 104.5 degrees, formula H₂O, and a molar mass of 18.015 g/mol. The geometry is automatic. The angle comes from the repulsion between electron pairs, not from you dragging atoms into position.

Other tools let you orbit, drag atoms, measure an angle, and delete. If you make a mistake, press undo. Nothing is wasted. Nothing spills.

3. Read the Info Panel

The Info tab lists every atom with the bonds it has used out of the bonds it can make, and its mass in atomic mass units. Under that it lists each bond: its order, its length in picometres, and whether it's polar or nonpolar. A short line at the top says what you built.

The Info panel shows bond lengths in picometres and atomic masses in atomic mass units, updating as you build.

This matters when you're checking your work. You built something. The panel tells you what it is, what bonds exist, and whether you used all the valence electrons.

4. Change How It Looks

Four styles change how the same molecule is drawn:

• Ball+Stick shows atoms and bonds
• Spacefill shows large spheres that hint at how much room each atom takes
• Stick keeps only the bonds
• Wire thins them to lines

A spin button turns the molecule for you. A screenshot button saves a picture. The same molecule, four ways to see it.

5. Load Molecules from the Library

The Library tab has quick load buttons for molecules like caffeine, aspirin, ibuprofen, benzene, and glucose. It also lists essentials: water, ammonia, carbon dioxide, methane. Each entry shows its shape and bond angle.

You can type a name into the PubChem search and import the molecule. This needs an internet connection. Type "ethanol" and the structure appears, complete with bond angles and mass.

At the time of writing, the VisionVix simulator platform shows nine worlds, with seven live and two coming soon.

6. Explore Proteins

The Proteins tab opens real protein structures from the RCSB Protein Data Bank. It has a short list of famous structures: crambin, hemoglobin, insulin, ATP synthase, the SARS-CoV-2 spike, and a DNA duplex. You can also type any PDB ID into the box.

Five render styles show the same protein as a cartoon, sticks, spheres, a surface, or lines. Proteins are big. The viewer handles them.

7. Browse the Equations

The Equations tab holds 26 equations in seven groups: mechanics, electromagnetism, thermodynamics, quantum, chemistry, waves and optics, and relativity. Click one to see it fully written out, with what each symbol means. You can copy it as LaTeX for your notes.

The platform includes 26 equations organized into seven groups: mechanics, electromagnetism, thermodynamics, quantum, chemistry, waves and optics, and relativity.

This isn't a molecule feature. It's a reference library for when you're working through a problem set and need to check a formula.

8. Use It on a Phone

On a phone, the page stacks. The molecule sits at the top. The element picker folds below it. The tabs come after that. The molecule stays in view while you work.

Tap to place. Drag to turn. Pinch to zoom. The tools shrink to fit, but the workflow stays the same.

There's also a Grapher tab for drawing graphs with Desmos, with preset curves and a box for your own expression. It's a utility tab for when you need to plot a function alongside your molecule work.

Why a 3D Molecule Builder Helps

Shape becomes visible. A bent water molecule and a straight carbon dioxide molecule look the same in a formula. In 3D, you see why they differ. The oxygen in water has two lone pairs pushing the hydrogens together. The carbon in CO₂ has no lone pairs, so the oxygens stretch apart.

Mistakes are cheap. Place a wrong atom and press undo. Nothing is wasted. Nothing spills. You can try a structure, see it fail, and rebuild in seconds.

Numbers appear as you build. Bond angle, bond length, and molar mass update while you work. You don't calculate them separately. They're there, live, as you add each atom.

The tool meets you where you are. You don't need a kit, a classroom, or a chemistry set. You need a browser. That makes it available in a dorm room, a library, a coffee shop, or a high school lab with old computers.

How I Built It

The Stack

VEX Molecule Studio is built with three.js for 3D rendering, VSEPR theory for geometry, and web APIs for the interface. The molecule calculations run entirely in the browser. No server. No AI model. No cloud compute.

When you bond two atoms, the code looks up the element types, counts the bonds and lone pairs, and applies VSEPR rules to determine the shape. A water molecule has four electron pairs around oxygen: two bonds, two lone pairs. That means a tetrahedral electron geometry, which gives a bent molecular shape.

The bond angle for a bent molecule is roughly 104.5 degrees for water, because lone pairs repel more strongly than bonding pairs. The code knows this. It doesn't guess.

For more advanced SEO strategies around technical projects like this, I covered patterns in my SEO best practices guide.

PubChem and Protein Data Bank Integration

The Library tab connects to PubChem, the open chemistry database run by the National Center for Biotechnology Information. Type a molecule name, and the tool fetches the structure in SDF format, parses it, and renders it in 3D.

The Proteins tab connects to the RCSB Protein Data Bank. Type a PDB ID like "1CRN" for crambin, and the tool fetches the atomic coordinates, builds the structure, and applies one of five render styles.

Both integrations require an internet connection. If you're offline, the quick load buttons and manual building still work.

Why No AI?

I didn't use AI because the problem doesn't need it. VSEPR theory is deterministic. Oxygen always wants two bonds. Carbon always wants four. The bond angle for methane is always 109.5 degrees.

An AI model would introduce variance where none belongs. A student building water should get 104.5 degrees every time, not 104.3 on Monday and 104.7 on Wednesday. Predictability is the point.

For reference on when AI does belong in a project, I built other tools in the VisionVix platform that use models for generative tasks. Molecules aren't one of those tasks.

What It Cannot Do

This is an educational tool. It is not a lab tool, a safety tool, or a substitute for professional software. Here's what it deliberately doesn't do:

• It doesn't predict reaction pathways. You can build a molecule, but the tool won't tell you what happens if you mix it with another molecule.
• It doesn't calculate thermodynamic properties. No enthalpy, entropy, or Gibbs free energy.
• It doesn't handle transition states or radicals. The tool assumes stable, closed-shell molecules.
• It simplifies bond order. A benzene ring shows as alternating single and double bonds, not as a delocalized system.
• It doesn't do quantum mechanics. No molecular orbitals, no electron density plots, no wavefunction visualization.
• Real molecules can differ from VSEPR predictions by a few degrees. VSEPR is a model. It's accurate enough for teaching, not for research.

If you need those features, you need software like Gaussian, ORCA, or Avogadro. This tool is for learning the shape, not for designing a drug or running a simulation.

I also built a 3D Solar System Explorer with similar constraints: it's accurate enough to teach orbital mechanics, not to plot a Mars mission.

FAQ

Does it work offline?

Mostly. You can build molecules, load the quick library entries, and explore equations without an internet connection. PubChem search and Protein Data Bank require a connection.

Can I save my molecules?

Not yet. You can take a screenshot, but there's no export to a file format like PDB or MOL. That's on the list.

Can I share a molecule with a link?

Not yet. The molecule exists only in your browser session. Sharing via URL is planned.

What devices does it support?

Any device with a modern browser. Desktop, laptop, tablet, phone. I tested it on Chrome, Firefox, Safari, and Edge.

Is it open source?

No. It's a proprietary tool under VisionVix. You can use it for free at visionvix.world).

Can I use it in a classroom?

Yes. That's what it's for. Teachers can project it, students can use it on their own devices, and you don't need to install anything or buy kits.

What's the license for the data?

PubChem data is public domain. RCSB Protein Data Bank structures are freely available for research and education. The equations are standard physics and chemistry formulas.

For broader platform considerations when building educational tools, I outlined principles in website best practices.

Why I Built This

I wanted to see molecules the way they are, not the way they're drawn. A flat diagram hides the shape. A plastic kit costs money and takes space. A 3D builder in the browser does neither.

I built VEX Molecule Studio because the gap was there. Students deserve a tool that shows the shape as they build, not after. Teachers deserve a tool that works on any device without a purchase order. And I wanted to hold a molecule in my hand, even if that hand is a trackpad and the molecule is made of light.

If you want to see how I built this and other projects, I document the process on my YouTube channel. Open visionvix.world, press Open Simulators, and try Molecule Studio. Build water. Build methane. Build caffeine. See the shape appear.