What is iCn3D Structure Viewer?

"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. Some features are listed below.

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

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

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

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

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

  6. DelPhi Electrostatic Potential: You can view the DelPhi Electrostatic Potential in the menu "Analysis > DelPhi Potential".

  7. Use iCn3D in Jupyter Notebook
    You can use iCn3D in Jupyter Notebook with the widget "icn3dpy". The instructions are at pypi.org/project/icn3dpy

  8. Show binding site
    You can click "Chem. Binding" in "View" menu to show all hydrogen bonds around chemicals. You can also Show interaction interface by clicking "H-Bonds & Interactions > 2D Interaction Graph, or Highlight Interactionsin Table" in "View" menu.

  9. Export models for 3D printing
    You can click "3D Printing" in "File" menu to export models for 3D printing. Both STL and VRML files are supported.

  10. Show transmembrane proteins
    If the protein is a transmembrane protein, you can click "File > Retrieve by ID > OPM PDB ID" to input a PDB ID to view the membranes.

  11. Show surface, EM map, or electron density map
    You can click "Style > Surface Type", "Style > EM Density Map", or "Style > Electron Density".

  12. View 1D sequences and 2D interactions
    In the page https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1TUP, you can click in "Windows" menu to "View Sequences & Annotations", "View Interactions", and see all "Defined Sets", which can be clicked to see any of your selections.

  13. Select on 3D, 1D and 2D
    To select on 3D structures: hold "Alt" and use mouse to pick, hold "Ctrl" to union selection, hold "Shift" to select a range, press the up/down arrow to switch among atom/residue/strand/chain/structure. Click "Save Selection" in "Select" menu to save the current selection.

    To select on 1D sequences: drag on the sequences or the blue track title to select.

    To select on 2D interaction diagram: click on the nodes or lines. The nodes are chains and can be united with the Ctrl key. The lines are interactions and can NOT be united. Each click on the lines selects half of the lines, i.e., select the interacting residues in one of the two chains.

  14. Align two structures, align two chains, or align a protein sequence to a structure
    You can click "File > Align" to see all three alignment options. You can also realign a subset of the structures.

  15. Add custom tracks
    You can add custom tracks in various formats (FASTA, bed file, etc.) in the annotation window by clicking the menu "Analysis > View Sequences & Annotations".

  16. Show force-directed graph for interactions
    You can show the interactions using 2D force-directed graph in the menu "View > H-Bonds & Interactions > 2D Graph (Force-Directed)".

  17. Calculate and show Solvent accessible surface area (SASA)
    You can color structures with SASA, or show the SASA for each residue.

  18. Show precalculated symmetry, or calculate symmetry dynamically using SymD.

COVID-19-related gallery with live examples back to top

iCn3D gallery with live examples ("iCn3D PNG Images", all images below except the first five snapshots, can be loaded into iCn3D by clicking "Open File > iCn3D PNG Image" in iCn3D File menu) back to top


Use iCn3Dback to top

iCn3D Videosback to top

URL parametersback to top

mmdbidNCBI MMDB ID or PDB ID, e.g., ?mmdbid=1tup&showanno=1&show2d=1
mmtfidMMTF ID, e.g., ?mmtfid=1tup
pdbidPDB ID, e.g., ?pdbid=1tup
mmcifidmmCIF ID, e.g., ?mmcifid=1tup
giNCBI protein gi number, e.g., ?gi=827343227
cidPubChem Compound ID, e.g., ?cid=2244
blast_rep_idNCBI protein accession of a chain of a 3D structure. "blast_rep_id" combines with the parameter "query_id" of a protein sequence to show the sequence-structure alignment, e.g., from=icn3d&blast_rep_id=1TSR_A&query_id=NP_001108451.1
alignTwo PDB IDs or MMDB IDs for structure alignment, e.g., ?align=1hho,4n7n
chainalignTwo chains for structure alignment, e.g., ?chainalign=1HHO_A,4N7N_A
urlUse the url (encoded) to retrieve the 3D structure. The url requires another parameter "type", e.g., ?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb
widthWidth of the structure image. It can be percentage such as '100%', or pixel values such as 400. The default is "100%".
heightHeight of the structure image. It can be percentage such as '100%', or pixel values such as 400. The default is "100%".
resizeSet "true" or "1" to resize the image when the container is resized. The default is "true".
rotateSet "right", "left", "up", or "down" to rotate the structure when it is displayed at the beginning. The default is "right".
showannoSet "true" or "1" to show annotations, such as SNPs, ClinVar, domains, binding sites. The default is "false".
showalignseqSet "true" or "1" to show the aligned sequence window. The default is "false".
showsetsSet "true" or "1" to show the defined sets. The default is "false".
show2dSet "true" or "1" to show the 2D interaction. The default is "false".
showmenuSet "false" or "0" to hide the menus and buttons at the top of the structure canvas. The default is "true".
showtitleSet "false" or "0" to hide the title at the top of the structure canvas. The default is "true".
showcommandSet "false" or "0" to hide the command window. The default is "true".
simplemenuSet "true" or "1" to show only the menus "File", "View", "Style", and "Color" to simplify the UI. The default is "false".
mobilemenuSet "true" or "1" to show the mobile-style menu. Users can click to see all menus. The default is "false".
closepopupSet "true" or "1" to close the dialogs of "Defined Sets", "Interactions", and "Sequences and Annotations". The default is "false".
commandBesides the "Script/Log" section at the bottom of the canvas, commands can also be attached to the url parameter "command". The easy way to generate the commands is to operate manually to get your custom display and then click "File > Share Link" to find the URL with full commands or just the short URL.
replaySet "true" or "1" to replay each step of a custom display.
usepdbnumSet "true" or "1" to use PDB residue numbers instead of NCBI residue numbers when the input is MMDB ID and the residue numbers are different. The default is "true".
hidelicenseSet "true" or "1" to hide the features requiring licenses, such as "Analysis > DelPhi Potential" and "Analysis > Mutaion". The default is "false".
shownoteSet "true" or "1" to show the content in "Analysis > Window Title" as the window title. The default is "false".

Menus, Commands, and Functions of the advanced interface back to top

To find icn3d commands and functions, you can first generate a custom view in iCn3D interactively. Then you can click the menu "File > Share Link" to see the commands in the section "Original URL with commands". Most commands are processed with functions in the file "src/icn3d/selection/applyCommand.js". Other commands with asynchronized retrieval are processed with functions in the file "src/icn3d/selection/loadScript.js".

