一个不懂化学的人，做了一个化学实验室

我和化学的关系

说实话，我高考化学考了多少分已经忘了，但清楚地记得一件事——我把「高锰酸钾」的化学式写成了 KMnO3，少了一个氧。

那年我 18 岁，发誓以后再也不碰化学。

然后在 26 岁这年，我做了一个化学实验室。

为什么

起因很简单。有一天我在网上找一个化学学习工具，找到了几个，但打开之后——

界面像是 2008 年的产物，满屏的灰色表格，字号小得像蚂蚁，3D 分子？不存在的。我心想，这年头连外卖软件都能做得那么好看，为什么化学学习工具就非得长这样？

我不服。

于是打开编辑器，决定自己做一个。

从「H2SO4 是什么」开始

第一步是搞清楚自己要做什么功能。我列了个清单：

化学反应分析（输入反应物，输出配平方程式）
化合物查询（输入化学式，输出详细信息）
有机化学（各种官能团和键结构）
3D 分子可视化（用 Three.js 做球棍模型）

然后我意识到，我连这些功能需要什么数据都不知道。

HCl + NaOH 会生成什么？H2SO4 的分子量是多少？CH3COOH 属于哪一类有机物？

好在有 AI。我让 Claude 帮我整理了 20 多个常见反应的数据——反应物、产物、配平系数、反应类型、反应原理，甚至离子方程式。又从 PubChem 和 Wikidata 拉了一堆化合物的信息。

不会化学不代表不能做化学应用。 我只需要知道数据长什么样，然后把它漂亮地展示出来。

化学引擎：五层防线

这是我最得意的部分。

一开始我想，直接把所有数据硬编码到 JS 文件里不就行了？但转念一想，化学式有无限多种组合，我不可能穷举所有。

于是设计了一个分层查询策略：

用户输入一个化学式
  → 第一层：查本地数据库（20+ 化合物，秒回）
  → 第二层：用解析器拆解化学式，算摩尔质量
  → 第三层：用推理引擎预测反应类型
  → 第四层：去 PubChem API 联网查
  → 第五层：去 Wikidata SPARQL 兜底

每一层都标注数据来源和置信度。本地数据库查到的标「已知」，推理引擎算出来的标「推断」，联网查到的标「PubChem」。

科学这件事，不能糊弄。 我宁可告诉你「这个数据我不确定」，也不会编一个看起来很对的答案。

写化学式解析器的时候，遇到了一个让我崩溃的问题——Ca(OH)2 这种带括号的化学式。括号里的 OH 要乘以 2，但括号外面可能还有其他元素。写了个 tokenizer，测试了几十种情况，总算搞定了。

那一刻我突然理解了为什么编译原理课要学词法分析——原来真的有用。

液态玻璃

界面设计我花了很长时间。

一开始想做扁平化，觉得简洁。后来改成了毛玻璃效果，觉得高级。最后看到了 Apple 的 Liquid Glass 设计语言，一拍大腿——就是这个感觉。

超透明的玻璃面板，微妙的折射效果，边缘有一圈细细的高光。浅色模式像阳光下的实验室，深色模式像深夜的化学工作站。

调 backdrop-filter 参数的时候，我试了不下 20 遍。blur(8px) 和 blur(12px) 差了 4 个像素，但视觉效果天差地别。saturate(180%) 让颜色更鲜活，saturate(200%) 就开始有点假了。

细节这种东西，用户可能说不出哪里好，但一定能感觉到哪里不对。

3D 分子：Three.js 的浪漫

这个项目里最让我有成就感的功能。

用 Three.js 做了一个球棍模型查看器——原子是球，化学键是棍，不同元素用不同颜色表示。氧是红色，氢是白色，碳是黑色，氮是蓝色。

拖拽可以旋转分子，滚轮可以缩放，还能切换轨道线框模式。看着 H2O 的分子结构在屏幕上慢慢旋转，水分子的 V 形结构清晰可见，突然觉得——

化学也可以很美。

分子坐标数据是最头疼的部分。真实的分子键角和键长数据从哪来？最后用了一套简化的球棍模型坐标，14 个常见分子手写坐标。不精确，但够用。

中英文：一个意外的工程

本来没打算做双语支持。但做到一半发现，化学数据本身就包含英文名和中文名——PubChem 的数据是英文的，国内教材是中文的。

那就顺便做了中英文切换吧。

结果这个「顺便」花了我一整天。118 个元素的中英文名、20 多个化合物的双语信息、所有界面文字的翻译……光是把「Potassium Permanganate」和「高锰酸钾」对应上就查了半天。

但做完之后觉得值得。工具应该是无国界的。

最后

项目叫「化学实验室」，是一个纯前端的交互式化学学习应用。

没有后端，打开 index.html 就能用
没有依赖，不需要 npm install
没有框架，纯 HTML/CSS/JavaScript
有 3D 分子，有化学反应分析，有化合物查询
有中英文，有深浅主题

我不知道这个工具有多少人会用。也许只有几个学化学的学生，也许只有几个想学 Three.js 的前端开发者，也许只有我自己。

但每次打开它，看到 H2O 的分子在屏幕上旋转，看到酸碱中和反应的方程式自动配平，看到液态玻璃面板在深色模式下泛着幽幽的蓝光——

我就觉得，值了。

GitHub：https://github.com/Enco-shark/chem-web
在线体验：https://enco-shark.github.io/chem-web/

高考化学没考好没关系，26 岁你可以用代码重新学一遍 🧪

Enco的小站