3dmol嵌入到web项目中并在html页面显示.pdb文件

weixin_45761641

1250人浏览 · 2024-01-11 16:40:42

weixin_45761641 · 2024-01-11 16:40:42 发布

最近要做一个有关蛋白质靶点的网站，但在显示以.pdb作为后缀的文件上我先后尝试了几个，搜索后没有教程或者教程很少，（例如ChemDoodleWeb-9.5.0，这个我尝试着使用但发现js代码不知道为什么有问题vue项目启动不了），之后我找到了这个3dmol发现网上是有很多关于这个的教程的，因此我是用这个也成功了，把我的代码分享出来和大家看一下。（<script src="https://3Dmol.org/build/3Dmol-min.js"></script>这个我在vue界面使用一直报错，迫不得已放在了html页面中，通过iframe实现vue和html页面的数据交互）。
显示pdb数据是loadView2
window.addEventListener通过vue页面获取pdb文件名称并从后端进行查询

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://3Dmol.org/build/3Dmol-min.js"></script>
</head>
<body>


<!-- 添加一个容器用于显示3D视图 -->
<div id="container-01" style="width: 100%; height: 600px;"></div>

<script>
  var firstFruit;
  var data;
  window.addEventListener('message', function(event) {
    // 验证消息来源，可以根据需要进行更严格的验证  ...
    // 获取传递过来的参数
    firstFruit = event.data.firstFruit;
    console.log("Received firstFruit: ", firstFruit);
    // 根据 firstFruit 请求后端文件信息
    $.ajax({
      url: 'http://localhost:8081/file/getFile/' + firstFruit,
      type: 'GET',
      success: function(response) {
        // console.log("File info received: ", response);
        data=response;
        loadView2();
        // 在这里处理后端返回的文件信息
      },
      error: function(error) {
        console.log("Error fetching file info: ", error);
      }
    });

  });



  function loadView2() {

      // console.log(data);
      // 获取3D视图的容器
    // 获取3D视图的容器
    var element = $('#container-01');

    // 清空容器，以便重新加载新的3D视图
    element.empty();

    // 创建3D视图
    let config = { backgroundColor: 'gray' };
    let viewer = $3Dmol.createViewer(element, config);

    // 添加PDB模型
    viewer.addModel(data, "pdb").setStyle({}, {"cartoon": { color: '#17ac80'} });

    // 添加VDW表面
    viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity': 0.5, color: 'white'});

    // 调整视图并渲染
    viewer.zoomTo();
    viewer.render();
    viewer.zoom(1, 2000);
    }

</script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模