Viewer3D Canvas

The 3D canvases perform a very different task from the 2D canvas by displaying WebGL graphics. That being said, their usages are programmatically identical. Just like the ViewerCanvas constructor, the ViewerCanvas3D constructor takes a name, width and height.

1
new ChemDoodle.ViewerCanvas3D(name, width, height);

Everything about setting up the visual specifications and other settings is identical to the 2D canvas. More information on the visual specifications for 3D canvases is provided in the API. For convenience, there is a VisualSpecifications.set3DRepresentation() function that takes a string and sets up the VisualSpecifications to a preset 3D representation. This is shown by example on the TransformCanvas3D page. The allowed values are:

  • ‘Ball and Stick’ – Atom spheres are scaled to a percentage of the vdW diameter, and bonds are easily visible, with multiple bond orders supported.
  • ‘Stick’ – Atom spheres are not seen, but the connectivity of a structure is clearer. Thick bonds connect atoms, but multiple bond orders are not shown.
  • ‘van der Waals Spheres’ – Atom spheres are the size of their vdW diameter. Bonds are not visible.
  • ‘Wireframe’ – This is very similar to ‘Ball and Stick’, except that the sizes of the atom spheres and bond cylinders are much smaller. Really shows off molecule topology.
  • ‘Line’ – Atoms are not shown, while bonds are represented by simple constant width lines. Multiple bond orders are supported.

Also notice that when using the ChemDoodle.readMOL() function below, we pass in an additional parameter of 1. This is a multiplier to the coordinates in the MOLFile. Since 3D coordinates are in Ängstroms, not bond lengths, Canvas3D takes the coordinates as is for an Ängstrom space.

Examples

Change the lighting for the scene:

