Tutorial > 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.
new ChemDoodle.ViewerCanvas3D(name, width, height);Everything about setting up the styles and other settings is identical to the 2D canvas. More information on the styles for 3D canvases is provided in the API. For convenience, there is a Styles.set3DRepresentation() function that takes a string and sets up the Styles 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:
<script>
let viewerChangeLighting = new ChemDoodle.ViewerCanvas3D('viewerChangeLighting', 125, 125);
viewerChangeLighting.styles.set3DRepresentation('van der Waals Spheres');
viewerChangeLighting.styles.lightDirection_3D = [0,1,0];
viewerChangeLighting.styles.backgroundColor = '#368CA5';
let 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';
let molecule = ChemDoodle.readMOL(molFile, 1);
viewerChangeLighting.loadMolecule(molecule);
</script>Setting colors to atoms and bonds:
<script>
let viewerAllRed = new ChemDoodle.ViewerCanvas3D('viewerAllRed', 125, 125);
viewerAllRed.styles.set3DRepresentation('Ball and Stick');
viewerAllRed.styles.atoms_useJMOLColors = false;
viewerAllRed.styles.atoms_color = '#C10000';
viewerAllRed.styles.backgroundColor = 'black';
let 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';
let molecule = ChemDoodle.readMOL(molFile, 1);
viewerAllRed.loadMolecule(molecule);
</script>Close-up of benzene:
<script>
let viewerCloseup = new ChemDoodle.ViewerCanvas3D('viewerCloseup', 125, 125);
viewerCloseup.styles.set3DRepresentation('Stick');
viewerCloseup.styles.lightDirection_3D = [0,0,-1];
viewerCloseup.styles.backgroundColor = '#776105';
let 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';
let molecule = ChemDoodle.readMOL(molFile, 1);
viewerCloseup.loadMolecule(molecule);
viewerCloseup.camera.zoomIn();
viewerCloseup.camera.zoomIn();
viewerCloseup.camera.zoomIn();
viewerCloseup.setupScene();
viewerCloseup.repaint();
</script>Lowering the resolution of the polygons:
<script>
let viewerLowRes = new ChemDoodle.ViewerCanvas3D('viewerLowRes', 125, 125);
viewerLowRes.styles.set3DRepresentation('Ball and Stick');
viewerLowRes.styles.backgroundColor = 'black';
viewerLowRes.styles.lightDirection_3D = [0,0,-1];
viewerLowRes.styles.atoms_resolution_3D = 3;
viewerLowRes.styles.bonds_resolution_3D = 3;
viewerLowRes.styles.bonds_splitColor = false;
viewerLowRes.styles.bonds_color = '#00FF00';
viewerLowRes.styles.atoms_useJMOLColors = false;
viewerLowRes.styles.atoms_color = '#0000FF';
viewerLowRes.styles.atoms_materialAmbientColor_3D = viewerLowRes.styles.bonds_materialAmbientColor_3D = '#333333';
let 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';
let molecule = ChemDoodle.readMOL(molFile, 1);
viewerLowRes.loadMolecule(molecule);
</script>
