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

软件：

3dmol.js3Dmol.js

原始html

  
    
    
    
    
  
  
       
     

  
  
    

    
      

    
  


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


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

vue + element ui

index.html中引入js

vue文件中

  

    
      选取文件
    
    

  


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(f服务器托管网ile.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);
      };
    },
  },
};



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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【scikit-learn基础】–『数据加载』之玩具数据集

机器学习的第一步是准备数据，好的数据能帮助我们加深对机器学习算法的理解。 不管是在学习还是实际工作中，准备数据永远是一个枯燥乏味的步骤。scikit-learn库显然看到了这个痛点，才在它的数据加载子模块中为我们准备了直接可用的数据集。 在它的数据加载子模块中…