# Three.js 版机械屏仿真程序使用说明

## 📖 完整操作流程

### 步骤 1：加载视频或图片

**方法 1：加载视频**
1. 点击底部的 **"加载视频"** 按钮
2. 选择 MP4 视频文件
3. 等待加载完成（视频会自动显示在 136 个方块上）

**方法 2：加载图片**
1. 点击底部的 **"加载图片"** 按钮
2. 选择 JPG/PNG 图片文件
3. 图片会立即显示在方块上

---

### 步骤 2：选择要控制的单元

**方法 A：全选（推荐）**
1. 点击底部的 **"全选"** 按钮
2. 所有 136 个单元会高亮显示（发出黄色光）
3. 右上角显示"已选中: 136 个单元"

**方法 B：手动选择**
1. **单选**：直接点击 3D 视图中的方块
2. **多选**：按住 **Ctrl** 键，点击多个方块
3. 选中的方块会发黄光

**清除选择**
- 点击底部的 **"清除选择"** 按钮

---

### 步骤 3：选择运动类型

在右侧面板的顶部，有 4 个运动类型按钮：

| 按钮 | 效果 |
|------|------|
| **同步** | 所有单元一起前后推拉 |
| **波浪横** | 从左到右的波浪运动 ⭐ |
| **波浪纵** | 从上到下的波浪运动 |
| **涟漪** | 从中心向外扩散的涟漪 |

**操作**：点击 **"波浪横"** 按钮，按钮会变蓝色（表示已选中）

---

### 步骤 4：调整运动参数

右侧面板有 3 个滑块：

#### **振幅 (mm)**
- 范围：0-100
- 说明：方块前后运动的距离
- 推荐值：50-60

#### **频率 (Hz)**
- 范围：0.1-10
- 说明：波浪的快慢
- 推荐值：1.5-2.5

#### **速度**
- 范围：50-500
- 说明：波浪传播速度
- 推荐值：200-300

**操作**：拖动滑块到想要的数值

---

### 步骤 5：添加运动规则

点击右侧面板底部的 **"添加运动规则"** 按钮

**会弹出提示**：`规则已添加！当前共 1 条规则`

---

### 步骤 6：观看效果

**视频模式**：
- 视频会自动播放
- 方块会立即开始做波浪运动
- 可以点击 **"播放/暂停"** 控制

**图片模式**：
- 图片静止显示
- 方块做波浪运动（图片跟着动）

---

## 🎯 完整示例：设置横向波浪

```
1. 点击"加载视频" → 选择视频
   ↓
2. 等待视频加载显示
   ↓
3. 点击"全选"按钮 → 所有方块变黄
   ↓
4. 点击"波浪横"按钮 → 按钮变蓝
   ↓
5. 调整参数：
   - 振幅：60
   - 频率：2.0
   - 速度：250
   ↓
6. 点击"添加运动规则"
   ↓
7. 立即看到从左到右的波浪效果！
```

---

## 🖱️ 视角控制

### 旋转视角
- **鼠标左键按住拖拽** → 360° 旋转查看

### 缩放视角
- **鼠标滚轮向前** → 放大（靠近）
- **鼠标滚轮向后** → 缩小（远离）

### 推荐视角
- **正面观看**：适合看整体效果
- **侧面观看**：可以看到方块前后运动的深度
- **近距离**：可以看清单个方块的细节

---

## 💡 使用技巧

### 技巧 1：测试不同运动类型
1. 添加第一条规则（波浪横）
2. 清除选择 → 全选
3. 切换到"波浪纵"
4. 再添加一条规则
5. **两条规则会叠加**，产生复合运动效果

### 技巧 2：局部区域运动
1. 只选择前 10 列的方块
2. 设置运动并添加规则
3. **只有选中的方块会动**，其他静止

### 技巧 3：调试参数
- **频率低**（0.5-1）：慢波浪，优雅
- **频率高**（5-10）：快波浪，动感
- **振幅大**（80-100）：运动幅度大，夸张
- **振幅小**（20-30）：运动幅度小，细腻

---

## ⚠️ 常见问题

### Q1：点了"添加规则"但没动？
**A**：
1. 确认已选中单元（右上角显示"已选中: X 个单元"）
2. 视频模式会自动播放
3. 图片模式需要等待（图片会跟着动）

### Q2：如何停止运动？
**A**：
- 刷新页面（Ctrl+F5）
- 或者关闭标签页重新打开

### Q3：如何删除已添加的规则？
**A**：当前版本暂不支持删除，刷新页面即可清空

### Q4：多条规则会冲突吗？
**A**：不会！多条规则会**叠加**，产生更复杂的运动效果

---

## 🎬 推荐设置

### 设置 1：经典波浪
```
运动类型：波浪横
振幅：50
频率：1.5
速度：200
效果：平稳优雅的横向波浪
```

### 设置 2：快速涟漪
```
运动类型：涟漪
振幅：70
频率：3
速度：350
效果：从中心快速扩散的涟漪
```

### 设置 3：同步呼吸
```
运动类型：同步
振幅：40
频率：0.8
速度：150
效果：所有方块一起缓慢呼吸
```

---

## 📊 性能说明

### 预期 FPS
- **图片模式**：60 FPS（非常流畅）
- **视频模式**：25-40 FPS（取决于视频分辨率）

### 优化建议
如果视频卡顿：
1. 降低视频分辨率（推荐 2176×256）
2. 减少同时添加的规则数量
3. 使用图片模式测试运动效果

---

## 🎯 快速上手总结

**3 步开始使用波浪横：**

1️⃣ **加载视频** → 点击"加载视频"  
2️⃣ **全选 + 选择波浪横** → 点击"全选" → 点击"波浪横"  
3️⃣ **添加规则** → 点击"添加运动规则"

**完成！立即看到效果！** 🎉

---

**访问地址**：http://stargazer.org.cn/share/machan-display/threejs/index.html