当周易遇见Three.js：我做了一个会摇龟壳的在线铜钱占卜

前段时间，我突然冒出一个有点“中二”但又很认真的想法——

如果用现代前端技术，去还原一次古法铜钱起卦，会发生什么？

不是简单地写个 Math.random()，然后输出一个卦名就完事。
而是：

• 有真实的随机数来源
• 有三维铜钱
• 有铜钱飞入龟壳、抖动、再摇出的过程
• 有完整六十四卦、爻辞、变卦逻辑
• 而且——纯静态部署，不需要服务器

于是，这个项目诞生了。

它叫：易经铜钱占卜 · I Ching Coin Divination

为什么不直接用 Math.random()？

说句实话，如果只是“算着玩”，Math.random() 完全够用。

但如果你认真对待占卜这件事——
那“随机”的公正性就变得有点微妙了。

所以我做了一个“三级随机数策略”：

1. ANU QRNG（量子随机数）
2. random.org（物理噪声随机数）
3. 浏览器 Web Crypto API 作为兜底

优先尝试量子随机数，失败再 fallback。

这听起来有点“杀鸡用牛刀”，
但说真的——既然是起卦，不如认真一点。

三维铜钱，不只是动画

我用 Three.js 加载 .glb 铜钱模型。

铜钱在闲置时缓慢旋转；
点击起卦后：

1. 铜钱飞入龟壳
2. 龟壳轻微抖动
3. 铜钱再次摇出
4. 显示当前爻象

整个过程其实比写卦辞还费时间。

最难的不是渲染，而是——

怎么让动画“像真的一样慢半拍”。

太快像老虎机，太慢像卡顿。
调参数调到怀疑人生。

六十四卦的编码方式

这里是我最较真的地方。

卦象使用六位二进制字符串： 键 = 下卦（三爻） + 上卦（三爻） 1 = 阳 0 = 阴 从初爻到上爻

例如：

• 屯卦（震下坎上）
  001 + 010 = 001010

• 既济（离下坎上）
  101 + 010 = 101010

严格按照“下卦在前，上卦在后”。

不重复，不错位，不偷懒。

当出现老阴（6）或老阳（9）时自动生成变卦，并展示变爻对应爻辞。

老实说，这部分写完我有点成就感。
六十四卦全部校对一遍，眼睛差点进化成八卦图。

纯静态部署：零后端

整个项目：

• 一个 index.html
• 一个 coin.glb
• 一张龟壳图
• 一个 README

没有数据库，没有 Node 后端，没有 API 服务器。

直接部署到：

• Cloudflare Pages
• Netlify
• GitHub Pages

三十秒上线。

有时候我真的觉得：

前端 + 静态托管 = 现代炼丹术。

技术栈

• Three.js r128
• GLTFLoader
• ANU QRNG API
• random.org
• Web Crypto API
• CSS 动画
• Noto Serif SC 字体

没有用框架。

不是因为框架不好，而是这个项目更适合“原教旨前端”。

写到最后我甚至有种感觉：

HTML + CSS + JS，其实已经足够优雅。

做这个项目的真实原因

一半是技术实验。
一半是兴趣。

另一半——是我一直对“随机”和“意义”这件事很感兴趣。

我们知道随机是概率。

但人类会给结果赋予解释。

而解释，本身就是意义的生成。

说得玄一点：

占卜也许不是预测未来，
而是给当下一个结构化的思考入口。

好吧，我开始有点哲学了，打住。

你可以直接体验

🔮 在线地址：

👉在线占卜→

手机和电脑都可以用。
记得用 HTTP 方式访问，不要直接打开本地文件（浏览器会拦 GLB）。

如果你刚好心里有事，不妨掷一卦看看。
就算不信，也能看看铜钱飞进龟壳那一瞬间。

有时候技术和古老智慧碰一下，
火花还挺好看的。

☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷

天行健，君子以自强不息。