3Dmol.js is an object-oriented, WebGL accelerated JavaScript library for online molecular visualization.
Since 3Dmol.js is licensed under the permissive BSD open-source license, you are free to use it in any project, as long the code is properly acknowledged and cited.
With 3Dmol.js, you can add beautifully rendered molecular visualizations to your web applications. Features include:
- support for pdb, sdf, mol2, xyz, cif, cdjson, mmtf, prmtop, gro, pqr, cube, and vasp formats
- parallelized molecular surface computation
- sphere, stick, line, cross, cartoon, and surface styles
- atom property based selection and styling
- labels
- clickable interactivity with molecular data
- geometric shapes including spheres and arrows
See the documentation to learn how to use 3Dmol.js as a hosted viewer, embeddable viewer, or as a component of a larger application.
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<div style="width: 400px; height: 400px;"
class='viewer_3Dmoljs' data-pdb='4N8T' data-style='cartoon:color=spectrum'
data-surface='opacity:.7;color:white'></div>We support the use of both PDB queries as well as PDB files.
First you simply create the viewer with a div's id.
var viewer = $3Dmol.createViewer($("#div"));Then you can download a protein data bank model (here pdb:1MO8) and display it with the styling of your choosing.
$3Dmol.download("pdb:1MO8",viewer,{multimodel:true, frames:true},function(){
viewer.setStyle({}, {cartoon:{color:"spectrum"}});
viewer.render();
});We also support the use of surfaces that are asynchronously loaded and support different color schemes
viewer.addSurface($3Dmol.SurfaceType.VDW, {
opacity:0.85,
voldata: new $3Dmol.VolumeData(volumedata, "cube"),
volscheme: new $3Dmol.Gradient.ROYGB(range[1],range[0])
},{});The use of different shapes and styles is supported.
viewer.addCylinder({start:{x:0.0,y:2.0,z:0.0},
end:{x:0.0,y:10.0,z:0.0},
radius:0.5,
fromCap:false,
toCap:true,
color:'teal'});
viewer.addCylinder({start:{x:15.0,y:0.0,z:0.0},
end:{x:20.0,y:0.0,z:0.0},
radius:1.0,
color:'black',
fromCap:false,
toCap:false});Please check out our documentation at 3dmol.js. We have tutorials, as well as the stable release of the platform.
Use Node.js 24 and npm 10 or newer to build and test
the project. If you use nvm, run nvm install and nvm use from the repository
root to select the version in .nvmrc. See CONTRIBUTING.md
for contribution and coverage upload instructions.
Builds include the package version and Git revision in each bundle's header and
in $3Dmol.buildInfo (also available as the buildInfo ES module export):
console.log($3Dmol.buildInfo);
// { version: "2.5.5", gitDescribe: "2.5.5-25-g07ff4af4-dirty",
// commit: "<full commit hash>", dirty: true }The Git description uses the nearest reachable tag, commit count, and abbreviated
hash; an exact tag is shown by itself. Without tags it uses the abbreviated hash.
-dirty indicates changes to tracked files; untracked files are not included.
Builds without Git or checkout metadata still include the package version, with
gitDescribe, commit, and dirty set to null. No build timestamp is included.
Please address any questions or concerns to dkoes@pitt.edu. You may also submit an issue on github.
If you use 3Dmol.js, please cite our Bioinformatics paper.
3DMol.js is funded through R35GM140753 (and previously R01GM108340) from the National Institute of General Medical Sciences. The content is solely the responsibility of the authors and does not necessarily represent the official views of the National Institute of General Medical Sciences or the National Institutes of Health.