1、安装3dmol
通过script标签引入
<script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js" exclude></script>
2、读取pdb并渲染
官方文档： Tutorial: Using 3Dmol within your code
html:
<div class="LAMMPS_img"></div>
js:
const element = this.$el.querySelector('.LAMMPS_img');
let config = { backgroundColor: "gray" };
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 );
},
});
部分参数详解
添加表面层：
表示蛋白质一般会加一层表面层。
viewer.addSurface($3Dmol.SurfaceType.VDW, {
opacity: 0.5, // 透明度
color: "yellow", // 表面层的颜色
});
没有表面层
加了表面层
设置背景透明
viewer.setBackgroundColor(0, 0, 0);
棍的大小 - stick
1是标准大小
viewer.setStyle({}, {stick: {radius: 1}});
球的大小 - sphere
1是标准大小
viewer.setStyle({}, {sphere: {radius: 1}});
