(著)山たー
※重いページになってしまった。
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>
コメントをお書きください