1. File    
Menu Command Function
a) Retrieve by ID
MMDB ID: load mmdb [1GPK] ic.mmdbParserCls.downloadMmdb
MMTF ID: load mmtf [1GPK] ic.mmtfParserCls.downloadMmtf
PDB ID: load pdb [1GPK] ic.pdbParserCls.downloadPdb
OPM PDB ID: load opm [6JXR] ic.opmParserCls.downloadOpm
mmCIF ID: load mmcif [1GPK] ic.mmcifParserCls.downloadMmcif
NCBI gi: load gi [827343227] ic.mmdbParserCls.downloadGi
PubChem CID: load cid [2244] ic.sdfParserCls.downloadCid
b) Open File
PDB File: [no command available]
mmCIF File: [no command available]
Mol2 File: [no command available]
SDF File: [no command available]
XYZ File: [no command available]
URL (Same Host): load url [https://files.rcsb.org/view/1gpk.pdb] ic.pdbParserCls.downloadUrl
iCn3D PNG Image: [no command available]
State/Script File: [no command available] ic.loadScriptCls.loadScript
Selection File: [no command available]
Electron Density (DSN6) - Local File: set map 2fofc sigma 1.5 ic.dsn6ParserCls.loadDsn6Data()
Electron Density (DSN6) - URL (Same Host): set map 2fofc sigma 1.5 | [URL] ic.dsn6ParserCls.dsn6ParserBase()
c) Align
Sequence to Structure: load seq_struc_ids [23491729,1TUP_A] ic.mmdbParserCls.downloadBlast_rep_id
Structure to Structure - Invariant Substructure Superposed: load alignment [1HHO,4N7N] | parameters atype=1 ic.alignParserCls.downloadAlignment
Structure to Structure - All Matching Molecules Superposed: load alignment [1HHO,4N7N] | parameters atype=0 ic.alignParserCls.downloadAlignment
Chain to Chain: load chainalignment [1HHO_A,4N7N_A] ic.chainalignParserCls.downloadChainAlignment
d) Realign Selection realign on seq align ic.realignParserCls.realignOnSeqAlign
e) 3D Printing
VRML (Color, W/ Stabilizers): export vrml stabilizer file ic.export3DCls.saveVrmlFile
STL (W/ Stabilizers): export stl stabilizer file ic.export3DCls.saveStlFile
VRML (Color): export vrml file ic.export3DCls.saveVrmlFile
STL: export stl file ic.export3DCls.saveStlFile
Add All Stabilizers: stabilizer ic.threeDPrintCls.addStabilizer
Remove All Stabilizers: set stabilizer off ic.threeDPrintCls.hideStabilizer
Add One Stabilizer: add one stabilizer | [atom serial] [atom serial]
Remove One Stabilizer: remove one stabilizer | [atom serial] [atom serial]
Set Thickness: set thickness | linerad 0.6 | coilrad 1 | stickrad 0.8 | ribbonthick 0.8 | proteinwidth 2 | nucleotidewidth 1.2 | ballscale 0.6
Reset Thickness: reset thickness ic.threeDPrintCls.resetAfter3Dprint
f) Save Files
iCn3D PNG Image: export canvas (URL example: https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1top&command=export%20canvas) ic.saveFileCls.saveFile([filename], 'png')
State File: [no command available] ic.saveFileCls.saveFile
All Selections: [no command available] ic.saveFileCls.saveFile
Residue Counts: [no command available] ic.saveFileCls.saveFile
PDB: [no command available] ic.saveFileCls.getAtomPDB
g) Share Link: [no command available] ic.shareLinkCls.shareLink
g) Replay Each Step: replay on replayon

2. Select    
Menu Command Method
a) Defined Sets: defined sets ic.definedSetsCls.showSets
Select sets: select saved atoms [name1] or/and/not [name2] ic.definedSetsCls.changeCustomAtoms
Delete selected sets: delete selected sets ic.definedSetsCls.deleteSelectedSets
b) All: select all ic.selectionCls.selectAll
c) Displayed Set: select displayed set ic.hAtoms = me.HashUtilsCls.cloneHash(ic.dAtoms)
d) by Distance
Display: select zone cutoff [cutoff in angstrom] ic.showInterCls.pickCustomSphere

e) by Property
Positive: select prop positive ic.resid2specCls.selectProperty
Negative: select prop negative ic.resid2specCls.selectProperty
Hydrophobic: select prop hydrophobic ic.resid2specCls.selectProperty
Polar: select prop polar ic.resid2specCls.selectProperty
B-factor: select prop b factor ic.resid2specCls.selectProperty
Solvent Accessibility: select prop percent out ic.resid2specCls.selectProperty
f) Inverse: select complement ic.resid2specCls.selectComplement
g) Main Chains: select main chains ic.selectionCls.selectMainChains
h) Side Chains: select side chains ic.selectionCls.selectSideChains
i) Advanced select [command] | name [commandname] ic.selectByCommandCls.selectByCommand

j) Select on 3D
Chain (Alt): set pk chain ic.pk = 5; ic.opts['pk'] = 'chain';
3D Domain (Alt): set pk domain ic.pk = 4; ic.opts['pk'] = 'domain';
Strand/Helix (Alt): set pk strand ic.pk = 3; ic.opts['pk'] = 'strand';
Residue (Alt): set pk residue ic.pk = 2; ic.opts['pk'] = 'residue';
Atom (Alt): set pk atom ic.pk = 1; ic.opts['pk'] = 'atom';
k) Save Selection: select [command] | name [commandname] ic.selectByCommandCls.selectByCommand
l) Clear Selection: clear all ic.selectionCls.selectAll

m) Highlight Color
Yellow: set highlight color yellow
Green: set highlight color green
Red: set highlight color red

n) Highlight Style
Outline: set highlight style outline ic.bHighlight = 1;
3D Objects: set highlight style 3d ic.bHighlight = 2;
o) Toggle Highlight toggle highlight ic.hlUpdateCls.toggleHighlight

p) Switch Highlight Level
↑: highlight level up ic.resid2specCls.switchHighlightLevelUp
↓: highlight level down ic.resid2specCls.switchHighlightLevelDown

2b. Selection Definition    
In the dialog Select -> Advanced, users can use simple specification to select atoms:

Specification: In the selection "$1HHO,4N7N.A,B,C:5-10,KRDE,chemicals@CA,C": Set Operation: Full commands in url or command window:

3. View    
Menu Command Method
a) View -> View Only Selection: show selection ic.selectionCls.showSelection
b) View -> Zoom in Selection: zoom selection ic.resizeCanvasCls.zoominSelection
c) View -> Center Selection: center selection ic.applyCenterCls.centerSelection
d) View -> View Full Structure: show all ic.selectionCls.showAll
e) View -> Show Side by Side: side by side | [url] window.open()

f) View -> Rotate

f1) Rotate 90°
X-axis: rotate x ic.transformCls.setRotation
Y-axis: rotate y ic.transformCls.setRotation
Z-axis: rotate z ic.transformCls.setRotation

f2) Auto Rotation
Rotate Left: rotate left ic.transformCls.rotStruc
Rotate Right: rotate right ic.transformCls.rotStruc
Rotate Up: rotate up ic.transformCls.rotStruc
Rotate Down: rotate down ic.transformCls.rotStruc

g) View -> Camera
Perspective: set camera perspective ic.opts['camera'] = 'perspective';
Orthographic: set camera orthographic ic.opts['camera'] = 'orthographic';

