在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 ，终于让我在第二页找到了我想要的
文章来源：https://www.toymoban.com/news/detail-418470.html
我将如何使用和查找的方式告诉大家，方便大家在做系统时有足够的可扩展性，方便大家属性新的属性和使用
开头提到了文件格式的转换，人生苦短我用Python，额 其实我之前是个Java架构师，哈哈哈哈，我是用Java写的，有需要大家留言，我再写一篇如何用Python处理格式转换（其实就是知道文件格式然后一直拼接字符串的逻辑）文章来源地址https://www.toymoban.com/news/detail-418470.html
到了这里，关于WEB 3D JS 使用【3Dmol.js】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
