一百万美元到底长什么样？我制作了一个3D工具来找答案。

Source: Dev.to

问题

几个月前，我的联合创始人 Moris 问了我一个我答不出来的问题：“如果现在有人直接给你一百万美元，它到底会占多大空间？”

我们意识到，互联网上大多数的“金钱”工具只是数字表格。数字在电子表格里固然好用，但它们完全无法展示尺度。只有看到实物体积，你才能真正感受到 10,000 美元和 100,000 美元之间的差别。

Money Visualiser

过去几个月里，我们构建了 Money Visualiser，一个基于 WebGL（正在开发 WebGPU）的沙盒，你可以输入金额，选择两种货币，然后观看钱币以 3D 纸币堆的形式出现。我们从央行规范中提取了 82 种不同纸币的精确尺寸，所以日元纸币的堆看起来会比美元纸币更宽更高——就像现实中一样。

工作原理

• 堆叠逻辑 – 我们使用银行标准的“捆绑”和“砖块”，使堆叠行为完全符合金库中存放纸币的方式。
• 尺度 – 环境中包含一个“航空母舰”场景，足够大到可以展示一万亿美元的体积而不会穿墙。

技术细节

• 框架 – Next.js 16（App Router）配合 Three.js 和 React‑Three‑Fiber。
• 物理 – 基于真实纸币处理的自定义堆叠算法。
• 性能 – 渲染 30 万+ 张单独纸币，保持 60 fps。
• 实时数据 – 汇率每 30 秒刷新一次，采用 5 层回退系统。

在线演示

访问 moneyvisualiser.com 体验。无需注册，也没有任何陷阱——只是一个让抽象数字更具真实感的项目。我很想听听其他开发者对我们使用的 Drei/R3F 设置的看法。