前端代码：新年魔方骰，WebGL 掷骰子互动效果

一键掷出 3D 金色骰子，伴随丝滑阴影与物理弹跳，像新年仪式般为活动、抽奖或游戏开场增添仪式感。背景使用柔和暖金与质感渐变，营造节庆氛围；圆形按钮与品牌徽章呼应“KS主题”，整体轻盈且易于嵌入各类页面。

• 核心亮点：Three.js + Cannon‑es 物理模拟，真实滚动/碰撞；双骰同步得分展示；高分辨率阴影与圆角 UI，移动端同样流畅。
• 设计风格：暖金主色、半透明玻璃质感徽章、圆形 CTA 按钮，兼具俏皮与礼仪感，适合节日营销或抽奖互动。
• 适用人群：品牌活动页、游戏启动页、直播抽奖、线下活动扫码抽奖、课程/讲座暖场互动等需要“开箱即用”的掷骰模块。

使用说明

1. 在http协议下访问 index.html，所有 JS/CSS/图片已本地化，无需外网资源。
2. 修改品牌：替换 index.html 中 .brand-badge 文案或链接。
3. 更换背景：用同名文件替换 assets/bg.jpg，或在 style.css 的 .container 中调整背景路径。
4. 调整骰子数量/弹力：在 script.js 顶部的 params.numberOfDice、physicsWorld 重力/弹性参数中自定义。
5. 按钮文案/样式：在 index.html 修改文本，style.css 调整颜色、圆角或阴影。

技术栈与结构

• 纯前端实现，基于 ES Module 的 Three.js、Cannon‑es，本地化依赖位于 libs/。
• 场景/物理：script.js 负责渲染器、相机、光源、物理世界与骰子几何。
• 样式：style.css 定义布局、背景、按钮与徽章风格。
• 资源：assets/ 存放背景图，可按需替换。

拓展建议

• 想要节奏更劲爆，可提高 applyImpulse 的力度或为按钮加上音效/震动。
• 需要固定点数抽奖，可在 showRollResults 里加入脚本控制或预设点数逻辑。
• 想要更多交互（如键盘触发、自动循环播放），可在 throwDice 外再封装事件或计时器。

本地运行教程