1、先下载JSMol框架，官网下载 Jmol/JSmol Interactive Script Documentation (stolaf.edu)
2、应用JSMol 文件：
<script type="text/javascript" src="<%=BASE_URL %>jsmol/JSmol.min.js">
3、创建容器：
<div class="mol-container" ref="container" id="gldiv">
4、初始化JSMol：
var Info = {
width: 580,
height: 580,
color: '0xFFC0CB',
use: 'HTML5',
script:
"load data 'mydata'" +
res.data +
"\nend 'mydata' {1 1 1} PACKED; background black;restore orientation;set antialiasDisplay;center visible;zoom 100;wireframe 0.1;spacefill 0.4;set axesWindow ON;set axes POSITION [510 40] or ON;set unitcell RANGE {1 1 1}",
j2sPath: '/jsmol/j2s/',
readyFunction: jsmol_isReady, // 异步处理数据
}
this.cifFileData = res.data //cif文件的数据 也可以直接访问文件
var jmolApplet = Jmol.getApplet('jmolApplet', Info)
this.jmolApplet = jmolApplet
var that = this
// 获取原子与原子的键长判断是不是在成键的范围内
function jsmol_isReady() {
that.queryBondLength()
}
$('#gldiv').css('display', 'flex')
$('#gldiv').html(jmolApplet._code)
5、JSMol一些常用的属性
'mydata' {1 1 1} PACKED----设置a, b, c方向都是一个晶胞；
background #ccc|black ---- 设置背景图的颜色;
set antialiasDisplay---- 设置左上角的标识；
zoom 100 ---- 缩放比例；
wireframe 0.1;spacefill 0.4 ---- 设置球棍模式线的宽度和球的直径；
set axesWindow ON ---- 设置坐标x,y,z的展示；
set axes POSITION [510 40]----设置坐标的位置；
set unitcell RANGE {1 1 1} ----设置晶胞的个数（必须是整数，需要重新加载）；
输出效果：
