3D Structure Inspector

Render PDB, SDF, MOL2, XYZ, CIF, GRO, CUBE, MMTF, VASP, and more.

or

PDB · SDF · MOL · MOL2 · XYZ · CIF · CDJSON · MMTF · PRMTOP · GRO · PQR · CUBE · VASP

How-To Guide

How to inspect a molecular structure

Load a coordinate file, choose how it should be drawn, then carve out the part you actually care about, all rendered locally by your GPU, with no upload step.

1

Load a structure

Drag in a PDB, GRO, XYZ, CIF, MOL2, CUBE or other coordinate file, or type a four-character PDB ID to pull it straight from RCSB.

2

Pick a representation

Choose cartoon for proteins, stick or ball-and-stick for small molecules, sphere for packing. Colour by element, chain, B-factor, secondary structure, or set every element by hand.

3

Narrow the selection

Use the builder dropdowns for chain, residue and element, add a within radius for binding pockets, or slice along an axis with the spatial sliders. Isolate hides everything else; Highlight keeps the context as a faint wireframe.

4

Measure and export

Click two atoms for a distance or three for an angle, switch on Figure mode to fade the surrounding structure, restyle the lines and labels to taste, then save a high-resolution PNG or copy the numbers as a table.

Keyboard shortcuts. R recentre · M measure mode · H hydrogens · L labels · S spin · Esc cancel. Shortcuts are ignored while you are typing in a field.

How the viewer works

WebGL rendering

Geometry is built and rasterised by 3Dmol.js on your graphics card. Because the whole scene lives in GPU memory, rotation and zoom stay smooth on structures with hundreds of thousands of atoms, but every style change has to rebuild that geometry, which is why very large systems take a moment to re-draw.

Selections are JSON, not strings

3Dmol filters atoms with plain JavaScript objects such as {chain:'A', resn:'HEM'}. The query box compiles your text into exactly that shape, so anything you type here maps directly onto the library's own API, useful if you later script the same selection yourself.

Neighbour search

Distance queries (within:) index the target atoms into a uniform grid first, then test only the cells that could fall inside the radius. That keeps a pocket selection near-instant instead of comparing every atom against every other atom.

Labels are built across frames

Placing thousands of labels in one synchronous loop is what freezes a tab, nothing paints until the last one is done. Labels here are added in slices of about 150 per animation frame, with a progress readout, so the viewer stays interactive and you can watch them fill in. Starting a new label pass cancels the one in flight rather than queueing a second.

Scope beats capping

A cap alone still labels whichever atoms happen to come first in the file, which is rarely what you are looking at. Set Label scope to Current selection to label only what you isolated; when a scope still exceeds the limit, the atoms nearest the centre of the view are kept in preference to the rest.

Labels are the usual bottleneck. Each label is a separate textured sprite, so tens of thousands of them will stall the browser long before the atoms themselves do. Labels are capped by default, warned about above 5,000 atoms, and disabled entirely above 50,000, raise the cap only when you have isolated a small region.
Selection Syntax

The selection language

Every token is key:value, separated by spaces. Tokens are combined with AND, chain:A elem:Fe means iron atoms in chain A. Prefix any token with not: (or !) to invert just that token.

Atom attributes

TokenSelects
chain:A

Chain identifier as written in the file.

resn:HOH

Residue name. Accepts comma lists: resn:ALA,GLY.

resi:1-50

Residue number: a single value, a comma list, or an inclusive range.

elem:Fe

Element symbol, case sensitive as stored in the file.

atom:CA

Atom name | more specific than element (CA is the alpha carbon).

ss:h

Secondary structure: h helix, s sheet, c coil.

b:>30

B-factor. Supports >, <, >=, <= and ranges like b:20-50.

serial:1-99

Atom serial number range.

Named groups

TokenSelects
protein:1

Standard amino-acid residues.

nucleic:1

DNA and RNA residues.

solvent:1

Water under its common names (HOH, WAT, SOL, TIP3…).

ion:1

Frequently seen monatomic ions.

backbone:1

Protein backbone atoms N, CA, C, O.

sidechain:1

Amino-acid atoms that are not backbone.

hetero:1

Atoms flagged as HETATM | ligands, cofactors, solvent.

Geometry and logic

TokenSelects
x:>4.8

Cartesian coordinate filter on x, y or z. Ranges work too: z:10-20. Values follow the unit dropdown (Å or nm).

within:5,chain:A

Every atom within 5 Å of anything matching the inner selection. The radius comes first, then a comma, then a nested query.

not:resn:HOH

Inverts the token that follows. !resn:HOH is equivalent.

or:chain:A|chain:B

Union of the pipe-separated clauses.

byres:1

