addSphere() - Create Spheres

Q

How to create spheres with 3Dmol.js addSphere() methods?

✍: FYIcenter.com

A

viewer.addSphere() method in the $3Dmol.GLViewer class allows you to create sphere objects. Here is the signature of the addSphere() method:

{$3Dmol.GLViewer} addSphere({SphereStyleSpec} spec) -> {$3Dmol.GLShape}

Here is an HTML code example, Draw-Sphere.html, that uses the addSphere() method:

<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>

This example HTML code will display a sphere as shown below:

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

 

addModel() - Add Model from Data

addLabel() - Create Text Labels

3Dmol.js Classes and API

⇑⇑ 3Dmol.js FAQ

2023-09-07, 355🔥, 0💬