PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

2.1.0

npm

3dmol

JavaScript/TypeScript molecular visualization library

Published11 Mar 2024
Direct dependencies36
Transitive dependenciesNot calculated

README

Current package documentation

3Dmol.js

CDNJS codecov Github CI

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.

Examples

HTML

<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>

JavaScript

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

Documentation

Please check out our documentation at 3dmol.js. 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 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.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 36

Native requirements
36 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
pako
Environment
{
  "local_name": "pako",
  "alias": false,
  "peer_metadata": null
}
^2.1.0runtime
upng-js
Environment
{
  "local_name": "upng-js",
  "alias": false,
  "peer_metadata": null
}
^2.1.0runtime
iobuffer
Environment
{
  "local_name": "iobuffer",
  "alias": false,
  "peer_metadata": null
}
^5.3.1runtime
netcdfjs
Environment
{
  "local_name": "netcdfjs",
  "alias": false,
  "peer_metadata": null
}
^3.0.0runtime
del
Environment
{
  "local_name": "del",
  "alias": false,
  "peer_metadata": null
}
^7.0.0development
tsc
Environment
{
  "local_name": "tsc",
  "alias": false,
  "peer_metadata": null
}
^2.0.4development
jest
Environment
{
  "local_name": "jest",
  "alias": false,
  "peer_metadata": null
}
^29.3.1development
jsdoc
Environment
{
  "local_name": "jsdoc",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
jsdom
Environment
{
  "local_name": "jsdom",
  "alias": false,
  "peer_metadata": null
}
^20.0.3development
canvas
Environment
{
  "local_name": "canvas",
  "alias": false,
  "peer_metadata": null
}
^2.11.0development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^8.30.0development
jquery
Environment
{
  "local_name": "jquery",
  "alias": false,
  "peer_metadata": null
}
^3.6.3development
codecov
Environment
{
  "local_name": "codecov",
  "alias": false,
  "peer_metadata": null
}
^3.8.3development
glcheck
Environment
{
  "local_name": "glcheck",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/glcheckdevelopment
taffydb
Environment
{
  "local_name": "taffydb",
  "alias": false,
  "peer_metadata": null
}
^2.7.3development
ts-node
Environment
{
  "local_name": "ts-node",
  "alias": false,
  "peer_metadata": null
}
^10.9.1development
webpack
Environment
{
  "local_name": "webpack",
  "alias": false,
  "peer_metadata": null
}
^5.75.0development
ts-loader
Environment
{
  "local_name": "ts-loader",
  "alias": false,
  "peer_metadata": null
}
^9.4.2development
node-fetch
Environment
{
  "local_name": "node-fetch",
  "alias": false,
  "peer_metadata": null
}
^2.6.7development
raw-loader
Environment
{
  "local_name": "raw-loader",
  "alias": false,
  "peer_metadata": null
}
^4.0.2development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.9.4development
url-loader
Environment
{
  "local_name": "url-loader",
  "alias": false,
  "peer_metadata": null
}
^4.1.1development
@babel/core
Environment
{
  "local_name": "@babel/core",
  "alias": false,
  "peer_metadata": null
}
^7.20.7development
@types/pako
Environment
{
  "local_name": "@types/pako",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development
better-docs
Environment
{
  "local_name": "better-docs",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/better-docs#masterdevelopment
webpack-cli
Environment
{
  "local_name": "webpack-cli",
  "alias": false,
  "peer_metadata": null
}
^5.0.1development
jsdom-worker
Environment
{
  "local_name": "jsdom-worker",
  "alias": false,
  "peer_metadata": null
}
^0.3.0development
clean-jsdoc-theme
Environment
{
  "local_name": "clean-jsdoc-theme",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/clean-jsdoc-theme#masterdevelopment
source-map-support
Environment
{
  "local_name": "source-map-support",
  "alias": false,
  "peer_metadata": null
}
^0.5.21development
@babel/eslint-parser
Environment
{
  "local_name": "@babel/eslint-parser",
  "alias": false,
  "peer_metadata": null
}
^7.19.1development
eslint-webpack-plugin
Environment
{
  "local_name": "eslint-webpack-plugin",
  "alias": false,
  "peer_metadata": null
}
^3.2.0development
terser-webpack-plugin
Environment
{
  "local_name": "terser-webpack-plugin",
  "alias": false,
  "peer_metadata": null
}
^5.3.6development
jest-environment-jsdom
Environment
{
  "local_name": "jest-environment-jsdom",
  "alias": false,
  "peer_metadata": null
}
^29.3.1development
jest-webgl-canvas-mock
Environment
{
  "local_name": "jest-webgl-canvas-mock",
  "alias": false,
  "peer_metadata": null
}
^0.2.3development
webpack-bundle-analyzer
Environment
{
  "local_name": "webpack-bundle-analyzer",
  "alias": false,
  "peer_metadata": null
}
^4.7.0development
@babel/plugin-transform-typescript
Environment
{
  "local_name": "@babel/plugin-transform-typescript",
  "alias": false,
  "peer_metadata": null
}
^7.20.7development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "1fc386e90c7e29244480c47d6c72c236fb9e81ef",
  "tarball": "https://registry.npmjs.org/3dmol/-/3dmol-2.1.0.tgz",
  "fileCount": 327,
  "integrity": "sha512-w1pfTR8+pDtOpxbGDrBWCbOXiTBqLhHO/OQ5xK3nD4trM0OTPCl8opaTl2iyCfwFRUbqmd2I4Qtjw7x9Boe+OA==",
  "signatures": [
    {
      "sig": "MEQCIFdgI2lVKKjhxrBHwAz+lbId20Npc+Hb4CSzvl4DRE/mAiArk73ZD+osHmuY0FvfFpkxLNtYg8H14yPFBzKvb6/mbA==",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 8338522
}

Repository

PENDING
3dmol/3dmol.js

Shared repository data · GitHub

License detected in repository
Not collected

Repository

PENDING
dkoes/3dmol.js

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:40 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:fe1fe705cf9dbb62e0b0beca86b32a6a67e06f6ed5745ccee0fa3097f0db4453

Other collected versions

2.5.522 May2.5.422 Jan2.5.327 Sept2.5.230 Jul2.5.126 Jun2.5.03 JunView all collected versions →