昨日は人工雪の作成の時に使うバクテリアがもつ、雪の結晶形成促進作用があるタンパク質inaZの立体構造をweb pageに埋め込んでみました。
コードを書かかったので、今日はコードと、それをhtmlファイルに書き込んだ後の結果をならべてみることにします。
こちらは、3Dmolのホームページにリンクがあるembed (埋め込み)についてのページにのっているコードです。
http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html
これを自分のweb pageのhtmlに書き込むと、書きこんだページで立体表示をすることができます。このコードでは、data-pdb=’2POR’でPDBの2PORというエントリを読み込んでいます。この部分をdata-href=’https://alphafold.ebi.ac.uk/files/AF-P06620-F1-model_v6.pdb’にすると、https://以下で指定したサイトにあるpdbファイルを読み込んで表示します。またdata-style=’stick’のstickをline, cross, stick, sphere, cartoonのどれかに変えると立体構造表示が指定した表示に変わります。コードは上が、2PORの表示。その次が、昨日表示したinaZの立体構造の表示です。inaZは横に長いので、800ピクセル四方に表示するようにしてあります。
<script src=”https://3Dmol.org/build/3Dmol-min.js”></script>
<script src=”https://3Dmol.org/build/3Dmol.ui-min.js”></script>
<div style=”display: flex; gap: 20px; flex-wrap: wrap;”>
<div>
<p>2POR</p>
<div
style=”height: 400px; width: 400px; position: relative;”
class=”viewer_3Dmoljs”
data-pdb=”2POR”
data-backgroundcolor=”0xffffff”
data-style=”stick”
data-ui=”true”>
</div>
</div>
<div>
<p>inaZ AlphaFold model</p>
<div
style=”height: 800px; width: 800px; position: relative;”
class=”viewer_3Dmoljs”
data-href=”https://alphafold.ebi.ac.uk/files/AF-P06620-F1-model_v6.pdb”
data-type=”pdb”
data-backgroundcolor=”0xffffff”
data-style=”stick”
data-ui=”true”>
</div>
</div>
</div>
2POR
inaZ AlphaFold model