这是一个基于 **Three.js** (渲染) 和 **Cannon-es** (物理引擎) 的单文件 HTML 3D 台球游戏。
### 游戏特色：
1. **混沌物理**：每进一球，物理规则重置。
2. **操作方式**：
* **按住鼠标左键** 并在屏幕上拖动来蓄力（会出现瞄准线）。
* **松开鼠标** 击球（白球）。
* **旋转视角**：按住鼠标右键拖动。
3. **包含规则**：
* **重力反转**：球会飞向天花板（天花板有隐形碰撞体）。
* **台面倾斜**：重力方向改变，球会自动滚向一边。
* **尺寸错乱**：所有球的大小随机缩放（物理碰撞体也会变）。
* **隐形迷宫**：台面上随机生成看不见的障碍物。
### 代码文件
你可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。
```html
混沌台球：规则随你变
左键拖拽击球 | 右键旋转视角
```
### 玩法说明：
1. **初始化**：游戏开始时是标准的物理规则。
2. **击球**：
* 将鼠标移动到白球上，**按住鼠标左键**。
* 像拉弹弓一样向后拖动鼠标（会出现一条白线指示击球方向和力度）。
* **松开左键** 发射白球。
3. **触发混乱**：
* 只要有**彩色球**掉出台面（因为没有做复杂的球袋模型，只要球掉落到台面下方即视为进球），屏幕上方的规则提示就会改变。
* **Gravity Invert (重力反转)**：球会全部飘起来，贴在隐形的天花板上。你需要在这个状态下尝试击球（虽然很难控制）。
* **Tilt (倾斜)**：台面会向左或向右倾斜，球会自动滚动，你需要预判偏移量。
* **Random Size (尺寸错乱)**：有的球变大，有的变小，物理碰撞体积也会随之改变，导致击球线路完全不可预测。
* **Invisible Walls (隐形障碍)**：台面上会出现几个看不见的立方体，球碰到空气会反弹。
### 技术实现细节：
* **单文件结构**：所有 CSS、HTML 和 JS (ES Modules) 都在一个文件中，通过 CDN 动态加载 Three.js 和 Cannon-es。
* **物理同步**：每一帧 `world.step` 后，将 Cannon body 的位置和旋转复制给 Three.js 的 Mesh。
* **状态管理**：`triggerRandomRule` 函数负责清理上一轮的混乱状态（如删除隐形墙、重置重力），然后应用新的随机规则。
* **简化碰撞**：为了保证单文件代码简洁，没有使用复杂的 CSG 挖洞，而是通过检测球的 Y 坐标是否低于阈值来判定"进球"。