WEB 3D JS 使用【3Dmol.js】

在web使用3d查看器，很多时候我们会优先考虑是不是要用wegGL又或者Three.js

这里分享一个在生物和化学上比较简单的分子3D查看器 3Dmol.js

先看下这句话：

3D view 查看器 default pdb; can be pdb, sdf, xyz, mol2, or cube

如果不是以上的格式，那么嘿嘿嘿，不要担心，如果代码能力足够或者有其他同事 帮忙，自己对相关 专业的数据格式  也比较懂，可自己写代码进行格式转换哦

官网教程地址：https://3dmol.org/doc/tutorial-code.html

先看看官网的内容，如果能看懂可以自己选择集成方式。

如果你想偷个懒，那就看到最后吧。

官网教程

创建 3DMol 实例

首先，确保您的 HTML 文档链接到 3Dmol 代码。

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

现在在 HTML 文档中创建一个容器标签来保存可视化。

<div  id = "container-01"  class = "mol-container"> </div>

注意：3Dmol 将采用容器的大小，因此我们需要确保已明确设置此大小（即使用 CSS 或内联style属性）。

<style>
.mol-container {
  width: 60%;
  height: 400px;
  position: relative;
}
</style>

加载网页后，我们可以创建一个新的 3Dmol 实例。

为了确保一切正常，我们将添加一个球体，设置相机，渲染场景，然后添加缩放。

<script>
$(function() {
  let element = $('#container-01');
  let config = { backgroundColor: 'orange' };
  let viewer = $3Dmol.createViewer( element, config );
  viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' });
  viewer.zoomTo();
  viewer.render();
  viewer.zoom(0.8, 2000);
});
</script>

如果这有效，您应该会在橙色背景前看到一个相当吸引人的绿色球。

是的 没错 我就从官网翻译的，你觉得我在抄袭？

no~ no~ no~ 当然不，我这波啊，这波我在大气层，这玩意实在够老够粗糙，我怕这个东西哪天直接凉了，一点东西都找不到，那多可惜啊。

那我们继续哈，官网里面还给了一个demo，他长这样

        

 代码是这样的：

  let viewer = $3Dmol.createViewer( element, config );
  let pdbUri = '/path/to/your/pdb/files/1ycr.pdb';
  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 );
    },
  });

我自己做了个HTML将js和3D查看器属性作为一个独立的HTML当成一个查看工具再嵌到前端项目

是的，你没看错，哈哈哈我就是觉得这样易于维护和调整，我还不需要考虑前端是 vue 还是 react 的问题，哪个项目我都引入 html ，用 nginx 给 html 做了个域名指向，这就是我的思路。

比如我还可以通过js从访问地址中处理：

$(function(){
      //https://XXX.com?uuid=XXX
      var search = window.location.search;
      if(search != ""){
          loadView()  
      }
});

这样我就可以把 html 完全封装一个简易的3D查看器

废话不多说，上代码和注释，首先网页头部如下：

<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta http-equiv="Content-Security-Policy" 
content="upgrade-insecure-requests">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<!-- 方便大家自己本地测试 写一个文件选择器 -->
<input type="file" name="file" value="上传文件" onchange="loadView(this)" />
<!-- 3D view 查看器 -->
<div id="container-01" style="width: 50%;height: 50%;min-height: 10px;"
class='viewer_3Dmoljs' data-backgroundcolor='0xffffff' 
data-style='stick'></div>

欧服抠死~  前面 meta 分别是 跨域 和允许 http 吗，一般我们都会用 https，但如果使用了 负载均衡 那么就会涉及 http转发 等问题喽，自己决定加不加哈  =_= !

哦吼 我还是建议后面你做完了把文件下载下来，万一哪天网址 凉了呢 。

嗨 雄蝶(兄弟) 别着急 复制代码，

接下来就需要相对 专业 比较清楚的知识点了，

比如：cartoon surface 这里就不展开了，英语不好就百度翻译一下吧，我经常这么干..........

接下来就是js代码之 pdb ： 

function loadView(that){
        var input = that;
        var reader = new FileReader();
        reader.readAsText(input.files[0]);
        reader.onload = function() {
            temp_str = reader.result;
            var data = temp_str
            console.log(data)
            let element = $('#container-01');
            let config = { backgroundColor: 'gray' };
            let viewer = $3Dmol.createViewer(element, config);
            viewer.addModel(data, "pdb").setStyle({}, {"cartoon": { color: '#17ac80'} });
            viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity':0.5, color: 'white'});
            viewer.zoomTo();
            viewer.render();
            viewer.zoom(1, 2000);
        }
    }

接下来就是js代码之 mol2：

function loadView(that){
        var input = that;
        var reader = new FileReader();
        reader.readAsText(input.files[0]);
        reader.onload = function() {
            temp_str = reader.result;
            var data = temp_str
            console.log(data)
            let element = $('#container-01');
            let config = { backgroundColor: 'gray' };
            let viewer = $3Dmol.createViewer(element, config);
            viewer.addModel(data, "mol2").setStyle({},{stick:{color: 'spectrum',radius:0.5}});
            viewer.addModel(data, "mol2").setStyle({}, {sphere: { color: 'spectrum', radius: 0.5}});
            viewer.zoomTo();
            viewer.render();
            viewer.zoom(1, 2000);
        }

    }

其最糟糕的点就是官网的内容少的可怜，当我想要知道用户点了哪个分子的时候，及其痛苦，好在找到了回调方法：

viewer.setClickable({}, true, function(){
                console.log(this)
            });

授人以鱼不如授人以渔

所以我决定告诉大家我在遇到这种问题的方式：

1. 我先在官网找了一下，还是有一点内容的

2. 我很清楚我要找回调函数这一类的，所以我就开始搜索 function 类型的，果然找到了些属性

3. 我欣喜若狂的同事发现更操蛋的是他没有告诉我在

        哪里使用，如何使用？？？？？MMP

4. 幸好我知道他们有 github，同时我又知道 github 可以搜索，所以我就在他们githun仓库

http://​https://github.com/3dmol/3Dmol.js​

        疯狂搜索 callback

5. 只有几条，然后我将目标换成了 clickable ，终于让我在第二页找到了我想要的

我将如何使用和查找的方式告诉大家，方便大家在做系统时有足够的可扩展性，方便大家属性新的属性和使用

开头提到了文件格式的转换，人生苦短我用Python，额 其实我之前是个Java架构师，哈哈哈哈，我是用Java写的，有需要大家留言，我再写一篇如何用Python处理格式转换（其实就是知道文件格式然后一直拼接字符串的逻辑）