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:
- The online version may be not accessible at all time in all regions due to network restrictions.
- The online version may upgrade and become incompatible with your code.
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, 1264🔥, 0💬
Related Topics:
Molecule FYI-1001832
Molecule Summary: ID: FYI-1001832 SMILES: COc1ccc(Cl)cc1C(=O)NCCc1ccc(cc 1)S(=O)(=O)[NH2+]C(=O)NC1CCCCC 1Received at FYIcenter.com on: 2022-12-21 2023-01-06, 3116🔥, 0💬