技術背景

博主對前端技術不甚了解，只是想在博客中直接展示一些已有的分子結構，而且需要是可以互動的，而我們了解到通過3Dmol這樣的前端工具可以實作，通過在博客園隨筆中直接引入3Dmol的js最新腳本，然后在當前頁構建一個容器，最后在容器中以字串的形式填進去分子結構，比如可以填充一個xyz檔案所定義的3D分子結構，由于不需要安裝什么特定的軟體（假設你已經生成好了一系列的分子模型用于展示，否則可以參考前面這篇博客用openbabel去生成一些特定的分子結構），我們直接上前端代碼吧，

解決方案

解決方案主要參考了參考鏈接1文章中的內容，非常簡單，只需三步走，首先，我們直接在Markdown模式的編輯器下直接引入3Dmol的最新js腳本：

<script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>

然后創建一個容器，這里我們設定了大小和居中：

<div id="container-01" ></div>
<style>
.mol-container {
  width:    75%;
  height:   400px;
  position: relative;
  margin: 0 auto;
}
</style>

最后，我們再寫一個js：

<script>
$(function() {
	let element = $('#container-01');
	let config = { backgroundColor : 'white' };
	let viewer = $3Dmol.createViewer( element, config );
	viewer.addModel("3\n\nC 0 0 0\nO 1.16 0 0\nO -1.16 0 0", "xyz");
	viewer.addUnitCell();
	viewer.setStyle({}, {sphere : {}});
	viewer.zoomTo();
	viewer.render();
});
</script>

這樣我們就完成了一個二訊訓碳\(CO_2\)的結構展示，實作效果如下所示：

當然，類似的我們還可以修改顯示效果，比如把背景改成黑色，然后改成一個棍子模型：

<div id="container-02" ></div>
<style>
.mol-container {
  width:    75%;
  height:   400px;
  position: relative;
  margin: 0 auto;
}
</style>

<script>
$(function() {
	let element = $('#container-02');
	let config = { backgroundColor : 'black' };
	let viewer = $3Dmol.createViewer( element, config );
	viewer.addModel("3\n\nC 0 0 0\nO 1.16 0 0\nO -1.16 0 0", "xyz");
	viewer.addUnitCell();
	viewer.setStyle({stick:{}});
	viewer.zoomTo();
	viewer.render();
});
</script>

比較神奇的是，雖然3Dmol沒有直接支持球棍模型，但是如果我們把球模型和棍子模型一結合，就自然產生了一個球棍模型：

<div id="container-03" ></div>
<style>
.mol-container {
  width:    75%;
  height:   400px;
  position: relative;
  margin: 0 auto;
}
</style>

<script>
$(function() {
	let element = $('#container-03');
	let config = { backgroundColor : 'black' };
	let viewer = $3Dmol.createViewer( element, config );
	viewer.addModel("3\n\nC 0 0 0\nO 1.16 0 0\nO -1.16 0 0", "xyz");
	viewer.addUnitCell();
	viewer.setStyle({stick:{radius:0.1},sphere:{radius:0.45}});
	viewer.zoomTo();
	viewer.render();
});
</script>

當然，加載普通的蛋白質結構，更是不在話下：

<div id="container-04" ></div>
<style>
.mol-container {
  width:    75%;
  height:   400px;
  position: relative;
  margin: 0 auto;
}
</style>

<script>
$(function() {
	let element = $('#container-04');
	let config = { backgroundColor : 'black' };
	let viewer = $3Dmol.createViewer( element, config );
  let pdbUri = 'https://files-cdn.cnblogs.com/files/dechinphy/protein.sh?t=1669043795';
  jQuery.ajax( pdbUri, { 
    success: function(data) {
      let v = viewer;
      v.addModel( data, "pdb" );                       /* load data */
      v.setStyle({}, {cartoon: {color: 'spectrum'}});  /* style all atoms */
      v.zoomTo();                                      /* set camera */
      v.render();                                      /* render scene */
      v.zoom(1.2, 1000);                               /* slight zoom */
    },
    error: function(hdr, status, err) {
      console.error( "Failed to load PDB " + pdbUri + ": " + err );
    },
  });
});
</script>

值得注意的是，3Dmol使用jQuery.ajax從外部去讀取檔案時，只能加載同域名下的檔案，正如原文所說：

By default, Javascript will only be allowed to load data from the same domain as the web page from which it has been invoked (i.e. if your web page is being served from "my.domain.com" then javascript on that web page will only be able to load data from "my.domain.com"). This is a standard security restriction called "Cross-origin resource sharing" CORS - there are ways around this restriction, however for the sake of this tutorial we assume that the external PDB data file resides on your server.

因此，我們需要把pdb檔案上傳到博客園的檔案系統中，而又因為博客園的檔案系統僅支持幾種特定的檔案型別，因此我使用的方法是把pdb檔案改名為一個sh檔案，再傳到博客園的檔案系統中，由于讀取的時候都是用字串讀取，再轉義成pdb檔案，所以并不影響執行，最終的效果如下所示：

總結概要

前端作為一項重要技術，其本身就旨在給用戶更好的展示效果和更好的互動模式，然而很多時候再博客中我們只能夠采用一些截圖的方法來保存我們的結果，然后再放到博客的內容中，而這樣操作會帶來很大程度上的失真，尤其是生物化學中常見的分子結構的展示，如果直接截圖則無法更加全面的展示其結構內容，而3Dmol這個工具則使能了我們使用js的技術，將一個分子的3D模型集成到我們的博客內容中，從很大程度上優化了展示的效果，

著作權宣告

本文首發鏈接為：https://www.cnblogs.com/dechinphy/p/3dmol.html

作者ID：DechinPhy

更多原著文章請參考：https://www.cnblogs.com/dechinphy/

打賞專用鏈接：https://www.cnblogs.com/dechinphy/gallery/image/379634.html

騰訊云專欄同步：https://cloud.tencent.com/developer/column/91958

CSDN同步鏈接：https://blog.csdn.net/baidu_37157624?spm=1008.2028.3001.5343

51CTO同步鏈接：https://blog.51cto.com/u_15561675

參考鏈接

https://zhuanlan.zhihu.com/p/293139166
https://3dmol.org/doc/tutorial-code.html

“留一手”加劇內卷，“講不清”浪費時間，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/537732.html

標籤：其他

上一篇：【《硬體架構的藝術》讀書筆記】03 處理多個時鐘（1）

下一篇：HCIA學習筆記四十二：高級ACL

在博客園隨筆中插入3D分子模型

技術背景

解決方案

總結概要

著作權宣告

參考鏈接