Install 3Dmol.js Library Locally
How to install the 3Dmol.js library locally on my own Web server?
✍: FYIcenter.com
If you want use a local copy of the 3Dmol.js library,
you can follow these steps.
1. Download a copy of the 3Dmol.js library:
fyicenter$ curl https://3Dmol.csb.pitt.edu/build/3Dmol-min.js > 3Dmol-min.js
2. Create an HTML file, Draw-Box.html, with the following code:
<html><head>
<script src="/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.addBox({center:{x:0,y:0,z:0},dimensions: {w:3,h:4,d:2},color:'magenta'});
viewer.zoomTo();
viewer.rotate(45, {x:1,y:1,z:1});
viewer.render();
});
</script>
</body></html>
3. Copy the library and the HTML document to your Web server document directory:
fyicenter$ cp 3Dmol-min.js /var/www/html fyicenter$ cp Draw-Box.html /var/www/html
4. View the HTML document through your Web server: http://localhost/Draw-Box.html. You see a nice 3D box. You can room in and rotate it with your mouse.
Note that if you load the HTML file directly without using any Web Server, you may get the "Not allowed to load local resource" error for loading the 3Dmol.js file. You can disable the security control in the browser's setting to avoid this error.
⇒ Display 3-D Molecule Structure with 3Dmol.js
⇐ Use the Online Version of 3Dmol.js Library
⇑ Getting Started with 3Dmol.js
⇑⇑ 3Dmol.js FAQ
2022-12-24, 541🔥, 0💬
Related Topics:
