博主對前端技術不甚瞭解，只是想在部落格中直接展示一些已有的分子結構，而且需要是可以互動的。而我們瞭解到通過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" class="mol-container"></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" class="mol-container"></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" class="mol-container"></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" class="mol-container"></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