# 机械屏优化方案

## 📋 需求分析

### 1. 屏幕高度一致时，没有接缝
**问题**：当前单元之间有 gap=2 的间隙，即使高度一致也能看到缝隙

**方案**：
- 将 `gap` 从 2 改为 0
- 单元之间紧密贴合
- 高度一致时完全无缝

**代码修改**：
```javascript
const CONFIG = {
    columns: 34,
    rows: 4,
    unitSize: 50,
    gap: 0,  // 从 2 改为 0
    maxDepth: 100
};
```

---

### 2. 屏幕伸出的 4 个露出面用灰色
**问题**：当前立方体是 BoxGeometry，6 个面都是同一材质（显示视频/图片）

**方案 A**：使用多材质数组
```javascript
// 6 个面分别设置材质
const materials = [
    grayMaterial,      // 右侧面（+X）灰色
    grayMaterial,      // 左侧面（-X）灰色
    grayMaterial,      // 顶面（+Y）灰色
    grayMaterial,      // 底面（-Y）灰色
    videoMaterial,     // 前面（+Z）显示视频
    grayMaterial       // 后面（-Z）灰色
];
const mesh = new THREE.Mesh(geometry, materials);
```

**方案 B**：使用 MeshStandardMaterial（推荐）
```javascript
// 灰色材质
const sideMaterial = new THREE.MeshStandardMaterial({
    color: 0x444444,
    metalness: 0.3,
    roughness: 0.7
});

// 前面材质（显示视频）
const frontMaterial = new THREE.MeshStandardMaterial({
    map: texture,
    color: 0xffffff
});

// 组合材质
const materials = [
    sideMaterial,     // 右
    sideMaterial,     // 左
    sideMaterial,     // 上
    sideMaterial,     // 下
    frontMaterial,    // 前（显示内容）
    sideMaterial      // 后
];
```

**效果**：
- 前面显示视频/图片
- 其他 4 个侧面 + 后面 = 深灰色（0x444444）
- 当方块伸出时，露出的侧面清晰可见

---

### 3. 默认屏幕正对观众
**问题**：当前初始相机角度是 `theta: Math.PI / 2, phi: Math.PI / 3`，从斜侧面看

**方案**：调整初始相机位置
```javascript
// 当前（斜侧面）
cameraAngle = { theta: Math.PI / 2, phi: Math.PI / 3 };

// 改为正对（从前方看）
cameraAngle = { theta: 0, phi: Math.PI / 2 };
// 或者直接设置相机位置
camera.position.set(0, 0, 2500);  // Z 轴正方向，正对屏幕
camera.lookAt(0, 0, 0);
```

**效果**：
- 打开程序后，屏幕正面朝向用户
- 看到完整的 34×4 矩形网格
- 可以清楚看到视频内容

---

### 4. 增加 Reset 按钮
**位置**：放在缩放面板旁边或控制按钮栏

**功能**：
- 点击后相机恢复到正对屏幕的初始位置
- 只重置角度，不改变缩放距离

**代码实现**：
```javascript
function resetCamera() {
    // 只重置角度，保持当前距离
    cameraAngle.theta = 0;
    cameraAngle.phi = Math.PI / 2;
    updateCameraPosition();
}
```

**按钮位置方案**：

**方案 A**：放在缩放面板右侧
```
[−]  ━━━━●━━━━  [+]  100%  [Reset]
```

**方案 B**：放在底部控制栏
```
[加载视频][加载图片][播放][全选][清除] [Reset视角]
```

**推荐**：方案 A（更接近相关功能）

---

### 5. 正面对着观众时，让伸缩效果更明显
**问题**：正面看时，Z 轴深度变化不明显（透视效果小）

**方案 A**：增加透视效果（调整 FOV）
```javascript
// 当前 FOV = 45
camera = new THREE.PerspectiveCamera(45, aspect, 1, 10000);

// 改为更大的 FOV，增强透视感
camera = new THREE.PerspectiveCamera(60, aspect, 1, 10000);
```
- FOV 越大，透视畸变越明显
- 前后深度差异更容易看出

**方案 B**：增加单元深度厚度
```javascript
// 当前厚度 = 10
const geometry = new THREE.BoxGeometry(unitSize, unitSize, 10);

// 改为更厚，侧面更明显
const geometry = new THREE.BoxGeometry(unitSize, unitSize, 20);
```
- 单元更厚，伸出时侧面更大
- 灰色侧面更明显

**方案 C**：增加光照对比（推荐）
```javascript
// 添加方向光，从前方照射
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 0, 1000);
scene.add(directionalLight);

// 侧面材质使用 MeshStandardMaterial
// 当单元伸出时，侧面因为角度不同而产生阴影变化
```
- 前面亮，侧面暗
- 深度变化产生明暗对比
- 视觉效果更强烈

**方案 D**：添加边缘高光
```javascript
// 为每个单元添加边缘线
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(
    edges,
    new THREE.LineBasicMaterial({ color: 0x222222 })
);
mesh.add(line);
```
- 单元边缘有黑线描边
- 深度层次更清晰

