Collections:
Use the Online Version of 3Dmol.js Library
How to use the online version of the 3Dmol.js Library to draw a graphical object? I don't want to install the library locally.
✍: FYIcenter.com
Yes, you can follow these steps to the online version of the 3Dmol.js library
to draw graphical objects.
The online version is located at
https://3Dmol.csb.pitt.edu/build/3Dmol-min.js.
Another online version is located at
https://3Dmol.org/build/3Dmol-min.js.
1. Create an HTML file, Draw-Sphere.html, with the following code:
<html><head> <script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> <style> .mol-container {width: 400px; height: 400px; position: relative;} </style> </head> <body> <div id="container-01" class="mol-container"></div> <script> $(function() { let element = $('#container-01'); let config = { backgroundColor: 'grey' }; let viewer = $3Dmol.createViewer( element, config ); viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' }); viewer.zoomTo(); viewer.render(); viewer.zoom(0.8, 2000); }); </script> </body></html>
2. Load this HTML file into a Web browser. You see a rather fetching green ball in front of an orange background.
Note that using the online version may cause possible issues:
Also note that older Web browsers may not support 3Dmol.js. For example, you may see the following error on an older Safari browser in the browser developer console.
error creating viewer: TypeError: undefined is not a constructor (evaluating 'new window.ResizeObserver(this.resize)') createViewer - 3Dmol-min.js:8134
⇒ Install 3Dmol.js Library Locally
⇑ Getting Started with 3Dmol.js
⇑⇑ 3Dmol.js FAQ
2022-12-24, 723🔥, 0💬
Popular Posts:
Tools: Convert SMILES Search by Name Search by InChIKey SDF Viewer Molecule Editor Reaction Editor C...
Molecule Summary: ID: FYI-1002316 Names: InChIKey: XFPMHRMLIAVJRI-UHFFFAOYS A-MSMILES: O=C([O-])c1cc...
How to display a 3-D molecule structure with 3Dmol.js? If you have a 3-D molecule structure stored i...
Molecule Summary: ID: FYI-1004515 Names: InChIKey: SITLCYUFBGMNPH-UHFFFAOYS A-NSMILES: NCC4=NC3C=C(N...
Right/Left Hand Stereo Centers? In chemstry study, a stereo center a labeled as R (Rectus, Right in ...