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

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-select と data-style の末尾に数字（1, 2, 3）やアルファベット（A, B, C）を付けて¹、それぞれ表示方法を指定します。

<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 は、導入が簡単、動作が軽快、コントロールパネルからいろいろ操作できる、などなどが特徴。