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

type

Post

status

Published

date

Mar 12, 2026

slug

esp_web

summary

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,然后安装下面的三个依赖包

具体命令是：

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

即可启动项目

部署完成后会给你一个本地 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 文件

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

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

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. 参考文章

https://github.com/cyllab/CalcUS （参考了里面的 marching cubes 算法）

sobereva.com/196

https://paulbourke.net/dataformats/cube/ （cube 文件的结构）