使用3dmol.js渲染大分子-读取pdb并渲染

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}});