h) View -> Fog for Selection
On: set fog on ic.opts['fog'] = 'yes';
Off: set fog off ic.opts['fog'] = 'no';

i) View -> Slab for Selection
On: set slab on ic.opts['slab'] = 'yes';
Off: set slab off ic.opts['slab'] = 'no';

j) View -> XYZ-axes
Show: set axis on ic.opts['axis'] = 'yes';
Hide: set axis off ic.opts['axis'] = 'no';

k) View -> Reset:
All: reset ic.loadScriptCls.renderFinalStep
Orientation: reset orientation ic.transformCls.resetOrientation
l) View -> Undo: back ic.resizeCanvasCls.back
m) View -> Redo: forward ic.resizeCanvasCls.forward
n) View -> Full Screen: [no command available]

4. Style    
Menu Command Method
a) Style -> Protein
Ribbon: style proteins ribbon ic.setOptionCls.setStyle
Strand: style proteins strand ic.setOptionCls.setStyle
Cylinder and Plate: style proteins cylinder and plate ic.setOptionCls.setStyle
Schematic: style proteins schematic ic.setOptionCls.setStyle
C Alpha Trace: style proteins c alpha trace ic.setOptionCls.setStyle
Backbone: style proteins backbone ic.setOptionCls.setStyle
B-factor Tube: style proteins b factor tube ic.setOptionCls.setStyle
Lines: style proteins lines ic.setOptionCls.setStyle
Stick: style proteins stick ic.setOptionCls.setStyle
Ball and Stick: style proteins ball and stick ic.setOptionCls.setStyle
Sphere: style proteins sphere ic.setOptionCls.setStyle
Hide: style proteins nothing ic.setOptionCls.setStyle

b) Style -> Side Chains
Lines: style sidec lines ic.setOptionCls.setStyle
Stick: style sidec stick ic.setOptionCls.setStyle
Ball and Stick: style sidec ball and stick ic.setOptionCls.setStyle
Sphere: style sidec sphere ic.setOptionCls.setStyle
Hide: style sidec nothing ic.setOptionCls.setStyle

c) Style -> Nucleotides
Nucleotide Cartoon: style nucleotides nucleotide cartoon ic.setOptionCls.setStyle
O3' Trace: style nucleotides o3 trace ic.setOptionCls.setStyle
Backbone: style nucleotides backbone ic.setOptionCls.setStyle
Schematic: style nucleotides schematic ic.setOptionCls.setStyle
Lines: style nucleotides lines ic.setOptionCls.setStyle
Stick: style nucleotides stick ic.setOptionCls.setStyle
Ball and Stick: style nucleotides ball and stick ic.setOptionCls.setStyle
Sphere: style nucleotides sphere ic.setOptionCls.setStyle
Hide: style nucleotides nothing ic.setOptionCls.setStyle

d) Style -> Chemicals
Lines: style chemicals lines ic.setOptionCls.setStyle
Stick: style chemicals stick ic.setOptionCls.setStyle
Ball and Stick: style chemicals ball and stick ic.setOptionCls.setStyle
Schematic: style chemicals schematic ic.setOptionCls.setStyle
Sphere: style chemicals sphere ic.setOptionCls.setStyle
Hide: style chemicals nothing ic.setOptionCls.setStyle

d2) Style -> Hydrogens
Show: hydrogens ic.setOptionCls.showHydrogens
Hide: set hydrogens off ic.setOptionCls.hideHydrogens

e) Style -> Ions
Sphere: style ions sphere ic.setOptionCls.setStyle
Dot: style ions dot ic.setOptionCls.setStyle
Hide: style ions nothing ic.setOptionCls.setStyle

f) Style -> Water
Sphere: style water sphere ic.setOptionCls.setStyle
Dot: style water dot ic.setOptionCls.setStyle
Hide: style water nothing ic.setOptionCls.setStyle
g) Style -> Set Thickness: set thickness | linerad 0.6 | coilrad 1 | stickrad 0.8 | ribbonthick 0.8 | proteinwidth 2 | nucleotidewidth 1.2 | ballscale 0.6
h) Style -> Save Style: save style ic.setOptionCls.saveStyle
i) Style -> Apply Saved Style: apply saved style ic.setOptionCls.applySavedStyle

j) Style -> Surface Type
Van der Waals: set surface Van der Waals surface ic.applyMapCls.applySurfaceOptions
VDW with Context: set surface Van der Waals surface with context ic.applyMapCls.applySurfaceOptions
Molecular Surface: set surface molecular surface ic.applyMapCls.applySurfaceOptions
MS with Context: set surface molecular surface with context ic.applyMapCls.applySurfaceOptions
Solvent Accessible: set surface solvent accessible surface ic.applyMapCls.applySurfaceOptions
SA with Context: set surface solvent accessible surface with context ic.applyMapCls.applySurfaceOptions
k) Style -> Remove Surface: set surface nothing ic.applyMapCls.applySurfaceOptions

l) Style -> Surface Opacity
1.0: set surface opacity 1.0 ic.applyMapCls.applySurfaceOptions
0.9: set surface opacity 0.9 ic.applyMapCls.applySurfaceOptions
0.8: set surface opacity 0.8 ic.applyMapCls.applySurfaceOptions
0.7: set surface opacity 0.7 ic.applyMapCls.applySurfaceOptions
0.6: set surface opacity 0.6 ic.applyMapCls.applySurfaceOptions
0.5: set surface opacity 0.5 ic.applyMapCls.applySurfaceOptions
0.4: set surface opacity 0.4 ic.applyMapCls.applySurfaceOptions
0.3: set surface opacity 0.3 ic.applyMapCls.applySurfaceOptions
0.2: set surface opacity 0.2 ic.applyMapCls.applySurfaceOptions
0.1: set surface opacity 0.1 ic.applyMapCls.applySurfaceOptions

m) Style -> Surface Wireframe
Yes set surface wireframe on ic.applyMapCls.applySurfaceOptions
No set surface wireframe off ic.applyMapCls.applySurfaceOptions

n) Style -> Electron Density
2Fo-Fc Map: set map 2fofc sigma 1.5 ic.loadScriptCls.applyCommandMap
Fo-Fc Map: set map 2fofc sigma 3 ic.loadScriptCls.applyCommandMap
o) Style -> Remove Map: set map nothing ic.applyMapCls.applyMapOptions

p) Style -> Map Wireframe
Yes set map wireframe on ic.applyMapCls.applyMapOptions
No set map wireframe off ic.applyMapCls.applyMapOptions
q) Style -> EM Density Map: set emmap percentage 20 ic.loadScriptCls.applyCommandEmmap
r) Style -> Remove EM Map: set emmap nothing ic.applyMapCls.applyEmmapOptions

s) Style -> EM Map Wireframe
Yes set emmap wireframe on ic.applyMapCls.applyEmmapOptions
No set emmap wireframe off ic.applyMapCls.applyEmmapOptions

