动脉粥样硬化 3D 交互可视化 · 使用说明

1这是什么

一个把动脉粥样硬化发生发展全过程做成三维交互场景的教学网页。血管壁被"剖开"展示，从内皮激活、LDL 滞留与氧化、单核细胞迁入、泡沫细胞形成，到脂质条纹与斑块并发症，共 7 个阶段依次呈现；另含 8 种关键结构的标注、4 个分子结构的三维模型，以及 8 道随堂测验。

适合：本科生 / 研究生《动脉粥样硬化学》《生物化学》《病理生理学》课堂演示，也可作为学生课后自学的交互材料。

2怎么打开 / 运行环境

• 本地：双击 atherosclerosis_3d.html，用浏览器打开即可。
• 浏览器：Chrome、Edge、Safari、Firefox 近两年的版本均可。需开启 WebGL（默认开启）。
• 屏幕：建议窗口宽度 ≥ 1280 px。窄屏（< 900 px）能打开，但顶部面板会相互挤压。
• 手机 / 平板：可以打开并触摸旋转缩放，但面板密集，体验不如桌面端，建议横屏。
• 首次加载：约 3–8 秒（视机器性能），期间显示加载动画。

3界面导览

页面共有 4 个可折叠面板，初始状态全部收起，把画面完整留给三维模型：收起时是一个带箭头的小按钮，点一下展开。所有折叠 / 展开按钮统一为 36×36 像素的立体按钮，悬停变蓝。

左上角是标题与说明文字（不可折叠）。为便于演示，脂蛋白颗粒与细胞的大小比例经过夸张处理（真实 LDL 直径约 20–28 nm，巨噬细胞直径约 10–30 μm，二者相差约千倍，无法同尺度呈现）。

4鼠标操作

页面底部有提示条：鼠标拖动旋转 · 滚轮缩放 · 点击标记查看详情。

5功能按钮速查

展开右上「功能」面板后可见（均为开关式，高亮蓝底表示已开启）：

6七个病变阶段

右上「病变进展阶段」列表，或点「演化播放」自动依次演示：

7八种结构标注

底部「结构」面板中每个按钮对应一种结构，点击可单独显示 / 隐藏；场景里的彩色小球同时带中英文标签。

8教学使用建议

• 开场：保持面板全部收起，先让学生看整体形态；再逐个展开，避免信息一次性倾泻。
• 讲机制：直接点「演化播放」，配顶部进度条逐阶段讲解，比手动翻页连贯。
• 看内部：用「剖面切割」把血管纵向切开，配合「脂质核心」「纤维帽」两个结构开关，讲清楚"稳定斑块 vs 易损斑块"。
• 联系用药：点「分子结构」调出 HMG-CoA 还原酶（他汀靶点）、PCSK9（单抗靶点）、LDL 受体、ApoA-I，把形态学与药理串起来。
• 课堂点检：结束前 5 分钟开「交互测验」，8 题即时判分。
• 双语课：点「中 / EN」整体切换，标签、解说、机制图同步变化。

9常见问题排查

10上传部署

放到网站目录

把 atherosclerosis_3d.html 上传到站点任意目录即可，无需其他文件。建议文件名保持英文。

# 例：rsync 上传（按实际路径修改）
rsync -avz atherosclerosis_3d.html user@server:/var/www/yuyanglab/as_3d.html

# nginx 建议配置（开启压缩与 UTF-8）
location ~* \.html$ {
    charset utf-8;
    gzip on;
    gzip_types text/html;
    add_header Cache-Control "no-cache";
}

在已有页面里嵌入

也可以不做独立页面，用 iframe 挂进现有网页（建议高度 ≥ 720 px）：

<iframe src="atherosclerosis_3d.html"
        style="width:100%;height:760px;border:0;border-radius:12px;"
        loading="lazy" allowfullscreen></iframe>

对外发布时需注意