"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of iview and GLmol, the surface generation of 3Dmol, and the Imposter shaders of [NGL Viewer] (https://github.com/arose/ngl). iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI.
We provided two versions of iCn3D widgets: basic interface and advanced interface.
- The basic interface has the minimum javascript code for the interface and is easy to understand. It has the basic features such as changing color and styles.
- The advanced interface has a library for the interface and is more complicated to understand. It has many features.
Either of these widgets could be easily added to your own web pages. Please see the help page for more details.
Complete package of iCn3D including Three.js and jQuery can be downloaded from https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.4.1.zip. The "Download ZIP" link in this page does not include these third-party libraries.
iCn3D accepts the following IDs:
- mmdbid: NCBI MMDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&showseq=1&show2d=1
- mmtfid: MMTF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por
- pdbid: PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por
- mmcifid: mmCIF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por
- gi: NCBI protein gi number, https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227
- cid: PubChem Compound ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244
- align: Two PDB IDs or MMDB IDs for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n
iCn3D also accepts the following file types: PDB, mmCIF, Mol2, SDF, and XYZ. The files can be passed through a url, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb:
See the help page or the API page for more details.
- jQuery and jQuery UI: used as a general tool to write Javascript code. Some jQuery UI features are used.
- Three.js: used to set up the 3D view.
- iview: The drawing of 3D objects is mainly based on iview.
- GLmol: The drawing of nucleotides cartoon is from GLmol.
- 3Dmol: The surface generation and labeling are from 3Dmol.
- NGL Viewer: The Imposter shaders are from NGL Viewer.
If you want to work with the development version, then you'll need to use the Node.js build tools. We recommend using nvm (Node version manager). First, install that per the instructions in that README file, and then install the latest LTS version of Node.js, with, for example,
nvm install 4.2.2
nvm alias default 4.2.2 #=> Use this as default from now on
node --version #=> expect "v4.2.2"
Next, clone this repository, and then perform the following setup steps in your working copy of icn3d.
npm install -g gulp
npm install
The first line installs the gulp build tool globally, making the gulp command available on the command line. The next line installs all of the dependences for this project.
You only have to perform the above steps once, to set up your working directory. From then on, to build, simply enter:
gulp
Then, serve the site from an HTTP server, to test it. If you don't have one readily available, you could uses the http-server app, with:
npm install -g http-server
http-server
Then point your browser at https://localhost:8080/icn3d.html.
Run gulp help to get a list of the available tasks.
A special task "gh-pages" will build the distribution files, and then push them to GitHub pages. Make sure, in your working clone, that you define a remote named "github" that points to a repo on GitHub that you have write permission to, and then enter
gulp gh-pages
The production version icn3d-1.4.1 was release on November 3, 2017. The version of THREE.js in the zip file was fixed.
The production version icn3d-1.4.0 was release on November 2, 2017. The rendering speed has been significantly improved by using the Imposter shaders from NGL Viewer. A bug in "Share Link" was fixed.
The production version icn3d-1.3.10 was release on October 27, 2017. The "Save File" issue in Chrome 60 and after was fixed.
The production version icn3d-1.3.9 was release on September 5, 2017. The handling of residues with insertion codes was fixed in structure alignment.
The production version icn3d-1.3.8 was release on August 7, 2017. The handling of residues with insertion codes was fixed.
All previous releases can be found at the API page.
Please send all comments to wangjiy@ncbi.nlm.nih.gov.