⚛️ 电子云形状可视化工具 - Electron Cloud Visualizer

一个交互式的电子云形状可视化工具，用于展示氢原子和类氢原子的电子云概率密度分布。这个工具专为化学、物理学习者和教育者设计，提供直观的 3D 和 2D 可视化。

✨ 核心功能

1. 🎨 3D 电子云可视化

• 使用 Three.js 粒子系统渲染电子云的三维概率密度分布
• 支持所有氢原子轨道类型：s, p, d, f 轨道
• 实时交互控制：旋转、平移、缩放
• 半透明、发光的视觉效果，真实展现电子云特性

2. 📊 2D 截面可视化

• 显示电子云在 XY 平面的密度分布热力图
• 使用颜色梯度直观表示概率密度
• 与 3D 视图实时同步更新

3. 📐 波函数公式展示

• 使用 KaTeX 渲染专业的数学公式
• 显示完整的波函数 ψ(r, θ, φ)
• 分别展示径向部分 R(r) 和角向部分 Y(θ, φ)
• 实时更新对应当前选中的量子态

4. 🎛️ 量子数选择

• 原子选择：氢 (H)、氦离子 (He⁺)、锂离子 (Li²⁺)
• 主量子数 (n)：1-4
• 角量子数 (l)：根据 n 自动更新可用选项
• 磁量子数 (m)：从 -l 到 +l

5. 🎨 可视化定制

• 粒子数量：5,000 - 100,000（影响渲染精度）
• 透明度调节：0.1 - 1.0
• 粒子大小：1 - 5
• 颜色选择：自定义电子云颜色

🚀 快速开始

方法一：直接在浏览器中打开（推荐）

1. 下载项目文件：

   git clone <repository-url>
   cd electroncloudshape

2. 直接打开 HTML 文件：

   • 在文件管理器中找到 index.html
   • 双击文件，用浏览器打开
   • 或右键选择"使用浏览器打开"

3. 开始探索：

   • 选择不同的量子数
   • 观察电子云形状变化
   • 调整视觉参数

方法二：使用本地服务器

如果直接打开遇到问题，可以使用本地服务器：

# 使用 Python 3
python -m http.server 8000

# 使用 Python 2
python -m SimpleHTTPServer 8000

# 使用 Node.js (需要安装 http-server)
npx http-server

然后在浏览器中访问 http://localhost:8000

📁 项目结构

electroncloudshape/
├── index.html          # 主 HTML 文件（包含 UI 结构和样式）
├── orbital-math.js     # 量子力学波函数计算模块
├── app.js             # 主应用程序（3D/2D 可视化和交互）
└── README.md          # 项目说明文档

🔧 技术栈

核心库（通过 CDN 加载）

库名	版本	用途
Three.js	r128	3D 图形渲染
KaTeX	0.16.9	LaTeX 数学公式渲染
Tailwind CSS	Latest	UI 样式框架

依赖说明

所有外部依赖都通过 CDN 自动加载，无需安装：

<!-- Three.js 核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<!-- Three.js 轨道控制器 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<!-- KaTeX 数学公式渲染 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

🎓 量子力学背景

氢原子波函数

电子在原子中的状态由波函数 ψ(r, θ, φ) 描述，满足薛定谔方程：

ψ_nlm(r, θ, φ) = R_nl(r) · Y_l^m(θ, φ)

其中：

• R_nl(r)：径向波函数，依赖于 n 和 l
• Y_l^m(θ, φ)：球谐函数，描述角向分布

量子数意义

• n（主量子数）：决定能级和电子云大小（n = 1, 2, 3, ...）
• l（角量子数）：决定轨道形状（0 = s, 1 = p, 2 = d, 3 = f）
• m（磁量子数）：决定轨道空间取向（-l ≤ m ≤ l）

概率密度

粒子分布表示 |ψ|²，即电子在某位置出现的概率密度。粒子越密集的区域，表示电子出现的概率越大。

🎮 使用说明

