TEACHING TOOL / 通用
骰子模拟器
可视化的网页骰子——真 3D 立方体，支持 1-6 个骰子、每颗 2-6 面，可一键掷全部，也可单独点击某颗骰子再掷一次。
功能特性
- 骰子数量 — 1 到 6 个骰子自由调整
- 骰子面数 — 每颗 2 到 6 面（默认 6 面经典骰子）；面数少于 6 时，用不到的面留空
- 真 3D 立方体 — 每颗骰子是 6 个面拼成的实心立方体，带固定俯视角，落定后能直接看清朝上的点数
- 抛掷物理 — 抛起 → 空中翻滚 → 落地压扁回弹，地面阴影随高度同步缩放淡化
- 单骰独立操作 — 点击单颗骰子即可单独重掷，其余骰子不变
- 结果明细 — 显示总和与单颗点数（如
3 + 5 = 8） - 历史记录 — 保留最近 10 次掷骰结果
使用步骤
- 打开页面，默认显示 2 个 6 面骰子
- 调整「骰子数量」或「骰子面数」即可重新生成骰子
- 点击「🎲 投掷骰子」让所有骰子一起抛起
- 也可以点击单颗骰子单独重掷
- 在结果区查看点数与总和，在历史区回顾最近 10 次
快捷键
| 键位 | 作用 |
|---|---|
Space | 一次性投掷全部骰子 |
| 点击单颗骰子 | 单独投掷那颗骰子 |
技术实现
- 纯静态 — HTML + CSS + 原生 JavaScript，单文件可运行，无第三方依赖
- CSS 3D 立方体 —
.die-cube开transform-style: preserve-3d，6 个面用translateZ/rotateX|rotateY摆到立方体六个方位 - 点数与姿态绑定 — 先掷出值，再由
POSE[value]反解出「让这一面朝上」的欧拉角作为落定姿态；再加上一个随机的绕竖直轴偏航（只影响水平朝向，不影响哪个面朝上）。因此朝上的面永远等于掷出的点数，而不是靠贴图切换假装 - 俯视角 — 变换链最左侧固定一个
rotateX(-20deg)，模拟人俯视桌面。屏幕正对镜头时顶面几乎侧对镜头、读不出点数，这个固定俯角保证结果可读 - 抛掷动画 — Web Animations API 关键帧：位移/压扁走
.die-body，翻滚走.die-cube，阴影单独同步缩放；落定姿态直接写进 inline style，动画结束后自然停在终态 - 面必须用直角：面若带
border-radius，相邻面接缝处会留出小缝，背面就透出来形成一道亮缝，骰子看着像纸盒 - 刻意不加
backface-visibility: hidden：它会给每个面强制独立渲染面并做剔除，动画中渲染面裁剪偶尔算错，会在骰子周围闪出硬边矩形色块。而它本来就多余——立方体是凸体，背面投影必然被放大的正面完全覆盖 .die-body（perspective根）只做纯位移：给它加非等比scale(x, y)做压扁回弹，会让 3D 子树进入合成器的非线性变换路径，3D 内容被栅格化进带裁剪的纹理，裁剪算错同样会闪矩形。落地冲击感改由.die-shadow承担（纯 2D，不在 3D 路径上）- 降级 — 环境不支持 WAAPI 或用户开启「减少动态效果」时，直接落定到结果姿态，不播放动画
- 历史记录 — 纯前端数组维护，最多保留 10 条
适用场景
- 桌游 / 教学随机数生成
- 概率课堂演示
- 决定谁先回答问题的小工具