原始html和vue中使用3dmol js展示分子模型，pdb文件

暗夜潜行

已于 2023-11-16 08:57:16 修改

阅读量1.2k

点赞数 1

文章标签： 3dmol js

于 2023-11-10 15:43:54 首次发布

本文链接：https://blog.csdn.net/qq_36478642/article/details/134334790

版权

软件：

3dmol.js https://3dmol.csb.pitt.edu/doc/

原始html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>wechat</title>
    <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>
  <!-- 3d模型展示 -->
  <script src="https://3Dmol.org/build/3Dmol-min.js"></script>     
  <script src="https://3Dmol.org/build/3Dmol.ui-min.js"></script>   

  </head>
  <body>
    <div>
    <input type="file" name="file" value="上传文件" onchange="addFile(this)" />
      <div id="container-01" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-style='stick' data-ui='true'></div>
    </div>
  </body>
</html>
<style>
  .mol-container {
    width:    75%;
    height:   400px;
    position: relative;
  }
  </style>

<script>
  function addFile(that){
        var input = that;
        var reader = new FileReader();
        reader.readAsText(input.files[0]);
        reader.onload = function() {
            var pdbData = reader.result;
            // 创建3Dmol对象
            let element = $('#container-01');
            var viewer = $3Dmol.createViewer(element, {
                defaultcolors : $3Dmol.rasmolElementColors
            });

            // 添加分子
            viewer.addModel(pdbData, "pdb");
            // viewer.addModel(pdbData, "pdb").setStyle({}, {"cartoon": { color: '#17ac80'} });
            // viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity':0.5, color: 'white'});

            // 旋转分子
            viewer.spin("y",1);
            // 在HTML页面中显示分子
            viewer.zoomTo();
            viewer.render();
        }
    }
  </script>

vue + element ui

index.html中引入js

     <!-- 3d模型展示 -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://3Dmol.org/build/3Dmol-min.js"></script>     
  <script src="https://3Dmol.org/build/3Dmol.ui-min.js"></script>

vue文件中

<template>
  <div class="content">
    <el-upload
      ref="upload"
      action="alert"
      :auto-upload="false"
      :file-list="uploadFiles"
      :on-change="loadJsonFromFile"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <div
      id="container-01"
      style="height: 400px; width: 400px; position: relative"
      class="viewer_3Dmoljs"
      data-pdb=""
      data-backgroundcolor="0xffffff"
      data-style="stick"
      data-ui="true"
    ></div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      uploadFiles: [],
    };
  },
  created() {},
  methods: {
    readFile(filePath) {
      // 创建一个新的xhr对象
      let xhr = null;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      const okStatus = document.location.protocol === "file" ? 0 : 200;
      xhr.open("GET", filePath, false);
      xhr.overrideMimeType("text/html;charset=utf-8");
      xhr.send(null);
      return xhr.status === okStatus ? xhr.responseText : null;
    },
    //element删除组件上传文件成功
    loadJsonFromFile(file, fileList) {
      this.uploadFiles = fileList;
      this.submit();
    },
    submit() {
      // 解析上传的文件
      let file = this.uploadFiles[0];
      let reader = new FileReader();
      reader.readAsText(file.raw);
      reader.onload = (e) => {
        // 读取文件内容
        var pdbData = e.target.result;
        // 接下来可对文件内容进行处理
        console.log(pdbData);
        let element = $("#container-01");
        let config = { backgroundColor: "gray" };
        let viewer = $3Dmol.createViewer(element, config);
         添加分子
        viewer
          .addModel(pdbData, "pdb")
          .setStyle({}, { cartoon: { color: "#17ac80" } });
        viewer.addSurface($3Dmol.SurfaceType.VDW, {
          opacity: 0.5,
          color: "white",
        });
        //分子动态围绕y轴旋转
        viewer.spin("y", 2);
        // 在HTML页面中显示分子
        viewer.zoomTo();
        viewer.render();
        viewer.zoom(1, 2000);
      };
    },
  },
};
</script>

<style>
.mol-container {
  width: 75%;
  height: 400px;
  position: relative;
}
</style>