Skip to content
WebGL accelerated JavaScript molecular graphics library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
.settings
3Dmol-doc-template
3Dmol V3000Support: Attempt to add V3000 support for SD files. Apr 16, 2019
ReadMeIMGS
css
doc-data
examples
js
lib/closure_compiler/build
nbproject
paper bug fixes Nov 18, 2014
py3Dmol
release
tests
track
tutorials
viewer work on viewer Feb 21, 2017
.gitignore refine addBox to take center; remove node_modules from git Feb 1, 2018
.gitmodules
.npmignore
.project
.pydevproject
CONTRIBUTING.md
Gruntfile.js
LICENSE update version and clarify license May 19, 2016
README.md
doc.js
doc.md
echo.cgi python path Oct 10, 2014
index.html
jsdoc.conf.json
package.json
sample.html
viewer.css
viewer.html
viewer.js

README.md

3Dmol.js

CDNJS

3Dmol.js is an object-oriented, webGL based JavaScript library for online molecular visualization - No Java required! Since 3Dmol.js is licensed under the permissive BSD open-source license, you are free to use it any 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, and cube 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.

Examples

PDB

We support the use of both PDB queries as well as PDB files.

Alt Text

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 styleing of your choosing.

$3Dmol.download("pdb:1MO8",viewer,{multimodel:true, frames:true},function(){
	viewer.setStyle({}, {cartoon:{color:"spectrum"}});
	viewer.render();
});

Surfaces

We also support the use of surfaces that are asynchronously loaded and support different color schemes

Alt Text

viewer.addSurface($3Dmol.SurfaceType.VDW, {
    opacity:0.85,
    voldata: new $3Dmol.VolumeData(volumedata, "cube"),
    volscheme: new $3Dmol.Gradient.ROYGB(range[1],range[0]) 
},{});              
        

Shapes

The use of different shapes and styles is supported.

Alt Text

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});

Building

The code can be built using grunt. In order to install grunt you simply need to use npm.

npm install -g grunt-cli

Then you are ready to build the program.

cd 3Dmol.js
grunt build

This will build the program and allow you to access the completely built file at 3Dmol.js/build/3Dmol-pre.js.

Documentation

Please check out our documentation at http://3dmol.csb.pitt.edu/doc/index.html we have tutorials as well as the stable release of the platform.

Contact

Please address any questions or concerns to dkoes@pitt.edu.
You may also submit an issue on github.

Citing

If you use 3Dmol.js, please cite our Bioinformatics paper.

Funding

3DMol.js is funded through 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.

You can’t perform that action at this time.