science

iCn3D Structure Viewer - Free Self-hosted Protein Structure Viewer

Hazem Abbas

Jul 6, 2024 — 8 min read

"I see in 3D" (iCn3D) Structure Viewer is not only a web-based 3D viewer, but also a structure analysis tool interactively or in the batch mode using NodeJS scripts based on the npm package icn3d. 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. The complete package of iCn3D including Three.js and jQuery is in the directory "dist" after you get the source code with the "Code" button. You can click the file "index.html" in the "dist" directory to launch a local version of iCn3D.

Features

Embed iCn3D with iframe or JavaScript libraries
View a 3D structure in iCn3D: Open the link https://structure.ncbi.nlm.nih.gov/icn3d, 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.
VR and AR views in iCn3D: The Virtual Reality (VR) and Augmented Reality (AR) views are shown in this video.You can open a bowser in your Virtual Reality (VR) headset and view a 3D structure in iCn3D. Then click the button "Enter VR" at the bottom center of your browser to enter the VR view. You can select residues with the trigger button, open the menu with the squeeze button and click menus with the trigger, navigate with the thumbstick pressed forward/backward and press the trigger. There are menus for Select, Style, Color, and Analysis. You need to make one selection before clicking the Interaction button and make two selections before clicking the Distance button.The Augmented Reality (AR) view is currently only available to iCn3D views in Chrome browser using Android phones. You can view a 3D structure in iCn3D and click the button "START AR" at the bottom center to see the 3D structure in your surroundings. You can tap twice quickly on the screen to locate a minimized 3D structure in your tapped location, and pinch to scale the 3D structure.
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 File". 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.The "iCn3D PNG Image" can also be stored in a web server (e.g., https://figshare.com, https://zenodo.org). The PNG image can then be loaded into iCn3D via the URL, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?type=icn3dpng&url=https://api.figshare.com/v2/file/download/39125801, or https://www.ncbi.nlm.nih.gov/Structure/icn3d/?type=icn3dpng&url=https://zenodo.org/api/files/1a3325c8-0c84-4f1e-be2c-c143b08c6563/3GVU-XCxR6fSTmXHxR3o1A.png, where the URL of the PNG image is retrieved from the JSON blob at https://zenodo.org/api/records/7599970.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.
Python scripts to batch process structures: Python scripts can be used to process 3D structures (e.g., export secondary structures, PNG images, or analysis output) in batch mode. The example scripts are at icn3dpython.
Node.js scripts using npm "icn3d" to batch process structures: 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.
Annotations for AlphaFold structures: For any custom structures such as AlphaFold structures, you can show conserved domain and 3D domain annotations. For AlphaFold structures, you can also show SNP and ClinVar annotations.
Align AlphaFold structures: You can align AlphaFold structures or PDB structures with the menu "File > Align > Multiple Chains" or "File > Align > Protein Complexes > Two AlphaFold Structures". You can also load any structures as usual, then load your custom PDB file with the menu "File > Open File > PDB File (appendable)", then relaign these structures with the menu "File > Realign Selection > by Structure Alignment".
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".
Isoforms and Exons: You can view the Isoforms and Exons by clicking the button "Add Track" in the "Sequences & Annotations" window via the menu "Analysis > Sequences & Annotations".
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.
2D Cartoons in the chain, domain, and secondary structure levels: You can use click "Analysis > 2D Cartoon" to show 2D Cartoons in the chain, domain, and secondary structure levels.
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.

Data Sources

iCn3D accepts the following IDs:

mmdbafid: A list of PDB or AlphaFold UniProt IDs for realignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmdbafid=1HHO,4N7N,P69905,P01942. You can then input multiple PDB files with the menu "File > Open File > PDB Files (appendable)". Next you can click the menu "File > Realign Selection > by Structure Alignment" to realign all loaded structures.
protein: Protein/Gene name to search AlphaFold structures, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?protein=TP53&showanno=1&showsets=1
mmdbid: NCBI MMDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmdbid=1tup&showanno=1&show2d=1&showsets=1
bcifid or mmtfid: Binary CIF ID or MMTF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?bcifid=1tup&show2d=1&showsets=1
pdbid: PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?pdbid=1tup&showanno=1&showsets=1
afid: AlphaFold Structure with UniProt ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?afid=A0A061AD48&showanno=1&showsets=1
refseqid: AlphaFold Structure with NCBI Protein Accession, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?refseqid=NP_001743.1&show2d=1&showsets=1
opmid: Orientations of Proteins in Membranes(OPM) PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?opmid=6jxr&show2d=1&showsets=1
mmcifid: mmCIF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmcifid=1tup&show2d=1&showsets=1
cid: PubChem Compound ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?cid=2244
align two structures: two PDB IDs or MMDB IDs for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?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/?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/?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/?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)

Tools Based on

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.
py3Dmol: The Jupyter Notebook widget "icn3dpy" is based on py3Dmol.
Orientations of Proteins in Membranes (OPM): The membrane data of transmembrane proteins are from OPM.
Membranome: For AlphaFold Structures, the membrane data of single-spanning transmembrane proteins are from Membranome.
Post-Translational Modification (PTM): The PTM data are from UniProt.
UglyMol: The electron density maps from CCP4 map or MTZ format are based on UglyMol.

Citation

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

Wang J, Youkharibache P, Marchler-Bauer A, Lanczycki C, Zhang D, Lu S, Madej T, Marchler GH, Cheng T, Chong LC, Zhao S, Yang K, Lin J, Cheng Z, Dunn R, Malkaram SA, Tai C-H, Enoma D, Busby B, Johnson NL, Tabaro F, Song G, Ge Y. iCn3D: From Web-Based 3D Viewer to Structural Analysis Tool in Batch Mode. Front. Mol. Biosci. 2022 9:831740. (Epub 2022 Feb 17.) doi: 10.3389/fmolb.2022.831740. PubMed PMID: 35252351, Full Text at Frontiers