t) Style -> Background
Transparent: set background transparent ic.opts['background'] = 'transparent'
Black: set background black ic.opts['background'] = 'black'
Grey: set background grey ic.opts['background'] = 'grey'
White: set background white ic.opts['background'] = 'white'

u) Style -> Dialog Color
Blue: set theme blue ic.setMenuCls.setTheme
Orange: set theme orange ic.setMenuCls.setTheme
Black: set theme black ic.setMenuCls.setTheme

5. Color    
Menu Command Method
Color -> Spectrum: color spectrum ic.setColorCls.setColorByOptions
Color -> Secondary (Sheet in Green): color secondary structure ic.setColorCls.setColorByOptions
Color -> Secondary (Sheet in Yellow): color secondary structure yellow ic.setColorCls.setColorByOptions
Color -> Secondary (Spectrum): color secondary structure spectrum ic.setColorCls.setColorByOptions
Color -> Charge: color charge ic.setColorCls.setColorByOptions
Color -> Wimley-White Hydrophobicity: color hydrophobic ic.setColorCls.setColorByOptions
Color -> B-factor (Original): color b factor ic.setColorCls.setColorByOptions
Color -> B-factor (Percentile): color b factor percentile ic.setColorCls.setColorByOptions
Color -> Solvent Accessibility: color area | 35 ic.setColorCls.setColorByOptions
Color -> Chain: color chain ic.setColorCls.setColorByOptions
Color -> 3D Domain: color 3ddomain ic.setColorCls.setColorByOptions
Color -> Residue - Default: color residue ic.setColorCls.setColorByOptions
Color -> Residue - Custom: color residue custom ic.setColorCls.setColorByOptions
Color -> Atom: color atom ic.setColorCls.setColorByOptions

b) Color -> Unicolor
Red: color red ic.setColorCls.setColorByOptions
Green: color green ic.setColorCls.setColorByOptions
Blue: color blue ic.setColorCls.setColorByOptions
Magenta: color magenta ic.setColorCls.setColorByOptions
Yellow: color yellow ic.setColorCls.setColorByOptions
Cyan: color cyan ic.setColorCls.setColorByOptions
White: color white ic.setColorCls.setColorByOptions
Grey: color grey ic.setColorCls.setColorByOptions

c) Color -> Color Picker
Apply: color [e.g., FF0000] ic.setColorCls.setColorByOptions
Color -> Save Color: save color ic.setOptionCls.saveColor
Color -> Apply Saved Color: apply saved color ic.setOptionCls.applySavedColor

6. Analysis    
Menu Command Method
a) Analysis -> View Sequences & Annotations: view annotations ic.loadScriptCls.applyCommandAnnotationsAndCddSite
b) Analysis -> View 2D Diagram view interactions ic.parserUtilsCls.set2DDiagrams
c) Analysis -> Defined Sets defined sets ic.definedSetsCls.showSets
d) Analysis -> H-Bonds & Interactions: hbonds 3.5 | sets non-selected selected;
salt bridges 4 | sets non-selected selected;
interactions 4 | sets non-selected selected
e) Analysis -> Bring to Front: window ... ic.dialogCls.openDlg

f) Analysis -> DelPhi Potential
Local Phi/Cube File: [no command available] ic.delphiCls.loadPhiFile
URL (Same Host) Phi/Cube: set phimap cubeurl contour 1 | [url] ic.delphiCls.loadPhiFileUrl
g) Analysis -> Remove Potential: setoption phimap nothing ic.setOptionCls.setOption('phimap', 'nothing')

h) Analysis -> Chemical Binding
Show: set chemicalbinding show me.ic.setOptionCls.setOption('chemicalbinding', 'show');
Hide: set hbonds off me.ic.setOptionCls.setOption('chemicalbinding', 'hide');

i) Analysis -> Disulfide Bonds
Show: disulfide bonds ic.showInterCls.showSsbonds
Export Pairs: [no command available]
Hide: set disulfide bonds off ic.opts["ssbonds"] = "no

j) Analysis -> Cross-Linkages
Show: cross linkage ic.bShowCrossResidueBond = true;
Hide: set cross linkage off ic.bShowCrossResidueBond = false;

k) Analysis -> Assembly (PDB, mmCIF, or MMTF files only)
yes: set assembly on ic.bAssembly = true;
no: set assembly off ic.bAssembly = false;
l) Analysis -> Symmetry: symmetry C6 (global) ic.symdCls.retrieveSymmetry; ic.applySymdCls.applySymmetry

m) Analysis -> Distance
between Two Atoms: add label [label text] | x [x] y [y] z [z] | size [label size] | color [FF0000] | background [FFFFFF] ic.analysisCls.addLabel
add line | x1 [x1] y1 [y1] z1 [z1] | x2 [x2] y2 [y2] z2 [z2] | color [FFFF00] | dashed [true] ic.analysisCls.addLine
between Two Sets: dist | [set1] [set2] ic.analysisCls.measureDistTwoSets
Hide: set lines off ic.labels['distance'] = []; ic.lines['distance'] = [];

n) Analysis -> Label
by Picking Atoms: add label [label text] | x [x] y [y] z [z] | size [label size] | color [FF0000] | background [FFFFFF] ic.analysisCls.addLabel
per Selection: add label [label text] | size [label size] | color [FF0000] | background [FFFFFF] ic.analysisCls.addLabel
per Atom: add atom labels ic.residueLabelsCls.addAtomLabels
per Residue: add residue labels ic.residueLabelsCls.addResiudeLabels
per Chain: add chain labels ic.analysisCls.addLabel
N- & C- Termini: add terminal labels ic.residueLabelsCls.addTerminiLabels
Remove: set labels off ic.residueLabelsCls.addChainLabels

o) Analysis -> Label Scale
0.1: set label scale 0.1 ic.labelScale=0.1
0.2: set label scale 0.2 ic.labelScale=0.2
0.4: set label scale 0.4 ic.labelScale=0.4
0.6: set label scale 0.6 ic.labelScale=0.6
0.8: set label scale 0.8 ic.labelScale=0.8
1.0: set label scale 1.0 ic.labelScale=1.0
2.0: set label scale 2.0 ic.labelScale=2.0
4.0: set label scale 4.0 ic.labelScale=4.0
6.0: set label scale 6.0 ic.labelScale=6.0
8.0: set label scale 8.0 ic.labelScale=8.0
10.0: set label scale 10.0 ic.labelScale=10.0
p) Analysis -> Your Note / Window Title your note | [text]

q) Analysis -> View Links
Structure Summary: [no command available]
Find Similar Structures: [no command available]
Literature: [no command available]
Protein: [no command available]

7. Help    
Menu Command
a) Help -> About iCn3D: [no command available]
b) Help -> Help DOc: [no command available]
c) Help -> Web Methods: [no command available]
d) Help -> Transform Hints: [no command available]
e) Help -> Selection Hints: [no command available]