1
2
3
4
5
6
7
8
9
<script>
  var viewerChangeLighting = new ChemDoodle.ViewerCanvas3D('viewerChangeLighting', 125, 125);
  viewerChangeLighting.specs.set3DRepresentation('van der Waals Spheres');
  viewerChangeLighting.specs.lightDirection_3D = [0,1,0];
  viewerChangeLighting.specs.backgroundColor = '#368CA5';
  var molFile = '9570133\n  CHEMDOOD06280922273D\n\n 68 73  0     0  0  0  0  0  0999 V2000\n   -2.7594    4.7937    4.9660 Cl  0  0  0  0  0  0  0  0  0  0  0  0\n    0.1713   12.3898    1.1610 Cl  0  0  0  0  0  0  0  0  0  0  0  0\n    3.9321    2.3762    5.3236 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -5.6821   12.1494   -3.0690 O   0  0  0  0  0  0  0  0  0  0  0  0\n    3.3046    2.3031    7.6295 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.0418   13.5130   -4.1490 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.2397    4.4446    5.3491 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.4255   12.0044   -0.3787 N   0  0  0  0  0  0  0  0  0  0  0  0\n    2.2198    2.7741    8.3844 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.7320   13.9210   -3.8549 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4187    3.8201    5.1425 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.5588   11.9239   -1.0942 N   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.9049    7.6732    2.9143 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.2872    8.7871    2.0739 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.1634    5.5180    4.5392 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0253   10.9339    0.4523 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.9373    3.3330    6.2089 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.5108   12.5947   -2.1937 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.8843    6.8557    3.4783 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4837    9.9258    2.0156 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.4440    7.4167    3.1601 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.4599    8.7219    1.3215 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4021    3.3818    7.5816 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.3923   13.4003   -2.7165 C   0  0  0  0  0  0  0  0  0  0  0  0\n    3.2218    2.5988    6.2757 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.6082   12.6920   -3.1835 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.5149    5.7816    4.2879 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8526   10.9991    1.2047 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.8133    6.3428    3.9700 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.8290    9.7954    0.5108 C   0  0  0  0  0  0  0  0  0  0  0  0\n    4.3645    1.6047    8.1858 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.7107   13.8957   -5.3008 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.1208    4.0381    7.9279 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1027   13.5525   -2.0051 C   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4188    1.1603    7.3797 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.0179   13.4556   -5.5382 C   0  0  0  0  0  0  0  0  0  0  0  0\n    4.3912    1.3364    9.5591 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.0857   14.7258   -6.2385 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.4854    0.4571    7.9395 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.6910   13.8405   -6.6977 C   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4580    0.6334   10.1190 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.7590   15.1109   -7.3978 C   0  0  0  0  0  0  0  0  0  0  0  0\n    6.5052    0.1938    9.3092 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.0616   14.6683   -7.6275 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.9440    7.0496    3.3306 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.4191   10.0186    2.6146 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.2426    8.0068    2.7190 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.1003    7.8442    1.3098 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.8722    6.1688    4.1457 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.7458    9.7027   -0.0652 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.5336    3.8483    5.6286 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.1470   12.9124   -0.0240 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.1083    5.0923    7.6446 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.7326    3.4808    7.5372 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0189    4.0183    9.0198 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4226   14.1022   -2.6678 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.2066   14.1725   -1.1131 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.6200   12.5914   -1.8221 H   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4926    1.3152    6.3135 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.5862   12.8152   -4.8801 H   0  0  0  0  0  0  0  0  0  0  0  0\n    3.5914    1.6647   10.2178 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -3.0717   15.0881   -6.0901 H   0  0  0  0  0  0  0  0  0  0  0  0\n    7.3017    0.1139    7.3104 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -7.7055   13.4967   -6.8783 H   0  0  0  0  0  0  0  0  0  0  0  0\n    5.4736    0.4281   11.1854 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -4.2692   15.7553   -8.1220 H   0  0  0  0  0  0  0  0  0  0  0  0\n    7.3358   -0.3536    9.7450 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -6.5858   14.9681   -8.5302 H   0  0  0  0  0  0  0  0  0  0  0  0\n  1 27  1  0  0  0  0\n  2 28  1  0  0  0  0\n  3 25  2  0  0  0  0\n  4 26  2  0  0  0  0\n  5  9  1  0  0  0  0\n  5 25  1  0  0  0  0\n  5 31  1  0  0  0  0\n  6 10  1  0  0  0  0\n  6 26  1  0  0  0  0\n  6 32  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 15  1  0  0  0  0\n  7 51  1  0  0  0  0\n  8 12  1  0  0  0  0\n  8 16  1  0  0  0  0\n  8 52  1  0  0  0  0\n  9 23  2  0  0  0  0\n 10 24  2  0  0  0  0\n 11 17  2  0  0  0  0\n 12 18  2  0  0  0  0\n 13 14  1  0  0  0  0\n 13 19  2  0  0  0  0\n 13 21  1  0  0  0  0\n 14 20  2  0  0  0  0\n 14 22  1  0  0  0  0\n 15 27  2  0  0  0  0\n 15 29  1  0  0  0  0\n 16 28  2  0  0  0  0\n 16 30  1  0  0  0  0\n 17 23  1  0  0  0  0\n 17 25  1  0  0  0  0\n 18 24  1  0  0  0  0\n 18 26  1  0  0  0  0\n 19 27  1  0  0  0  0\n 19 45  1  0  0  0  0\n 20 28  1  0  0  0  0\n 20 46  1  0  0  0  0\n 21 29  2  0  0  0  0\n 21 47  1  0  0  0  0\n 22 30  2  0  0  0  0\n 22 48  1  0  0  0  0\n 23 33  1  0  0  0  0\n 24 34  1  0  0  0  0\n 29 49  1  0  0  0  0\n 30 50  1  0  0  0  0\n 31 35  2  0  0  0  0\n 31 37  1  0  0  0  0\n 32 36  2  0  0  0  0\n 32 38  1  0  0  0  0\n 33 53  1  0  0  0  0\n 33 54  1  0  0  0  0\n 33 55  1  0  0  0  0\n 34 56  1  0  0  0  0\n 34 57  1  0  0  0  0\n 34 58  1  0  0  0  0\n 35 39  1  0  0  0  0\n 35 59  1  0  0  0  0\n 36 40  1  0  0  0  0\n 36 60  1  0  0  0  0\n 37 41  2  0  0  0  0\n 37 61  1  0  0  0  0\n 38 42  2  0  0  0  0\n 38 62  1  0  0  0  0\n 39 43  2  0  0  0  0\n 39 63  1  0  0  0  0\n 40 44  2  0  0  0  0\n 40 64  1  0  0  0  0\n 41 43  1  0  0  0  0\n 41 65  1  0  0  0  0\n 42 44  1  0  0  0  0\n 42 66  1  0  0  0  0\n 43 67  1  0  0  0  0\n 44 68  1  0  0  0  0\nM  END\n\n';
  var molecule = ChemDoodle.readMOL(molFile, 1);
  viewerChangeLighting.loadMolecule(molecule);
