# vue-threejs-su7

**Repository Path**: yangle594/vue-threejs-su7

## Basic Information

- **Project Name**: vue-threejs-su7
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-24
- **Last Updated**: 2025-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小米SU7 3D模型展示

基于Vue3 + Three.js + TypeScript开发的小米SU7 3D模型展示应用，支持换肤、开关门、驾驶模式切换、室内外场景切换等功能。

## 功能特性

### 🚗 3D模型展示
- 高精度小米SU7 3D模型
- 流畅的相机控制和视角切换
- 自动旋转和手动控制

### 🎨 换肤功能
- 6种预设车身颜色
- 珍珠白、深海蓝、烈焰红、星空灰、翡翠绿、曜石黑
- 平滑的颜色过渡动画

### 🚪 车门控制
- 四门独立开关控制
- 逼真的车门开合动画
- 支持批量开关操作

### 🏎️ 驾驶模式
- 正常模式：标准车身姿态
- 运动模式：降低车身，运动化调校
- 平滑的模式切换动画

### 🏠 场景切换
- 室外场景：城市环境，建筑群
- 室内场景：展厅环境，专业灯光
- 动态光照调整

### ⚡ 性能优化
- 自适应性能调整
- FPS监控和动态质量调整
- 视锥体剔除和LOD优化

## 技术栈

- **前端框架**: Vue 3 + TypeScript
- **3D引擎**: Three.js
- **动画库**: GSAP
- **构建工具**: Vite
- **样式**: CSS3 + 现代UI设计

## 快速开始

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 项目结构

```
src/
├── components/
│   ├── CarShowcase.ts          # 主要的3D场景控制器
│   ├── PerformanceOptimizer.ts # 性能优化器
│   └── AnimationController.ts  # 动画控制器
├── App.vue                     # 主应用组件
├── main.ts                     # 应用入口
└── style.css                   # 全局样式
```

## 使用说明

### 基本操作
1. **鼠标左键拖拽**: 旋转视角
2. **鼠标滚轮**: 缩放
3. **鼠标右键拖拽**: 平移视角

### 功能控制
- **场景模式**: 切换室内/室外环境
- **车身颜色**: 点击颜色选择器更换车身颜色
- **车门控制**: 点击按钮开关车门
- **驾驶模式**: 切换正常/运动模式
- **视角控制**: 重置视角或开启/关闭自动旋转

## 性能特性

### 自适应优化
- 根据设备性能自动调整渲染质量
- FPS低于30时降低画质，高于50时提升画质
- 动态阴影和抗锯齿控制

### 内存管理
- 自动清理未使用的资源
- 组件销毁时正确释放Three.js对象
- 避免内存泄漏

## 浏览器支持

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 开发说明

### 添加新的车身颜色
在 `App.vue` 中的 `carColors` 数组中添加新颜色：

```typescript
const carColors = [
  { name: '新颜色', value: '#HEX颜色值' }
]
```

### 自定义动画
在 `AnimationController.ts` 中添加新的动画方法：

```typescript
public playCustomAnimation() {
  gsap.to(this.carModel, {
    duration: 1,
    // 动画属性
  })
}
```

### 性能调优
在 `PerformanceOptimizer.ts` 中调整性能参数：

```typescript
private adjustQualityBasedOnFPS() {
  // 自定义性能调整逻辑
}
```

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目！

## 更新日志

### v1.0.0
- 初始版本发布
- 基础3D模型展示
- 换肤、开关门、驾驶模式功能
- 室内外场景切换
- 性能优化和动画系统