"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. Complete package of iCn3D including Three.js and jQuery can be downloaded from https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.3.5.zip. The "Download ZIP" link in this page does not include third-party libraries.
-
View a 3D structure in iCn3D: Open the link https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html, input a PDB ID, and click "Load". You can also click "File" menu to "Open File" or input other IDs.
As mentioned in the menu "Help > Transformation Hints", you can use Left mouse button for rotation, Middle mouse wheel for zooming, and Right mouse button for translation.
The most important point about using iCn3D is the current selection. Any operations on color, style, etc. are working on the current selection. By default, all atoms are selected. Once you select any subset, your operation will work ONLY on the subset. You can switch the selection using the toggle next to the Help menu.
-
Create custom 3D view: You first open a structure in "File" menu, then select a subset in "Select" menu, view only the selected subset by clicking "View Only Selection" in View menu, finally change styles or colors in "Style" and "Color" menus.
Each operation has a corresponding command as listed at https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#commands. These commands will show up in the command/log window right beneath the 3D display. To view all previous commands, you can click "Share Link" in "File" menu. Both the original URL and the short URL can be used to display your custom view.
-
Save your work: You can save "iCn3D PNG Image" in the menu "File > Save Files". Both the PNG file and an HTML file are saved. Click the HTML file to see the PNG image, which is linked to the custom display via a shorten URL. The downloaded "iCn3D PNG Image" itself can also be used as an input in the menu "File > Open File" to reproduce the custom display. You can combine these HTML files to generate your own galleries.
You can also save "Share Link" in "File" menu to share with your colleagues. These URLs are lifelong. You can click "Replay Each Step > On" in "File" menu to learn how a custom display was generated.
All "Share Link" URLs can show the original view using the archived version of iCn3D by clicking "Open File > Share Link in Archived Ver." in "File" menu.
-
Node.js scripts using npm "icn3d": You can download npm "icn3d" package to write Node.js scripts by calling iCn3D functions. These scripts can be used to process 3D structures (e.g., calculate interactions) in batch mode. The example scripts are at icn3dnode.
-
Alternate SNPs in 3D: You can alternate in 3D wild type and mutant of SNPs by clicking the menu "Analysis > Sequences & Annotations", the tab "Details", the checkbox "SNP", and mouseover on SNPs.
-
DelPhi Electrostatic Potential: You can view the DelPhi Electrostatic Potential in the menu "Analysis > DelPhi Potential".
-
Symmetry: You can show precalculated symmetry, or calculate symmetry dynamically using SymD.
-
Use iCn3D in Jupyter Notebook: You can use iCn3D in Jupyter Notebook with the widget "icn3dpy". The instructions are at pypi.org/project/icn3dpy.
-
Show Contact Map for any Selected Residues: You can click the menu "Analysis > Contact Map" to show the interactive contact map for any selected residues. You can export the map in PNG or SVG.
-
More features are listed at www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html: binding site, interaction interface, 3D printing, transmembrane proteins, surface, EM map, electron density map, 1D sequences and 2D interactions, align two structures, align multiple chains, align a protein sequence to a structure, realign, custom tracks, force-directed graph for interactions, solvent accessible surface area, etc.
iCn3D can be embedded in a web page by including the URL in HTML iframe, e.g. <iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&width=300&height=300&showcommand=0&mobilemenu=1&showtitle=0" width="320" height="320" style="border:none"></iframe>. This method always shows the most recent version of iCn3D.
To embed iCn3D with JavaScript libraries, the following libraries need to be included: jQuery, jQuery UI, Three.js, and iCn3D library. An html div tag to hold the 3D viewer is added. The iCn3D widget is initialized with the custom defined parameter "cfg": "var icn3dui = new icn3d.iCn3DUI(cfg); icn3dui.show3DStructure();". Multiple iCn3D widgets can be embedded in a single page. Please see the source code of the example page for reference.
Users can choose to show the most recent version of iCn3D, or a locked version of iCn3D. To show the most recent version, use the library files without the version postfix as shown in the iCn3D Doc page. To show a locked version, use the library files with the version postfix as shown in the source code of iCn3D page. If the input is provided as an MMDB ID, both library files and backend cgis are versioned so that the 3D display will be stable.
iCn3D accepts the following IDs:
- mmdbid: NCBI MMDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&showanno=1&show2d=1&showsets=1
- mmtfid: MMTF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=1tup&show2d=1&showsets=1
- pdbid: PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=1tup&show2d=1&showsets=1
- opmid: Orientations of Proteins in Membranes(OPM) PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?opmid=6jxr&show2d=1&showsets=1
- mmcifid: mmCIF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=1tup&show2d=1&showsets=1
- gi: NCBI protein gi number, https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=1310960&show2d=1&showsets=1
- uniprotid: UniProt ID, https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?uniprotid=P0DTC2
- cid: PubChem Compound ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244
- align two structures: two PDB IDs or MMDB IDs for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n&showalignseq=1&show2d=1&showsets=1
- align multiple chains: any multiple chains for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?chainalign=1HHO_A,4N7N_A&showalignseq=1&show2d=1&showsets=1
- blast_rep_id and query_id: NCBI protein accessions of a protein sequence and a chain of a 3D structure for sequence-structure alignment, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?from=icn3d&blast_rep_id=1TSR_A&query_id=NP_001108451.1&command=view annotations; set annotation cdd; set annotation site; set view detailed view; select chain 1TSR_A; show selection](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?from=icn3d&blast_rep_id=1TSR_A&query_id=NP_001108451.1&command=view annotations; set annotation cdd; set annotation site; set view detailed view; select chain 1TSR_A; show selection)
iCn3D also accepts the following file types: PDB, mmCIF, Mol2, SDF, XYZ, and iCn3D PNG. The files can be passed through a url, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https://files.rcsb.org/view/1gpk.pdb or https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=icn3dpng&url=https://www.ncbi.nlm.nih.gov/Structure/icn3d/pdb/3GVU.png. See the help page or the Doc 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.
- D3.js: used to draw force-directed graph.
- DelPhi: used to calculate electrostatic potential dynamically and is licensed from Columbia University.
- DelPhiPKa: used to add hydrogens and partial charges to proteins and nucleotides.
- Open Babel: used to add hydrogens to ligands.
- Antechamber: used to add partial charges to ligands.
- SymD: used to calculate symmetry dynamically.
- scap/Jackal: used to predict side chain conformation dynamically.
- iview: The drawing of 3D objects is based on iview.
- GLmol: The drawing of nucleotides cartoon is based on GLmol.
- 3Dmol: The surface generation and labeling are based on 3Dmol.
- NGL Viewer: The Imposter shaders are based on NGL Viewer.
- LiteMol: The parser of EM density data from PDBe is based on LiteMol.
- Orientations of Proteins in Membranes (OPM): The membrane data of transmembrane proteins are from OPM.
- Force-Directed Graph: "2D Graph (Force-Directed)" in the menu "Analysis > H-Bonds & Interactions" is based on Force-Directed Graph.
- py3Dmol: The Jupyter Notebook widget "icn3dpy" is based on py3Dmol.
If you want to build your code easily, you'll need to install nodejs and npm.
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 two lines 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
Please send all comments to [email protected].
Bioinformatics. 2020 Jan 1;36(1):131-135. doi: 10.1093/bioinformatics/btz502.
To cite iCn3D, please reference:
Wang J, Youkharibache P, Zhang D, Lanczycki CJ, Geer RC, Madej T, Phan L, Ward M, Lu S, Marchler GH, Wang Y, Bryant SH, Geer LY, Marchler-Bauer A. iCn3D, a Web-based 3D Viewer for Sharing 1D/2D/3D Representations of Biomolecular Structures. Bioinformatics. 2020 Jan 1; 36(1):131-135. (Epub 2019 June 20.) doi: 10.1093/bioinformatics/btz502. PubMed PMID: 31218344, Full Text at Oxford Academic