</script>

Setting colors to atoms and bonds:

1
2
3
4
5
6
7
8
9
10
<script>
  var viewerAllRed = new ChemDoodle.ViewerCanvas3D('viewerAllRed', 125, 125);
  viewerAllRed.specs.set3DRepresentation('Ball and Stick');
  viewerAllRed.specs.atoms_useJMOLColors = false;
  viewerAllRed.specs.atoms_color = '#C10000';
  viewerAllRed.specs.backgroundColor = 'black';
  var molFile = '2519\n  CHEMDOOD06060922503D\n\n 24 25  0     0  0  0  0  0  0999 V2000\n    1.6219   -5.0913   -2.7868 O   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8974   -1.1610   -3.2550 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.6521   -1.2709   -1.5226 N   0  0  0  0  0  0  0  0  0  0  0  0\n    2.9005   -3.7326   -0.4483 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.3482   -3.1332   -3.0412 N   0  0  0  0  0  0  0  0  0  0  0  0\n    2.3561   -1.6725    0.2072 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.9298   -3.3025   -1.3069 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.6150   -2.0401   -0.8837 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.3245   -3.9574   -2.4210 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.0308   -1.7993   -2.6466 C   0  0  0  0  0  0  0  0  0  0  0  0\n    3.1228   -2.7167    0.4451 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.3455    0.0703   -1.0411 C   0  0  0  0  0  0  0  0  0  0  0  0\n    3.5797   -5.0062   -0.4566 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.3428   -3.6946   -4.1974 C   0  0  0  0  0  0  0  0  0  0  0  0\n    3.8499   -2.7925    1.2423 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.0030    0.0046   -0.0058 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4303    0.5484   -1.6444 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.2534    0.6797   -1.0863 H   0  0  0  0  0  0  0  0  0  0  0  0\n    4.3024   -5.0401    0.3627 H   0  0  0  0  0  0  0  0  0  0  0  0\n    2.8359   -5.7960   -0.3258 H   0  0  0  0  0  0  0  0  0  0  0  0\n    4.0990   -5.1153   -1.4119 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.0097   -4.7058   -4.4413 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.1710   -3.0404   -5.0581 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.4173   -3.7088   -3.9888 H   0  0  0  0  0  0  0  0  0  0  0  0\n  1  9  2  0  0  0  0\n  2 10  2  0  0  0  0\n  3  8  1  0  0  0  0\n  3 10  1  0  0  0  0\n  3 12  1  0  0  0  0\n  4  7  1  0  0  0  0\n  4 11  1  0  0  0  0\n  4 13  1  0  0  0  0\n  5  9  1  0  0  0  0\n  5 10  1  0  0  0  0\n  5 14  1  0  0  0  0\n  6  8  1  0  0  0  0\n  6 11  2  0  0  0  0\n  7  8  2  0  0  0  0\n  7  9  1  0  0  0  0\n 11 15  1  0  0  0  0\n 12 16  1  0  0  0  0\n 12 17  1  0  0  0  0\n 12 18  1  0  0  0  0\n 13 19  1  0  0  0  0\n 13 20  1  0  0  0  0\n 13 21  1  0  0  0  0\n 14 22  1  0  0  0  0\n 14 23  1  0  0  0  0\n 14 24  1  0  0  0  0\nM  END\n';
  var molecule = ChemDoodle.readMOL(molFile, 1);
  viewerAllRed.loadMolecule(molecule);
