网页端可视化分子表面静电势

wxyhgk

做计算化学的人经常需要看分子表面静电势（ESP）分布，传统流程一般是软件算完数据再丢到 Gaussian View/VMD等软件里渲染，
操作步骤多，而且没法方便地交互式探测具体数值，此外如果涉及到公司里面批量绘图会及其浪费时间

MEP_Web 就是为了解决这个问题：上传一对 cube 文件，浏览器里直接看表面静电势，能调参数、能探测数值、能看统计，不用装任何桌面软件，完全的跨平台，跨设备。

感谢 GPT ，Claude 系列模型对本项目的大力支持


下载地址：
MEP_WEB-main.zip (4.54 MB, 下载次数 Times of downloads: 16)

2026-3-12 17:29 上传 Uploaded

点击下载
Click to download

---

1. 核心功能

1.1 表面静电势可视化

后端读取密度 cube 文件，用 marching cubes 算法生成等值面，再把电势 cube 的数据插值映射到表面上。

配色方面，我沿用 Gaussian View 的配色方案。但受限于 3Dmol.js 较老的渲染框架，打光等效果做不出来。

1.2 实时参数调节

左侧面板可以直接调节密度等值面阈值、电势映射范围、表面透明度、采样间距等参数，改完立即重新渲染，不用刷新页面。

1.3 ESP 极值点标注

自动识别分子表面的 ESP 极大值和极小值点，直接在 3D 视图上标注具体数值（单位 kcal/mol），一眼就能看出哪里最容易发生亲核/亲电反应。

1.4 交互式探测模式

开启探测模式后，鼠标悬停在分子表面任意位置会实时显示该处的 ESP 值；点击可以放置永久标记点，标记颜色跟随当前色标，大小也可以自己调。适合精确定位感兴趣的位点。

1.5 统计分析面板

右侧面板自动计算并展示一系列定量指标：

- 分子表面积、体积
- ESP 最大值、最小值、均值、方差
- 正电势区域面积 vs 负电势区域面积
- 极性区域面积 vs 非极性区域面积

还支持在 ESP 分布直方图上选中某个区间，3D 视图中对应区域会自动高亮，方便对比分析不同电势范围对应的表面位置。

1.6 自定义数据源

除了从预设列表中选择分子，还可以直接上传自己的 `density` cube 文件和 `potential` cube  文件对，上传后立刻参与后端计算并渲染，不需要重启服务。

---

2. 使用流程

2.1 服务的运行

首先电脑上需要安装 Python 环境，Python 版本 ≥ 3.6,然后安装下面的三个依赖包

1. - Flask

复制代码

具体命令是：

1. # 安装依赖

复制代码

下载项目之后，使用 cd 进入到 backend 文件夹里面，然后在文件夹里面执行：

1. python3 server.py

复制代码

即可启动项目

部署完成后会给你一个本地 ip(127.0.0.1) 和局域网ip(192.168.10.124) 和端口，使用局域网 ip ，只要是连上同一个 WiFi 都能直接打开网页

2.2 使用 cubegen 生成 cube 文件

这里以 Gaussian 16 的 `cubegen` 工具为例，说明如何从 DFT 计算结果生成所需的 cube 文件。其他量化软件（如 ORCA、xTB 等）也能产生格式兼容的 cube 文件，流程类似。

`cubegen` 需要 `.fchk`文件作为输入，跑完 Gaussian 计算后记得先用 `formchk` 转换一下。

步骤 1：生成静电势 cube 文件

1. cubegen 10 Potential name.fchk name_potential.cube 0 h

复制代码

其中 `10` 是并行核数，核数越多生成越快；`0 h` 表示使用默认格点密度。

步骤 2：生成电子密度 cube 文件

1. cubegen 10 Density=SCF name.fchk name_density.cube 0 h

复制代码

`Density=SCF` 指定使用 SCF 密度，如果是 post-HF 方法（如 MP2），可以换成 `Density=MP2` 等。

生成的 `name_potential.cube` 和 `name_density.cube` 就是上传到 MEP_Web 所需的文件对。

2.3 前端上传文件

3 . 技术实现

整体是前后端分离的轻量架构：

- 前端：原生 HTML/CSS/JS + 3Dmol.js（3D 分子渲染）+ Chart.js（直方图），没用任何重型框架
- 后端：Python Flask，核心计算依赖 numpy 和 scikit-image（marching cubes），解析 cube 文件后返回表面网格、ESP 插值数据和统计结果
- 数据流：前端发请求 → 后端读 cube、算表面、插值电势、找极值 → 返回 JSON → 前端用 3Dmol.js 渲染

页面布局是三栏结构：左侧参数面板、中间 3D 视图、右侧统计面板，参数调节和结果分析互不干扰。

我把整体搞得比较轻量，主要是为了方便大家二次开发。你也可以自己搭一个数据源或数据库，配合 FastAPI 做自动上传和网页端可视化之类的功能。这块用 AI 编程就能实现，我这里是抛砖引玉一下。

4. 参考文章


1. https://github.com/cyllab/CalcUS（参考了里面的 marching cubes 算法）
2.http://sobereva.com/196
3. https://paulbourke.net/dataformats/cube/（cube 文件的结构）

yzh

感谢楼主，如能够增加手动保存高DPI图片的功能就更加完美了。