在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=XXXvar 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_strconsole.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_strconsole.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处理格式转换（其实就是知道文件格式然后一直拼接字符串的逻辑）

WEB 3D JS 使用【3Dmol.js】相关推荐

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
three.js汇总,老牌Web 3d展示Js
简述我把现在的Web前端页面动效分为四个等级 1: 简单的css,js,jquery的旋转, 缩放, 位移, 淡入淡出, 拉伸, 渐变等效果; 2: 通过Ae或者其他软件导出的序 ...
Three 之 three.js （webgl）基础第一个入门 Web 3D 场景
Three 之 three.js (webgl)基础第一个入门 Web 3D 场景目录 Three 之 three.js (webgl)基础第一个入门 Web 3D 场景一.简单介绍二.Th ...
【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件
Webix是Javascript库一种软件产品用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架,为您提供102个UI小部件和功能丰富的CS ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
云炬WEB开发教程2-2 node.js和npm介绍和安装
一.node.js是什么?有什么用? 1.概述: a).Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用 ...
使用 Web Tracing Framework 分析富 JS 应用的性能
来自谷歌的 Web Tracing Framework 包含一组工具和脚本,用于 JavaScript 相关代码的性能分析.它是重 JavaScript 应用程序的理想选择,而 JavaScript ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...

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