# 汽车360°全景展示应用

一个移动端 Web 应用，用于汽车的 360 度全景交互展示。

## 功能特性

- **触摸滑动旋转** - 左右滑动查看汽车 360 度全景
- **惯性滑动效果** - 滑动结束后保持惯性继续旋转
- **自动旋转展示** - 空闲时自动缓慢旋转展示
- **全屏沉浸体验** - 全屏显示，沉浸式查看
- **精美加载动画** - 汽车图标描边动画 + 进度条
- **移动端优化** - 专为移动端触摸交互设计

## 文件结构

```
3D-pano/
├── index.html          # 主页面
├── app.js              # 应用逻辑
├── styles.css          # 样式文件
├── server.js           # 本地 HTTP 服务器
├── extract_frames.py   # Python 视频帧提取脚本
├── extract.html        # 浏览器端帧提取工具
├── video.mp4           # 源视频文件
├── images/             # 序列帧图片目录
│   ├── car_001.jpg
│   ├── car_002.jpg
│   └── ...
└── package.json        # 项目配置
```

## 快速开始

### 1. 提取序列帧

**方法一：Python 脚本（推荐）**

```bash
python extract_frames.py
```

需要安装 OpenCV：
```bash
pip install opencv-python
```

**方法二：浏览器工具**

1. 启动本地服务器（见步骤2）
2. 访问 `http://localhost:9000/extract.html`
3. 点击「开始提取」
4. 点击「应用到展示页」

### 2. 启动本地服务器

```bash
node server.js
```

服务器将在 `http://localhost:9000` 启动。

### 3. 访问应用

在浏览器中打开 `http://localhost:9000/index.html`

## 配置说明

在 `app.js` 中可调整以下参数：

```javascript
this.config = {
    totalFrames: 336,          // 总帧数
    autoRotateSpeed: 80,       // 自动旋转速度（ms/帧）
    autoRotateDelay: 3000,     // 停止操作后自动旋转延迟（ms）
    inertiaFriction: 0.95,     // 惯性摩擦系数
    imagePath: './images/',    // 图片路径
    imagePrefix: 'car_',       // 图片前缀
    imageExt: '.jpg'           // 图片扩展名
};
```

## 图片命名规范

序列帧图片命名格式：`car_XXX.jpg`

- 前缀：`car_`
- 编号：三位数字，从 001 开始
- 扩展名：`.jpg`

示例：`car_001.jpg`, `car_002.jpg`, ..., `car_336.jpg`

## 技术栈

- **前端**：原生 HTML5 + CSS3 + JavaScript
- **Canvas**：2D 渲染引擎
- **触摸交互**：Touch Events API
- **视频处理**：Python OpenCV

## 浏览器兼容性

- Chrome for Android ✅
- Safari iOS ✅
- Firefox Mobile ✅
- 微信内置浏览器 ✅

## 性能优化建议

1. 图片压缩：建议每张图片 50-100KB
2. 帧数选择：36-72 帧适合网络传输，180-360 帧适合本地展示
3. 使用 WebP 格式可进一步减小体积

## 开发者

如需修改或扩展功能，请参考源码注释。

---

**注意**：本应用需要通过 HTTP 服务器访问，直接打开 HTML 文件可能因浏览器安全限制导致图片加载失败。