Use the Online Version of 3Dmol.js Library

Q

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

A

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.

3Dmol.js Example - Draw Sphere
3Dmol.js Example - Draw Sphere

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

What Is 3Dmol.js Library

Getting Started with 3Dmol.js

⇑⇑ 3Dmol.js FAQ

2022-12-24, 550🔥, 0💬