在博客园随笔中插入3D分子模型

技术背景

博主对前端技术不甚了解，只是想在博客中直接展示一些已有的分子结构，而且需要是可以交互的。而我们了解到通过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模型集成到我们的博客内容中，从很大程度上优化了展示的效果。