3Dmol  ·  2018/03/14

3Dmol.jsの球棒スタイルでの表示

(著)山たー

3Dmol.jsで球棒スタイルを使う方法を書いておきます。

https://github.com/3dmol/3Dmol.js/issues/127

を参考にしました。

(例) ベンゼンの球棒スタイルでの表示①

球と棒のスタイルを組み合わせて

data-style='stick;sphere:radius~0.5'

とするだけです。

 

ソースコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script>
<div style="height: 300px; width: 300px; position: relative;"  class='viewer_3Dmoljs' data-href="https://dl.dropboxusercontent.com/s/7gsituw96b43c83/benzen.sdf" 
data-datatype="sdf"  
data-backgroundcolor='0xf6f6f6' 
data-style='stick;sphere:radius~0.5'></div>

(例) ベンゼンの球棒スタイルでの表示②

原子の種類によって球の半径を変更したい場合にはradiusの代わりにscaleを用います。つまり、

data-style='stick;sphere:scale~0.3'

とします。 

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script>
<div style="height: 300px; width: 300px; position: relative;"  class='viewer_3Dmoljs' data-href="https://dl.dropboxusercontent.com/s/7gsituw96b43c83/benzen.sdf" 
data-datatype="sdf"  
data-backgroundcolor='0xf6f6f6' 
data-style='stick;sphere:scale~0.3'></div>

(例3) 分子軌道を同時に表示する場合

viewer.setStyle({}, {stick:{}, sphere:{scale:0.3}});

とするのがポイントです。 

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script> 
<script>
  var $3Dmol = $3Dmol || {};
  var $ = jQuery || {};
  var initShapes = function(viewer) {
      $.get('https://dl.dropboxusercontent.com/s/3txt5x1id37tn3r/benzene_HOMO.cube', function(data){
          var voldata = new $3Dmol.VolumeData(data, "cube");
          viewer.addIsosurface(voldata, {isoval: 0.02, color: "blue", alpha: 0.95, smoothness: 10});
          viewer.addIsosurface(voldata, {isoval: -0.02, color: "red", alpha: 0.95, smoothness: 10});
          viewer.setStyle({}, {stick:{}, sphere:{scale:0.3}});
          viewer.zoomTo();
          viewer.zoom(1.5);
          viewer.render();
      }, 'text');
  };
</script>
<div style="height: 300px; width: 300px; position: relative;" class='viewer_3Dmoljs' data-href="https://dl.dropboxusercontent.com/s/7gsituw96b43c83/benzene.sdf" data-datatype="sdf" data-callback=
'initShapes' data-backgroundcolor='0xf6f6f6'>
</div>