3D-pano/README.md

汽车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 脚本（推荐）

python extract_frames.py

需要安装 OpenCV：

pip install opencv-python

方法二：浏览器工具

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

2. 启动本地服务器

node server.js

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

3. 访问应用

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

配置说明

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

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 文件可能因浏览器安全限制导致图片加载失败。