3Dmol  ·  2018/03/03

3Dmol.jsを用いたWeb上での分子モデルの表示

（著）山たー

※重いページになってしまった。

 

pdbファイルをWeb上で表示する方法はないかと探した結果、3Dmol.jsというJavaScriptに基づいたWebGLを用いて分子モデルを3Dで表示するライブラリが見つかった。公式サイトは、http://3dmol.csb.pitt.edu/index.html, Githubのレポジトリはhttps://github.com/3dmol/3Dmol.jsである。

 

ダウンロードしても良いが、cdnjsで配信されているもの(https://cdnjs.com/libraries/3Dmol)を使うのが楽だろう。

 

以下では、http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.htmlに書いてあるコードを参考にして、タンパク質の分子モデルを表示してみた。

 

例1. 1BKV(ヒトのコラーゲン)

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script>
<div style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1BKV' data-backgroundcolor='0xffffff' data-style='stick'>
</div>

ドラッグで回転、マウスホイールで拡大縮小できる。

 

例2. 1YCR

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script>
<div style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1YCR' data-backgroundcolor='0xffffff' data-select1='chain:A' data-style1='cartoon:color=spectrum'
data-surface1='opacity:.7;color:white' data-select2='chain:B' data-style2='stick'>
</div>

data-surfaceでvan der Waals表面が表示できる。

 

例3. 1EMA(オワンクラゲのGFP)

<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.0/3Dmol-min.js"></script>
<div style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-href='https://files.rcsb.org/download/1EMA.pdb' data-backgroundcolor='0xffffff'  data-select1='chain:A' data-style1='cartoon:color=spectrum' data-select2='chain:B' data-style2='stick' data-type='pdb'>
</div>

RCSB PDBからpdbファイルを引用して表示した。1EMAのページはここ。pdbファイルのダウンロードリンクをコピーして、data-hrefというタグでリンクを貼れば、リンク先のpdbファイルが表示できる。表示の形式はdata-styleで設定できる。