3D 视图控制

• 旋转：鼠标左键拖动
• 平移：鼠标右键拖动（或 Shift + 左键）
• 缩放：鼠标滚轮
• 重置视角：点击"🔄 重置视角"按钮

选择量子态

1. 在左侧面板选择原子类型
2. 选择主量子数 n
3. 点击相应的角量子数 l（s, p, d, f）
4. 选择磁量子数 m
5. 电子云会自动更新

调整视觉效果

• 粒子数量：更多粒子 = 更精细（但更慢）
• 透明度：调节电子云的可见度
• 粒子大小：调节粒子显示大小
• 颜色：自定义电子云颜色

🌟 特色轨道示例

s 轨道（球形）

• 1s：基态，完美的球形
• 2s：有一个径向节点
• 3s：有两个径向节点

p 轨道（哑铃形）

• 2p：经典哑铃形状
• 3p：更大，有径向节点

d 轨道（复杂形状）

• 3d：四叶草形、双哑铃形等
• 不同的 m 值产生不同的空间取向

📊 性能优化

推荐设置

使用场景	粒子数量	说明
快速预览	5,000 - 10,000	流畅，适合探索
平衡模式	20,000 - 30,000	推荐设置
高质量	50,000 - 100,000	详细，可能较慢

性能提示

• 较大的 n 值需要更多粒子才能清晰显示
• 如果 FPS 过低，减少粒子数量
• 关闭其他浏览器标签页以获得更好性能

🔬 算法说明

波函数计算

1. 径向波函数 R_nl(r)

   • 使用广义拉盖尔多项式
   • 考虑归一化因子
   • 适配类氢原子（不同核电荷 Z）

2. 球谐函数 Y_l^m(θ, φ)

   • 使用连带勒让德多项式
   • 实球谐函数（用于实数可视化）
   • 正确的归一化

3. 概率密度采样

   • 使用拒绝采样（Rejection Sampling）
   • 根据 |ψ|² 分布生成粒子
   • 自适应确定采样范围

🎨 UI 设计特点

• 现代渐变背景：紫色系渐变，突出科学美感
• 毛玻璃效果：半透明面板，提升视觉层次
• 响应式布局：适应不同屏幕尺寸
• 平滑动画：所有交互都有流畅的过渡效果
• 清晰的视觉层次：控制区、视图区、信息区分明确

🐛 已知限制

1. 仅支持类氢原子：多电子原子需要数值方法，未实现
2. 实数波函数：为可视化简化，使用实球谐函数
3. 性能限制：大量粒子可能导致低端设备卡顿
4. 浏览器兼容性：需要支持 WebGL 的现代浏览器

🌐 浏览器兼容性

推荐使用以下浏览器：

• ✅ Chrome / Edge (推荐)
• ✅ Firefox
• ✅ Safari (macOS/iOS)
• ⚠️ 需要 WebGL 支持

📚 扩展建议

未来可能的功能

• 动画模式：显示电子云的时间演化
• 更多原子：简单分子的分子轨道
• 导出功能：保存截图或 3D 模型
• VR 支持：沉浸式体验
• 教学模式：内置教程和说明

🤝 贡献

欢迎提交问题和改进建议！

📄 许可证

MIT License - 自由使用、修改和分发

👨‍🔬 教育用途

这个工具特别适合：

• 化学/物理教师：课堂演示电子云形状
• 学生：直观理解量子力学概念
• 自学者：探索原子结构
• 科普工作者：制作教育材料

💡 提示与技巧

1. 理解 s 轨道：从 1s、2s、3s 开始，观察径向节点
2. 探索 p 轨道：注意不同 m 值的空间取向
3. 对比不同原子：He⁺ 和 Li²⁺ 的电子云更紧凑（Z 更大）
4. 使用颜色编码：不同轨道类型用不同颜色区分
5. 观察对称性：注意电子云的对称性和节点

---

开始探索量子世界吧！ ⚛️✨

如有问题或建议，欢迎反馈。