</script>

Close-up of benzene:

1
2
3
4
5
6
7
8
9
10
11
<script>
  var viewerCloseup = new ChemDoodle.ViewerCanvas3D('viewerCloseup', 125, 125);
  viewerCloseup.specs.set3DRepresentation('Stick');
  viewerCloseup.specs.lightDirection_3D = [0,0,-1];
  viewerCloseup.specs.backgroundColor = '#776105';
  var molFile = 'Molecule Name\n  CHEMDOOD07040913283D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 12 12  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660    0.5000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.0000    2.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n   -1.7321    1.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n   -1.7321   -1.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n    0.0000   -2.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n    1.7320   -1.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n    1.7320    1.0000    0.0000   H-2  0  0  1  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  1  6  1  0  0  0  0\n  1  7  1  0  0  0  0\n  2  8  1  0  0  0  0\n  3  9  1  0  0  0  0\n  4 10  1  0  0  0  0\n  5 11  1  0  0  0  0\n  6 12  1  0  0  0  0\nM  END';
  var molecule = ChemDoodle.readMOL(molFile, 1);
  viewerCloseup.loadMolecule(molecule);
  viewerCloseup.setViewDistance(2);
  viewerCloseup.repaint();
</script>

Lowering the resolution of the polygons:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  var viewerLowRes = new ChemDoodle.ViewerCanvas3D('viewerLowRes', 125, 125);
  viewerLowRes.specs.set3DRepresentation('Ball and Stick');
  viewerLowRes.specs.backgroundColor = 'black';
  viewerLowRes.specs.lightDirection_3D = [0,0,-1];
  viewerLowRes.specs.atoms_resolution_3D = 3;
  viewerLowRes.specs.bonds_resolution_3D = 3;
  viewerLowRes.specs.bonds_useJMOLColors = false;
  viewerLowRes.specs.bonds_color = '#00FF00';
  viewerLowRes.specs.atoms_useJMOLColors = false;
  viewerLowRes.specs.atoms_color = '#0000FF';
  viewerLowRes.specs.atoms_materialAmbientColor_3D = viewerLowRes.specs.bonds_materialAmbientColor_3D = '#333333';
  var molFile = '8078\n  CHEMDOOD06060922493D\n\n 18 18  0     0  0  0  0  0  0999 V2000\n    0.1105   -1.0856    0.1131 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.2040   -1.3799    1.1364 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.2275   -1.6906    0.5295 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7971   -0.9348    2.5386 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.6344   -1.2454    1.9315 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.5409   -1.5397    2.9549 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.4052   -1.4804   -0.8657 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000   -0.0001    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0\n    2.1302   -0.8732    0.8427 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4165   -2.4561    1.1432 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.1571   -2.7850    0.5008 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.0027   -1.4014   -0.1890 H   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7269    0.1596    2.5673 H   0  0  0  0  0  0  0  0  0  0  0  0\n    1.5723   -1.2241    3.2570 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -2.5606   -1.7520    2.2252 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.8469   -0.1692    1.9247 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8357   -1.1449    3.9337 H   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.4305   -2.6253    3.0680 H   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0  0  0  0\n  1  3  1  0  0  0  0\n  1  7  1  0  0  0  0\n  1  8  1  0  0  0  0\n  2  4  1  0  0  0  0\n  2  9  1  0  0  0  0\n  2 10  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3 11  1  0  0  0  0\n  3 12  1  0  0  0  0\n  4  6  1  0  0  0  0\n  4 13  1  0  0  0  0\n  4 14  1  0  0  0  0\n  5  6  1  0  0  0  0\n  5 15  1  0  0  0  0\n  5 16  1  0  0  0  0\n  6 17  1  0  0  0  0\n  6 18  1  0  0  0  0\nM  END\n';
  var molecule = ChemDoodle.readMOL(molFile, 1);
  viewerLowRes.loadMolecule(molecule);
</script>