袁涛
26defd9d69
- 实现触摸滑动旋转查看汽车360度全景 - 添加惯性滑动效果和自动旋转展示功能 - 实现全屏沉浸式体验和精美Loading动画 - 添加Python视频帧提取脚本和浏览器端提取工具 - 包含本地HTTP服务器和完整项目文档
119 lines
2.9 KiB
Markdown
119 lines
2.9 KiB
Markdown
# 汽车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 文件可能因浏览器安全限制导致图片加载失败。
|