Expands the result so that any residue with one selected atom is selected entirely.

Worked examples

QueryMeaning
within:5,resn:HEM byres:1

The complete residues lining the haem pocket, the standard way to picture a binding site.

within:5,chain:A not:chain:A byres:1

The protein–protein interface: residues close to chain A that belong to a different chain.

protein:1 not:solvent:1 b:>60

The most mobile parts of the protein | often loops and termini.

ss:h chain:A

Helices of chain A only.

z:>30 not:solvent:1

The upper leaflet of a membrane system with water stripped out.

References & documentation

  1. Rego, N., & Koes, D. (2015). 3Dmol.js: molecular visualization with WebGL. Bioinformatics, 31(8), 1322–1324. doi:10.1093/bioinformatics/btu829
  2. 3Dmol.js API, AtomSelectionSpec reference (University of Pittsburgh).
  3. Berman, H. M., et al. (2000). The Protein Data Bank. Nucleic Acids Research, 28(1), 235–242. rcsb.org
  4. Wikipedia: Accessible surface area · B-factor.

Frequently asked questions

Is my structure uploaded anywhere?
No. Files are read with the browser's FileReader and rendered by 3Dmol.js on your own GPU. The only network request the tool ever makes is the optional PDB ID fetch, which asks RCSB for that one public entry.
Which file formats are supported?
PDB, ENT, CIF/mmCIF, SDF, MOL, MOL2, XYZ, GRO, PQR, PRMTOP, MMTF, CDJSON, CUBE and VASP/POSCAR/CONTCAR. Multi-frame files load as a trajectory and expose the frame slider automatically.
Why does the cartoon style show nothing?
Cartoon rendering needs backbone connectivity and secondary-structure information, which only protein and nucleic-acid formats carry. A bare XYZ file or a small organic molecule has no backbone to trace, use stick or ball-and-stick instead.
Why are my labels capped or disabled?
Every label is an individual sprite, so they cost far more than the atoms do. Above 5,000 atoms the tool warns you and exposes a cap; above 50,000 it refuses labels outright to stop the tab freezing. Isolate a smaller region first, then label it.
My high-resolution export came out smaller than I asked for.
WebGL contexts have a maximum texture size, commonly 4,096, 8,192 or 16,384 pixels depending on the GPU. Requesting a multiplier beyond that limit would black out the canvas, so the export is clamped to the largest safe size and the panel tells you what you actually got.
What is the difference between Isolate and Highlight?
Isolate hides everything outside the selection, giving you a clean figure. Highlight keeps the rest of the structure as a faint wireframe so the selection stays in context, usually the better choice when you are explaining where something sits.
Which surface type should I use?
Van der Waals is fastest and shows atomic radii. Solvent-accessible traces the centre of a rolling probe and is what most buried-area calculations use. Solvent-excluded (Connolly) hugs the molecule more tightly and looks best in figures, but costs the most to compute.
Turning on labels used to freeze the tab. What changed?
Labels are now built in small slices spread across animation frames instead of one blocking loop, so the browser keeps painting and you get a live progress count. They are also scoped (by default to your current selection) and when a scope exceeds the limit the atoms nearest the centre of the view are kept. Above 50,000 atoms labels stay off unless you explicitly opt in, and even then the same chunking applies.
How do I make a clean measurement figure?
Take your measurements, then enable Figure mode in the Tools tab. Everything except the measured atoms drops to a faint wireframe (or thin stick, cartoon, or hidden entirely) at an opacity you control, while the picked atoms keep the full representation. Open Measurement appearance to set the line colour, thickness and dash, marker size, label size and colour, decimal places and whether units are shown. Use Zoom to picks to frame the shot, then export at 4× or higher.
Can I get the measurement numbers out as data?
Yes, Copy data puts every measurement on the clipboard as tab-separated text with type, atoms, value and unit columns, which pastes straight into a spreadsheet. Individual measurements can be removed with the × beside each row in the readout.
Why does building a surface still pause the viewer?
Surface meshing happens inside a single synchronous call in 3Dmol.js, so unlike labels it cannot be sliced across frames. What the tool does instead is paint a busy indicator first and start the work on the next frame, so you get feedback rather than a dead tab, and it refuses outright above 100,000 atoms. Scope the surface to your selection with Only current selection to keep it fast.
Can I script the same selections elsewhere?
Yes, the query box compiles to a 3Dmol AtomSelectionSpec object, so a query like chain:A resn:HEM is simply {chain:'A', resn:'HEM'} in the library's own API. Open the console and call app.select('within:5,resn:HEM') to get the matching atoms back as an array.

Runs entirely in your browser, no data leaves your device. Rendering by 3Dmol.js (Rego & Koes, 2015).