Citing iCn3D:back to top

  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] Click here to read  

iCn3D source code:back to top


How to embed iCn3D Structure Viewer in your html page:back to top

Data Structureback to top

Atom Object
      var atomDetails = {
    serial: serial,         // required, unique atom id
    structure: structure,   // required, used to identify the structure
    chain: chain,           // required, used to identify the chain
    resi: resi,             // required, used to identify residue ID, has to be a integer
    name: atom,             // required, atom name
    coord: coord,           // required, used to draw 3D shape
    coord2: ribbonCoord,    // optional, ribbon's real positions, used to draw stabilizers for 3D printing
    bonds: [],              // required, used to connect atoms

    color: color,           // optional, used to assign atom color, default is grey
    style: style,           // optional, used to assign atom style as one of 13 styles: ribbon, strand, cylinder and plate,
                            //   nucleotide cartoon, o3' trace, schematic, c alpha trace, b factor tube, lines, stick,
                            //   ball and stick, sphere, dot, nothing
    style2: sideChainStyle, // optional, used to assign protein side chain style as one of 13 styles: ribbon, strand, cylinder and plate,
                            //   nucleotide cartoon, o3' trace, schematic, c alpha trace, b factor tube, lines, stick,
                            //   ball and stick, sphere, dot, nothing
    het: false,             // optional, used to determine chemicals, water, ions, etc
    resn: resn,             // optional, used to determine protein or nucleotide
    b: b,                   // optional, used to draw B-factor tube
    elem: elem,             // optional, used to determine hydrogen bond
    ss: 'coil',             // optional, used to show secondary structures
    ssbegin: false,         // optional, used to show the beginning of secondary structures
    ssend: false            // optional, used to show the end of secondary structures

Class Structureback to top

iCn3D uses JavaScript classes starting from version 3.0.0. In both the browser version (GitHub) and the Node.js version (npm), a global variable "icn3d" is used to access all classes in iCn3D. As shown in the table below, the variable "icn3d" can access the class "iCn3DUI" (with the instance "icn3dui"). The instance "icn3dui" can access all util classes (e.g., "icn3d.icn3dui.utilsCls") and two major classes "iCn3D" (with the instance "icn3d", which is different from the global variable "icn3d") and "Html" (with the instance "htmlCls"), which can access all the rest classes. For example, the class "AlignSeq" (with the instance "alignSeqCls") can be called using "icn3d.icn3dui.htmlCls.alignSeqCls". All class names except "icn3dui" and "icn3d" start with an upper-case letter.

Since static functions are not supported in Safari, all classes (e.g., "AlignSeq") don't have static functions. The instance names of the classes convert the first letter to lower-case and add the postfix "Cls" (e.g., "alignSeqCls"). Each class has its own file with the file name the same as the class name with the first letter lower-case (e.g., "alignSeq.js").

Each function in classes in the directory "icn3d" has a variable "ic" to represent the instance "icn3d". "ic.icn3dui" can be used to represent the instance "icn3dui".

Each function in classes in the directory "html" has a variable "me" to represent the instance "icn3dui". "me.icn3d" can be used to represent the instance "icn3d".

GlobalClass (directory)Class (directory)Class (directory)Functions
icn3dicn3dui (src)UtilsCls (utils)setIcn3d, setDialogAjax
icn3dicn3duiUtilsCls (utils)isIE, isMobile, isMac, isSessionStorageSupported, hexToRgb, isCalphaPhosOnly, hasCovalentBond, residueName2Abbr, residueAbbr2Name, getJSONFromArray, checkFileAPI, getIdArray, compResid, toggle, setViewerWidthHeight
icn3dicn3duiHashUtilsCls (utils)cloneHash, intHash, exclHash, unionHash, unionHashInPlace, unionHashNotInPlace, intHash2Atoms, exclHash2Atoms, unionHash2Atoms, hash2Atoms, hashvalue2array
icn3dicn3duiParasCls (utils)Parameters: glycanHash, nucleotidesArray, ionsArray, cationsTrimArray, anionsTrimArray, ionCharges, vdwRadii, covalentRadii, surfaces, atomColors, defaultAtomColor, stdChainColors, backgroundColors, residueColors, residueArea, defaultResidueColor, chargeColors, hydrophobicColors, ssColors, ssColors2, b62ResArray, b62Matrix
Functions: thr
icn3dicn3duiMyEventCls (utils)onId, onIds
icn3dicn3duiSubdivideCls (utils)subdivide, getKnot, getValueFromKnot
icn3dicn3duiRmsdSuprCls (utils)getRmsdSuprCls, eigen_values, null_basis, getEigenForSelection, getEigenVectors
icn3dicn3duiConvertTypeCls (utils)passFloat32, passInt8, passInt16, passInt32, getUint8View, getDataView, getView, getBlobFromBufferAndText
icn3dicn3dui (src)htmlCls (html)N/A
icn3dicn3duihtmlClsalignSeqCls (html)getAlignSequencesAnnotations
icn3dicn3duihtmlClsclickMenuCls (html)clickMenu1, clickMenu2, clickMenu3, clickMenu4, clickMenu5, clickMenu6, setLogCmd
icn3dicn3duihtmlClsdialogCls (html)openDlg, addSaveButton, addHideButton, getDialogStatus, openDlgHalfWindow, openDlg2Ddgm, openDlgRegular, openDlgNotebook
icn3dicn3duihtmlClseventsCls (html)fullScreenChange, allEventFunctions
icn3dicn3duihtmlClssetDialogCls (html)setCustomDialogs, setDialogs
icn3dicn3duihtmlClssetHtmlCls (html)getLink, getLinkWrapper, getRadio, getRadioColor, setAdvanced, getOptionHtml, setColorHints, setThicknessHtml, setSequenceGuide, setAlignSequenceGuide, getSelectionHints, addGsizeSalt, getFootHtml, getPotentialHtml, exportPqr, clickReload_pngimage, setLineThickness, updateSurfPara, exportPdb
icn3dicn3duihtmlClssetMenuCls (html)setTopMenusHtml, setTopMenusHtmlMobile, setReplayHtml, setTools, setButton, setTools_base, setTheme, setLogWindow, setMenu1, setMenu1_base, setMenu2, setMenu2_base, setMenu2b, setMenu2b_base, setMenu3, setMenu3_base, setMenu4, setMenu4_base, setMenu5, setMenu5_base, setMenu6, setMenu6_base, hideMenu, showMenu
icn3dicn3dui (src)icn3d (icn3d)init, init_base, reinitAfterLoad, resetConfig
icn3dicn3duiicn3danalysisCls (analysis)calculateArea, calcBuriedSurface, measureDistTwoSets, addLine, addLineFromPicking, addLabel, addChainLabels, addTerminiLabels
icn3dicn3duiicn3dapplySymdCls (analysis)applySymd, applySymmetry
icn3dicn3duiicn3ddelphiCls (analysis)CalcPhiUrl, CalcPhi, PhiParser, loadPhiData, loadCubeData, applyCommandPhi, applyCommandDelphi, loadDelphiFile, loadPhiFile, loadPhiFileUrl
icn3dicn3duiicn3ddiagram2dCls (analysis)draw2Ddgm, set2DdgmNote, highlightNode, removeLineGraphSelection, removeScatterplotSelection, click2Ddgm, selectInteraction, selectInteractionAtoms, draw2DProtein, draw2DNucleotide, draw2DChemical
icn3dicn3duiicn3ddsspCls (analysis)applyDssp, parseDsspData
icn3dicn3duiicn3dscapCls (analysis)applyCommandScapBase, applyCommandScap, adjust2DWidth, retrieveScap
icn3dicn3duiicn3dsymdCls (analysis)applyCommandSymdBase, applyCommandSymd, retrieveSymd, getResObj, setSeqAlignForSymmetry, retrieveSymmetry, getPolygonColor, getAxisColor
icn3dicn3duiicn3daddTrackCls (annotations)clickAddTrackButton, showNewTrack, alignSequenceToStructure, defineSecondary, simplifyText, checkGiSeq, getFullText, setCustomFile
icn3dicn3duiicn3dannoCddSiteCls (annotations)showCddSiteAll, setDomainFeature, getAdjustedResi, showAnnoType, setToolTip
icn3dicn3duiicn3dannoContactCls (annotations)showInteraction, showInteraction_base
icn3dicn3duiicn3dannoCrossLinkCls (annotations)showCrosslink, showCrosslink_base
icn3dicn3duiicn3dannoDomainCls (annotations)showDomainPerStructure, showDomainAll, showDomainWithData
icn3dicn3duiicn3dannoSnpClinVarCls (annotations)navClinVar, showClinVarLabelOn3D, getSnpLine, processSnpClinvar, showClinvarPart2, showSnp, showClinvar, showSnpClinvar, showSnpPart2, processNoClinvar, processNoSnp
icn3dicn3duiicn3dannoSsbondCls (annotations)showSsbond, showSsbond_base
icn3dicn3duiicn3dannoTransMemCls (annotations)showTransmem, showTransmem_base
icn3dicn3duiicn3dannotationCls (annotations)hideAllAnno, hideAllAnnoBase, setAnnoSeqBase, setAnnoTabBase, setAnnoTabAll, hideAnnoTabAll, resetAnnoAll, resetAnnoTabAll, setAnnoTabCustom, hideAnnoTabCustom, setAnnoTabClinvar, hideAnnoTabClinvar, setAnnoTabSnp, hideAnnoTabSnp, setAnnoTabCdd, hideAnnoTabCdd, setAnnoTab3ddomain, hideAnnoTab3ddomain, setAnnoTabSite, hideAnnoTabSite, setAnnoTabInteraction, hideAnnoTabInteraction, setAnnoTabSsbond, hideAnnoTabSsbond, setAnnoTabCrosslink, hideAnnoTabCrosslink, setAnnoTabTransmem, hideAnnoTabTransmem, setTabs, clickCdd, showAnnoSelectedChains, showAnnoAllChains, setAnnoView, setAnnoDisplay, showFixedTitle, hideFixedTitle, setAnnoViewAndDisplay, updateClinvar, updateSnp, updateDomain, updateInteraction, updateSsbond, updateCrosslink, updateTransmem
icn3dicn3duiicn3dshowAnnoCls (annotations)showAnnotations, showAnnoSeqData, getAnnotationData, getSequenceData, getCombinedSequenceData, processSeqData, enableHlSeq, getAnDiv, addButton, addSnpButton, conservativeReplacement, getColorhexFromBlosum62
icn3dicn3duiicn3dshowSeqCls (annotations)showSeq, insertGap, insertGapOverview, setAlternativeSeq, getProteinName
icn3dicn3duiicn3dalternateCls (display)alternateStructures, alternateWrapper
icn3dicn3duiicn3dapplyCenterCls (display)applyCenterOptions, setRotationCenter, setCenter, centerSelection, centerAtoms, setWidthHeight
icn3dicn3duiicn3dapplyClbondsCls (display)applyClbondsOptions, applyClbondsOptions_base
icn3dicn3duiicn3dapplyDisplayCls (display)applyDisplayOptions, selectMainChainSubset
icn3dicn3duiicn3dapplyOtherCls (display)applyOtherOptions, applyChemicalbindingOptions, updateStabilizer, getResidueRepPos
icn3dicn3duiicn3dapplySsbondsCls (display)applySsbondsOptions
icn3dicn3duiicn3dcameraCls (display)setCamera
icn3dicn3duiicn3ddrawCls (display)draw, applyTransformation, render
icn3dicn3duiicn3dfogCls (display)setFog
icn3dicn3duiicn3dsceneCls (display)rebuildScene, rebuildSceneBase
icn3dicn3duiicn3dsetColorCls (display)setColorByOptions, setAtmClr, updateChainsColor, setMmdbChainColor, setConservationColor, applyOriginalColor, applyPrevColor, setOutlineColor
icn3dicn3duiicn3dsetOptionCls (display)setOption, setStyle, saveStyle, applySavedStyle, saveColor, applySavedColor
icn3dicn3duiicn3dsetStyleCls (display)setStyle2Atoms, setAtomStyleByOptions, setBackground, saveCommandsToSession, getCommandsBeforeCrash, handleContextLost, adjustIcon
icn3dicn3duiicn3dexport3DCls (export)exportStlFile, exportVrmlFile, getFaceCnt, saveStlFile, updateArray, processStlMeshGroup, saveVrmlFile, processVrmlMeshGroup
icn3dicn3duiicn3dsaveFileCls (export)saveFile, saveSvg, getSvgXml, savePng, exportCustomAtoms, getAtomPDB, getSelectedResiduePDB, getPDBHeader, showTitle, getLinkToStructureSummary, setEntrezLinks
icn3dicn3duiicn3dshareLinkCls (export)shareLink, shareLinkUrl, getPngText
icn3dicn3duiicn3dthreeDPrintCls (export)setThichknessFor3Dprint, prepareFor3Dprint, resetAfter3Dprint, removeOneStabilizer, outputSelection, addStabilizer, hideStabilizer, getResidueRepAtom
icn3dicn3duiicn3daxesCls (geometry)buildAxes, buildAllAxes, createArrow, setPc1Axes
icn3dicn3duiicn3dboxCls (geometry)createBox, createBox_base, createBoxRepresentation_P_CA
icn3dicn3duiicn3dbrickCls (geometry)createBrick
icn3dicn3duiicn3dcartoonNuclCls (geometry)drawStrandNucleicAcid, drawNucleicAcidStick
icn3dicn3duiicn3dcurveCls (geometry)createCurveSub
icn3dicn3duiicn3dcurveStripArrowCls (geometry)createCurveSubArrow, createStripArrow, prepareStrand
icn3dicn3duiicn3dcylinderCls (geometry)createCylinder, createCylinder_base, createCylinderHelix, createCylinderCurve
icn3dicn3duiicn3dglycanCls (geometry)showGlycans
icn3dicn3duiicn3dimpostorCls (geometry)setParametersForShader , drawImpostorShader , getShader , createImpostorShaderBase, createImpostorShaderCylinder, createImpostorShaderSphere, clearImpostors
icn3dicn3duiicn3dinstancingCls (geometry)positionFromGeometry, colorFromGeometry, indexFromGeometry, normalFromGeometry, drawSymmetryMates, applyMat, drawSymmetryMatesNoInstancing, createInstancedGeometry, getInstancedMaterial, createInstancedMesh, drawSymmetryMatesInstancing
icn3dicn3duiicn3dlabelCls (geometry)makeTextSprite, createLabelRepresentation, hideLabels
icn3dicn3duiicn3dlineCls (geometry)createLineRepresentation, createConnCalphSidechain, createSingleLine, createLines
icn3dicn3duiicn3dreprSubCls (geometry)createRepresentationSub
icn3dicn3duiicn3dresidueLabelsCls (geometry)addResidueLabels, addNonCarbonAtomLabels, addAtomLabels
icn3dicn3duiicn3dsphereCls (geometry)createSphere, createSphereBase, createSphereRepresentation
icn3dicn3duiicn3dstickCls (geometry)createStickRepresentation
icn3dicn3duiicn3dstrandCls (geometry)createStrand, getSSExpandedAtoms
icn3dicn3duiicn3dstripCls (geometry)createStrip, setCalphaDrawnCoord
icn3dicn3duiicn3dtubeCls (geometry)createTube, getCustomtubesize, createTubeSub, getRadius
icn3dicn3duiicn3dhlObjectsCls (highlight)addHlObjects, removeHlObjects
icn3dicn3duiicn3dhlSeqCls (highlight)selectSequenceNonMobile, selectSequenceMobile, selectChainMobile, selectTitle, selectResidues
icn3dicn3duiicn3dhlUpdateCls (highlight)update2DdgmContent, changeSeqColor, removeHlAll, removeHlObjects, removeHlSeq, removeHl2D, removeHlMenus, updateHlAll, updateHlObjects, updateHlSeq, updateHlSeqInChain, updateHl2D, updateHlMenus, hlSequence, hlSeqInChain, toggleHighlight, clearHighlight, showHighlight, highlightChains, hlSummaryDomain3ddomain, updateHlAll
icn3dicn3duiicn3dcontactCls (interaction)getAtomsWithinAtom, getNeighboringAtoms, getExtent, hideContact
icn3dicn3duiicn3ddrawGraphCls (interaction)drawGraph
icn3dicn3duiicn3dgetGraphCls (interaction)getGraphData, drawResNode, getNodeTopBottom, updateGraphJson, updateGraphColor, handleForce, getNodesLinksForSet, getHbondLinksForSet, getIonicLinksForSet, getHalogenPiLinksForSet, getContactLinksForSet, getContactLinks, compNode, getGraphLinks, convertLabel2Resid
icn3dicn3duiicn3dhBondCls (interaction)isHbondDonorAcceptor, calcAngles, calcPlaneAngle, isValidHbond, calculateChemicalHbonds, setHbondsContacts, hideHbonds
icn3dicn3duiicn3dlineGraphCls (interaction)drawLineGraph, drawLineGraph_base, drawScatterplot_base, copyStylesInline
icn3dicn3duiicn3dpiHalogenCls (interaction)calculateHalogenPiInteractions, getHalogenDonar, getHalogenAcceptor, getPi, getCation, getHalogenPiInteractions, getRingNormal, getAromaticRings, dfs_cycle, getAromaticPisLigand, hideHalogenPi
icn3dicn3duiicn3dsaltbridgeCls (interaction)calculateIonicInteractions, hideSaltbridge
icn3dicn3duiicn3dshowInterCls (interaction)showInteractions, showHbonds, showHydrogens, hideHydrogens, hideHbondsContacts, showIonicInteractions, showHalogenPi, showClbonds, showSsbonds, pickCustomSphere, pickCustomSphere_base
icn3dicn3duiicn3dviewInterPairsCls (interaction)viewInteractionPairs, clearInteractions, resetInteractionPairs, retrieveInteractionData, getAllInteractionTable, getInteractionPerResidue, getInteractionPairDetails, getContactPairDetails, exportInteractions, exportSsbondPairs, exportClbondPairs, exportHbondPairs, exportSaltbridgePairs, exportHalogenPiPairs, exportSpherePairs
icn3dicn3duiicn3dalignParserCls (parsers)downloadAlignment, downloadAlignmentPart2, loadOpmDataForAlign
icn3dicn3duiicn3dchainalignParserCls (parsers)downloadChainalignmentPart2, downloadChainalignmentPart3, downloadChainalignment, parseChainAlignData, loadOpmDataForChainalign
icn3dicn3duiicn3ddensityCifParserCls (parsers)densityCifParser, parseChannels, getChannel, CIFParse, BinaryParse, MessagePackParse
icn3dicn3duiicn3ddsn6ParserCls (parsers)dsn6Parser, dsn6ParserBase, loadDsn6Data, getMatrix, loadDsn6File, loadDsn6FileUrl
icn3dicn3duiicn3dloadAtomDataCls (parsers)loadAtomDataIn
icn3dicn3duiicn3dloadPDBCls (parsers)loadPDB, adjustSeq, setSsbond, getChainCalpha
icn3dicn3duiicn3dmmcifParserCls (parsers)downloadMmcif, downloadMmcifSymmetry, downloadMmcifSymmetryBase, loadMmcifData, loadMmcifSymmetry, loadMmcifOpmDataPart2
icn3dicn3duiicn3dmmdbParserCls (parsers)parseMmdbDataPart1, parseMmdbData, downloadMmdb, downloadMmdbPart2, downloadGi, downloadBlast_rep_id, loadMmdbOpmData, loadMmdbOpmDataPart2
icn3dicn3duiicn3dmmtfParserCls (parsers)downloadMmtf, parseMmtfData
icn3dicn3duiicn3dmol2ParserCls (parsers)loadMol2Data, loadMol2AtomData
icn3dicn3duiicn3dopmParserCls (parsers)downloadOpm, loadOpmData, setOpmData, parseAtomData
icn3dicn3duiicn3dparserUtilsCls (parsers)alignCoords, getMissingResidues, set2DDiagramsForAlign, set2DDiagramsForChainalign, parse2DDiagramsData, set2DDiagrams, showLoading, hideLoading, setYourNote, transformToOpmOri, transformToOpmOriForAlign, addOneDumAtom, addMemAtoms, setMaxD, renderStructure
icn3dicn3duiicn3dpdbParserCls (parsers)downloadPdb, downloadUrl, loadPdbData, loadPdbDataRender
icn3dicn3duiicn3drealignParserCls (parsers)realign, parseChainRealignData, realignOnSeqAlign, realignChainOnSeqAlign
icn3dicn3duiicn3dsdfParserCls (parsers)downloadCid, loadSdfData, loadSdfAtomData
icn3dicn3duiicn3dsetSeqAlignCls (parsers)setSeqAlign, setSeqAlignChain, setSeqAlignForRealign, setSeqPerResi
icn3dicn3duiicn3dxyzParserCls (parsers)loadXyzData, setXyzAtomSeq, loadXyzAtomData
icn3dicn3duiicn3dcontrolCls (picking)setControl, mouseMove
icn3dicn3duiicn3dpickingCls (picking)showPicking, showPickingBase, showPickingHilight, select3ddomainFromAtom, selectStrandHelixFromAtom
icn3dicn3duiicn3drayCls (picking)rayCasterBase, isIntersect, getAtomsFromPosition
icn3dicn3duiicn3dapplyCommandCls (selection)applyCommand, setStrengthPara, getThresholdNameArrays, setQueryresi2score, getMenuFromCmd
icn3dicn3duiicn3ddefinedSetsCls (selection)setProtNuclLigInMenu, setPredefinedInMenu, setAtomMenu, setChainsInMenu, setTransmemInMenu, showSets, clickCustomAtoms, deleteSelectedSets, changeCustomAtoms, setHAtomsFromSets, updateAdvancedCommands, combineSets, commandSelect, clickCommand_apply, selectCombinedSets, clickModeswitch, setModeAndDisplay, setMode, getAtomsFromOneSet, getAtomsFromSets, getAtomsFromNameArray
icn3dicn3duiicn3dfirstAtomObjCls (selection)getFirstAtomObj, getFirstCalphaAtomObj, getFirstAtomObjByName, getLastAtomObj, getResiduesFromAtoms, getResiduesFromCalphaAtoms, getChainsFromAtoms, getAtomFromResi, getAtomCoordFromResi
icn3dicn3duiicn3dloadScriptCls (selection)loadScript, execCommands, execCommandsBase, pressCommandtext, applyCommandLoad, applyCommandMap, applyCommandEmmap, applyCommandSymmetryBase, applyCommandSymmetry, applyCommandRealignBase, applyCommandRealign, applyCommandGraphinteractionBase, applyCommandGraphinteraction, applyCommandAnnotationsAndCddSiteBase, applyCommandAnnotationsAndCddSite, applyCommandClinvarBase, applyCommandSnpBase, applyCommandClinvar, applyCommandSnp, applyCommand3ddomainBase, applyCommand3ddomain, applyCommandViewinteractionBase, applyCommandViewinteraction, renderFinalStep, replayFirstStep
icn3dicn3duiicn3dresid2specCls (selection)residueids2spec, atoms2spec, atoms2residues, selectProperty, selectComplement, switchHighlightLevel, switchHighlightLevelUp, switchHighlightLevelDown
icn3dicn3duiicn3dselectByCommandCls (selection)selectByCommand, selectBySpec
icn3dicn3duiicn3dselectionCls (selection)selectAll, selectAll_base, selectAChain, selectResidueList, selectMainChains, selectSideChains, selectMainSideChains, clickShow_selected, clickHide_selected, getGraphDataForDisplayed, updateSelectionNameDesc, addCustomSelection, showSelection, hideSelection, saveSelection, removeSelection, resetAll, loadSelection, oneStructurePerWindow, showAll, saveSelectionIfSelected, saveSelectionPrep, selectOneResid, toggleSelection, toggleMembrane, adjustMembrane, selectBtwPlanes
icn3dicn3duiicn3dapplyMapCls (surface)applySurfaceOptions, applyMapOptions, applyEmmapOptions, applyPhimapOptions, applyphisurfaceOptions, removeSurfaces, removeLastSurface, removeMaps, removeEmmaps, removePhimaps, removeLastMap, removeLastEmmap, removeLastPhimap
icn3dicn3duiicn3delectronMapCls (surface)getFacesAndVertices, initparm, transformMemPro, fillvoxels, buildboundary, marchingcubeinit, counter, marchingcube
icn3dicn3duiicn3dmarchingCubeCls (surface)march, laplacianSmooth
icn3dicn3duiicn3dproteinSurfaceCls (surface)getVDWIndex, inOrigExtent, getFacesAndVertices, initparm, boundingatom, fillvoxels, fillAtom, fillvoxelswaals, fillAtomWaals, buildboundary, fastdistancemap, fastoneshell, marchingcubeinit, counter, marchingcube
icn3dicn3duiicn3dsurfaceCls (surface)createSurfaceRepresentation, transformMemPro, SetupSurface, SetupMap
icn3dicn3duiicn3dresizeCanvasCls (transform)resizeCanvas, windowResize, openFullscreen, rotStruc, back, forward, replayon, replayoff, closeDialogs
icn3dicn3duiicn3dtransformCls (transform)resetOrientation, rotateLeft , rotateRight , rotateUp , rotateDown , rotate_base , setRotation, translateLeft, translateRight, translateUp, translateDown, translate_base, zoomIn, zoomOut, zoominSelection, getTransformationStr

Add New Classesback to top

To contribute new classes to iCn3D, you can follow the example of "module.html". You need to do the following steps:
  1. Comment out icn3d library: <!--script src="icn3d.min.js"></script-->
  2. Script type should be "module": <script type="module">
  3. Import iCn3D module: "import * as icn3d from './icn3d.module.js';"
  4. Import your custom class (e.g., "LoadStateFile"): "import {LoadStateFile} from './loadStateFile.js';"
  5. Remove "$( document ).ready(function() {" and the coresponding "//});" since module will always be run after the document is ready.
  6. Call your class inside the function "$.when(icn3dui.show3DStructure()).then(function() {". You first define the class instance "loadStateFileCls" and pass the iCn3D instance "icn3dui.icn3d". Then call the functions of your class.
        var loadStateFileCls = new LoadStateFile(icn3dui.icn3d);
        loadStateFileCls.loadStateFile('color spectrum');
  7. Your custom class could look like the following.
        // import any classes from icn3d.module.js to be used in your class
        import {LoadScript} from './icn3d.module.js';
        // class name starts with a upper-case letter
        class LoadStateFile {
            // pass the instance of the class iCn3D
            constructor(icn3d) {
                this.icn3d = icn3d;
            // functions start with a lower-case letter
            // use "ic" to access the instance of iCn3D class
            loadStateFile(fileStr) { var ic = this.icn3d;
                // "ic" has a lot of class instances such as "loadScriptCls"
                ic.loadScriptCls.loadScript(fileStr, true);
        // export your class
        export {LoadStateFile}
  8. Install static-server and run "static-server -i module.html -o" to test your code. "import" and "export" do not work in "file://" protocol.
  9. Specify the ID of the structure in the URL, e.g., "localhost:9080/module.html?mmdbid=1kq2".

Help Doc:back to top