**方案 E**：组合方案（最佳）
```javascript
// 1. 增加厚度到 20
const geometry = new THREE.BoxGeometry(unitSize, unitSize, 20);

// 2. 侧面用灰色材质（有金属感）
const sideMaterial = new THREE.MeshStandardMaterial({
    color: 0x333333,
    metalness: 0.4,
    roughness: 0.6
});

// 3. 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(0, 0, 1000);

// 4. 增大运动幅度（用户可调）
// 默认振幅从 50 改为 70
```

---

## 📊 方案对比

| 需求 | 方案 | 优点 | 缺点 |
|------|------|------|------|
| **无接缝** | gap=0 | 简单直接 | 无 |
| **灰色侧面** | 多材质数组 | 标准方案 | 需调整材质数组顺序 |
| **正对观众** | 调整初始角度 | 即改即用 | 无 |
| **Reset按钮** | 放缩放面板旁 | 功能集中 | 占用空间 |
| **伸缩明显** | 组合方案 | 效果最佳 | 实现稍复杂 |

---

## 🎯 推荐实施方案

### 优先级 1（必须）
1. ✅ **gap = 0**（无接缝）
2. ✅ **多材质**（灰色侧面）
3. ✅ **初始角度调整**（正对观众）
4. ✅ **Reset 按钮**（放缩放面板右侧）

### 优先级 2（增强效果）
5. ✅ **厚度 20**（侧面更明显）
6. ✅ **方向光**（明暗对比）
7. ✅ **金属质感**（灰色材质）

### 优先级 3（可选）
8. ⭕ **边缘线**（如果需要更清晰）
9. ⭕ **FOV 调整**（如果透视不够）

---

## 🔧 实施步骤

### 步骤 1：修改基础配置
```javascript
gap: 0,              // 无接缝
depth: 20            // 增加厚度
```

### 步骤 2：创建多材质系统
```javascript
function createMaterials(texture) {
    const sideMaterial = new THREE.MeshStandardMaterial({
        color: 0x333333,
        metalness: 0.4,
        roughness: 0.6
    });
    
    const frontMaterial = new THREE.MeshStandardMaterial({
        map: texture,
        color: 0xffffff
    });
    
    return [
        sideMaterial,  // 右
        sideMaterial,  // 左
        sideMaterial,  // 上
        sideMaterial,  // 下
        frontMaterial, // 前（显示内容）
        sideMaterial   // 后
    ];
}
```

### 步骤 3：调整初始相机
```javascript
camera.position.set(0, 0, 2500);
cameraAngle = { theta: 0, phi: Math.PI / 2 };
```

### 步骤 4：添加 Reset 按钮
```html
<div id="zoomPanel">
    <button onclick="zoomOut()">−</button>
    <input type="range" id="zoomSlider" ...>
    <button onclick="zoomIn()">+</button>
    <span id="zoomValue">100%</span>
    <button onclick="resetCamera()">Reset</button>  <!-- 新增 -->
</div>
```

### 步骤 5：增强光照
```javascript
// 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(0, 0, 1000);
scene.add(directionalLight);
```

---

## 📐 预期效果示意

### 修改前
```
当前视角：斜侧面
缝隙：2px
侧面：显示视频（混乱）
深度效果：不明显
```

### 修改后
```
初始视角：正面
缝隙：0（无缝拼接）
前面：显示视频
侧面：深灰色（清晰）
深度效果：
  - 厚度 20，侧面明显
  - 方向光产生明暗
  - 伸出的灰色侧面清晰可见
Reset：一键恢复正面视角
```

---

## ⚠️ 注意事项

### 1. 材质数组顺序
Three.js BoxGeometry 的面顺序：
```
materials[0] = 右侧面 (+X)
materials[1] = 左侧面 (-X)
materials[2] = 顶面 (+Y)
materials[3] = 底面 (-Y)
materials[4] = 前面 (+Z) ← 显示内容
materials[5] = 后面 (-Z)
```

### 2. 纹理应用
- 加载视频/图片后，只更新 `materials[4]`（前面）
- 其他面保持灰色材质不变

### 3. 性能影响
- 多材质对性能影响极小（仍然是一个 Mesh）
- 增加光照会略微降低性能（FPS 可能从 60 降到 55-58）
- 仍然远超 25fps 目标

---

## 🎨 视觉效果预览

### 正面看（Reset 后）
```
┌─────────────────────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└─────────────────────────────────────┘
         完整显示视频内容
         无缝拼接，整齐划一
```

### 波浪运动时（侧面看）
```
        ╔═══╗
    ╔═══║█████║═══╗
╔═══║█████████║═══║═══╗
║█████████████████║███║
╚═══════════════════════╝
    ↑       ↑       ↑
  灰色   前面    灰色
  侧面   视频    侧面
```

---

**方案已准备就绪，请确认后执行！** ✅