ブラウザーで分子を立体表示する

HTML に埋め込んで分子を立体表示するツール(分子ビュアー)について、いくつか試してみています。良さそうなものを見つけたら、順次追加する予定。

3Dmol

3Dmol は、分子を立体表示する JavaScript プログラム。Pittsburgh 大学の David Koes さんが開発しています。

HTML に埋め込むときは、div 要素に viewer_3Dmoljs という名前のクラスを割り当てて、あとで説明する data- タグを使って表示方法などを設定します。

<script
  src='https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol-min.js'
/></script>

<div
  class='viewer_3Dmoljs'
  style='height:350px; width:350px;'
  data-href='https://raw.githubusercontent.com/yamnor/molecule/main/caffeine.xyz'
  data-type='xyz'
  data-backgroundcolor='#fff'
  data-style='stick'
/></div>

codepen で試す

表示方法などは、div 要素のなかで data- タグを用いて、次のようにいろいろと指定することができます。

  • data-pdb 表示する分子を PDB ID で指定する
  • data-cid 表示する分子を PubChem ID で指定する
  • data-href 表示する分子を URL で指定する
  • data-type 表示する分子のファイル形式(pdb, sdf, xyz, mol2, cube)
  • data-backgroundcolor 背景色(デフォルトは black)
  • data-backgroundalpha 背景のアルファ値 (デフォルトは 1.0)
  • data-select 分子の一部を選択する(指定方法は AtomSpec
  • data-style 分子の表示方法を指定する(line, cross, stick, sphere, cartoon)
  • data-surface 表面の表示方法を指定する
  • data-labelres ラベルの表示方法を指定する
  • data-zoomto ズーム先を指定する(指定方法は AtomSpec
  • data-spin モデルを回転させる(例:data-spin=‘axis:z;speed:10’)

複合体などで、分子ごとに色や表示を変えたいときは、data-selectdata-style の末尾に数字(1, 2, 3)やアルファベット(A, B, C)を付けて1、それぞれ表示方法を指定します。

<script
  src='https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol-min.js'
/></script>

<div
  class='viewer_3Dmoljs'
  style='height:350px; width:350px;'
  data-pdb='1hxw'
  data-backgroundcolor='#fff'
  data-selectA='chain:A'
  data-styleA='cartoon:color=#EC407A'
  data-selectB='chain:B'
  data-styleB='cartoon:color=#29B6F6'
  data-selectC='resn:RIT'
  data-styleC='sphere:color=#FF9800'
  data-labelresC=''
/></div>

codepen で試す

この例では、HIV プロテアーゼ(PDB ID: 1HXW)の A 鎖を pink 色、B 鎖を cyan 色の cartoon で表示。HIV プロテアーゼに結合する阻害剤リトナビルを orange 色の sphere で表示しています。

3Dmol は、導入が簡単、小さな化合物からタンパク質まで表示できる、動作が軽快である、などなどが特徴。

Molmil

Molmil は、分子を立体表示する WebGL (JavaScript) プログラム。 Protein Data Bank Japan(PDBj) で開発されています。原著論文は こちら

Molmil を HTML に埋め込むとき、お手軽なのは、iframe 要素を使う方法です。src 内で molmil のコマンド を指定することで、表示方法などをいろいろと設定することができます。

<iframe
  src="https://pdbj.org/molmil2#
       fetch 1hxw;
       cartoon_color group, all;
       orient;"
  height="400px"
  width="500px" 
  style="border: 1px solid #ccc;"
/></iframe>

codepen で試す

Molmil は、導入が簡単、動作が軽快、コントロールパネルからいろいろ操作できる、などなどが特徴。


  1. 数字とアルファベットのどちらでも良さそうですが、数字とアルファベットが混在するとダメっぽい? ↩︎

計算化学
Posted :