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

     软件：

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

    原始html

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>wechattitle>
    6.     <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    7.     <meta http-equiv="Content-Security-Policy"  content="upgrade-insecure-requests">
    8.   <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
    9.   
    10.   <script src="https://3Dmol.org/build/3Dmol-min.js">script>     
    11.   <script src="https://3Dmol.org/build/3Dmol.ui-min.js">script>   
    12.  
    13.   head>
    14.   <body>
    15.     <div>
    16.     <input type="file" name="file" value="上传文件" onchange="addFile(this)" />
    17.       <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>
    18.     div>
    19.   body>
    20. html>
    21. <style>
    22.   .mol-container {
    23.     width:    75%;
    24.     height:   400px;
    25.     position: relative;
    26.   }
    27.   style>
    28.  
    29. <script>
    30.   function addFile(that){
    31.         var input = that;
    32.         var reader = new FileReader();
    33.         reader.readAsText(input.files[0]);
    34.         reader.onload = function() {
    35.             var pdbData = reader.result;
    36.             // 创建3Dmol对象
    37.             let element = $('#container-01');
    38.             var viewer = $3Dmol.createViewer(element, {
    39.                 defaultcolors : $3Dmol.rasmolElementColors
    40.             });
    41.  
    42.             // 添加分子
    43.             viewer.addModel(pdbData, "pdb");
    44.             // viewer.addModel(pdbData, "pdb").setStyle({}, {"cartoon": { color: '#17ac80'} });
    45.             // viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity':0.5, color: 'white'});
    46.  
    47.             // 旋转分子
    48.             viewer.spin("y",1);
    49.             // 在HTML页面中显示分子
    50.             viewer.zoomTo();
    51.             viewer.render();
    52.         }
    53.     }
    54.   script>

    vue + element ui

    index.html中引入js
    1.      
    2.   <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
    3.   <script src="https://3Dmol.org/build/3Dmol-min.js">script>     
    4.   <script src="https://3Dmol.org/build/3Dmol.ui-min.js">script>
    vue文件中
    1. <template>
    2.   <div class="content">
    3.     <el-upload
    4.       ref="upload"
    5.       action="alert"
    6.       :auto-upload="false"
    7.       :file-list="uploadFiles"
    8.       :on-change="loadJsonFromFile"
    9.     >
    10.       <el-button slot="trigger" size="small" type="primary">选取文件el-button>
    11.     el-upload>
    12.     <div
    13.       id="container-01"
    14.       style="height: 400px; width: 400px; position: relative"
    15.       class="viewer_3Dmoljs"
    16.       data-pdb=""
    17.       data-backgroundcolor="0xffffff"
    18.       data-style="stick"
    19.       data-ui="true"
    20.     >div>
    21.   div>
    22. template>
    23. <script>
    24. export default {
    25.   components: {},
    26.   data() {
    27.     return {
    28.       uploadFiles: [],
    29.     };
    30.   },
    31.   created() {},
    32.   methods: {
    33.     readFile(filePath) {
    34.       // 创建一个新的xhr对象
    35.       let xhr = null;
    36.       if (window.XMLHttpRequest) {
    37.         xhr = new XMLHttpRequest();
    38.       } else {
    39.         xhr = new ActiveXObject("Microsoft.XMLHTTP");
    40.       }
    41.       const okStatus = document.location.protocol === "file" ? 0 : 200;
    42.       xhr.open("GET", filePath, false);
    43.       xhr.overrideMimeType("text/html;charset=utf-8");
    44.       xhr.send(null);
    45.       return xhr.status === okStatus ? xhr.responseText : null;
    46.     },
    47.     //element删除组件上传文件成功
    48.     loadJsonFromFile(file, fileList) {
    49.       this.uploadFiles = fileList;
    50.       this.submit();
    51.     },
    52.     submit() {
    53.       // 解析上传的文件
    54.       let file = this.uploadFiles[0];
    55.       let reader = new FileReader();
    56.       reader.readAsText(file.raw);
    57.       reader.onload = (e) => {
    58.         // 读取文件内容
    59.         var pdbData = e.target.result;
    60.         // 接下来可对文件内容进行处理
    61.         console.log(pdbData);
    62.         let element = $("#container-01");
    63.         let config = { backgroundColor: "gray" };
    64.         let viewer = $3Dmol.createViewer(element, config);
    65.          添加分子
    66.         viewer
    67.           .addModel(pdbData, "pdb")
    68.           .setStyle({}, { cartoon: { color: "#17ac80" } });
    69.         viewer.addSurface($3Dmol.SurfaceType.VDW, {
    70.           opacity: 0.5,
    71.           color: "white",
    72.         });
    73.         //分子动态围绕y轴旋转
    74.         viewer.spin("y", 2);
    75.         // 在HTML页面中显示分子
    76.         viewer.zoomTo();
    77.         viewer.render();
    78.         viewer.zoom(1, 2000);
    79.       };
    80.     },
    81.   },
    82. };
    83. script>
    84.  
    85. <style>
    86. .mol-container {
    87.   width: 75%;
    88.   height: 400px;
    89.   position: relative;
    90. }
    91. style>

  • 相关阅读:
    使用http代理做网页抓取需要注意什么？
    C++&QT day7
    椭圆的矩阵表示法
    Xcode 15下，包含个推的项目运行时崩溃的处理办法
    进程最后的遗言
    下一代实时数据库：Apache Doris 【五】数据表的创建
    【MMCV】MMCV安装与踩坑
    Windows通过cmd运行快速启动应用
    2023年中国煤气节能器产量及市场规模分析[图]
    【FAQ】安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？
  • 原文地址：https://blog.csdn.net/qq_36478642/article/details/134334790