这是一个包含完整逻辑的单文件HTML代码。通过结合 **Three.js** (渲染) 和 **Cannon-es** (物理引擎) 实现了你要求的3D台球游戏及情绪系统。
### 游戏特色说明：
1. **物理引擎**：使用 Cannon-es 模拟真实的碰撞、滚动和反弹。
2. **情绪系统**：
* **愤怒 (红)**：只要在移动，就会随机产生加速冲量，且阻力极小，非常暴躁。
* **忧郁 (蓝)**：阻力极大，移动像是在泥沼中，很快就会停下。
* **兴奋 (黄)**：碰撞时会获得额外的反弹力，导致轨迹难以预测。
3. **传染机制**：当两球碰撞时，动能较大（更强势）的一方会将自己的情绪“传染”给另一方。
4. **UI显示**：每颗球上方都有跟随的HTML血条/情绪条，显示当前情绪颜色。
5. **操作**：按住鼠标左键拖拽来蓄力，松开打击母球（白球）。
### 代码文件 (index.html)
你可以直接将以下代码保存为 `.html` 文件并在浏览器中打开（建议使用 Chrome 或 Edge）。
```html
情绪台球 3D
情绪台球
拖拽鼠标蓄力，松开击打白球。
愤怒: 暴躁加速，难以控制
忧郁: 移动缓慢，极易停滞
兴奋: 强力反弹，轨迹诡异
规则: 碰撞时，动能大的球会传染情绪。
```
### 如何运行：
1. 将上述代码复制并保存为 `game.html`。
2. 双击文件或在浏览器中打开。
3. **操作方式**：
* **击球**：鼠标点击并拖拽（类似愤怒的小鸟的操作方式），松开鼠标即可击打白球。
* **视角**：按住鼠标左键（非击球时）旋转视角，滚轮缩放。
### 核心逻辑解析：
1. **Ball 类 (The Ball Class)**:
* 这是一个封装类，同时包含 `THREE.Mesh` (视觉模型) 和 `CANNON.Body` (物理刚体)。
* `update()` 方法每帧调用，将物理位置同步给视觉模型，并根据 `emotionKey` 执行特殊逻辑。
2. **情绪行为 (Emotion Behaviors)**:
* **愤怒 (ANGRY)**: 在 `update()` 中，如果球有速度，会给它施加随机方向的微小力 (`body.applyForce`)，模拟“失控”和“抖动”。同时它的 `linearDamping` (线性阻尼) 很低。
* **忧郁 (SAD)**: `linearDamping` 设置得很高 (0.8)，导致它在物理世界中像是在粘稠液体里运动。
* **兴奋 (EXCITED)**: 在 `handleCollision` 中，如果检测到碰撞，会给球体一个额外的速度缩放 (`velocity.scale(1.2)`)，模拟超高弹性系数，使其越撞越快或反弹剧烈。
3. **情绪传染 (Contagion)**:
* 在 `handleCollision` 事件中，比较两个碰撞球体的速度。
* 如果 `speed > otherSpeed * 1.2` (快20%以上)，则判定为强势方，将强势方的 `emotionKey` 赋值给弱势方，并调用 `setEmotion` 更新颜色和物理属性。
4. **UI 同步**:
* 使用 `vector.project(camera)` 将球的3D坐标转换为屏幕2D坐标，实时更新 HTML DOM 元素的位置，实现血条跟随效果。