1怔毛、安裝3dmol
通過(guò)script標(biāo)簽引入
<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 );
},
});
部分參數(shù)詳解
添加表面層：
表示蛋白質(zhì)一般會(huì)加一層表面層。
viewer.addSurface($3Dmol.SurfaceType.VDW, {
opacity: 0.5, // 透明度
color: "yellow", // 表面層的顏色
});
沒有表面層
加了表面層
設(shè)置背景透明
viewer.setBackgroundColor(0, 0, 0);
棍的大小 - stick
1是標(biāo)準(zhǔn)大小
viewer.setStyle({}, {stick: {radius: 1}});
球的大小 - sphere
1是標(biāo)準(zhǔn)大小
viewer.setStyle({}, {sphere: {radius: 1}});
