# fmc-personal-blog

**Repository Path**: fu-meichuan/fmc-personal-blog

## Basic Information

- **Project Name**: fmc-personal-blog
- **Description**: 汽车展厅项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 24
- **Forks**: 17
- **Created**: 2024-07-14
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目启动指南
1. 运行 `npm install`
2. 运行 `npm run dev`

---

# 汽车展厅项目（主要在example/maxwell-car 目录下）

## 🚗 项目概述
搭建了**3D汽车展厅互动应用**，包含三大核心场景：
- 项目静态展厅
- 夜间道路行驶
- 功能展示

### ✨ 核心交互功能
- 车漆自定义 
- 汽车智驾行驶演示  
- 汽车粒子聚合动画  
- 汽车雷达扫描动画  
- 场景无缝过渡切换  
- 环境贴图动态光源模拟  
- 空气动力飞线动画  

## 💻 技术栈
**React** + **react-three/fiber** + **Three.js**

---

## 🔧 项目实现思路

### 1. 3D场景与用户交互设计
- 通过循环改变街道场景 Z 坐标，实现汽车无限行驶效果
- 支持多场景（展厅/道路/功能）的无缝过渡切换

### 2. 模型材质渲染与光照系统
- **道路渲染**：基于 PBR 材质实现雨天路面镜面反射效果
- **光源优化方案**：
  - 采用 Bloom 后期处理模拟路灯光源
  - 混合环境贴图替代动态光源，降低性能消耗
  - 动态光源贴图模拟真实环境反射

### 3. 🚀 系统性能优化
- **模型预处理**：
  - Blender 模型减面处理
  - DRACO 压缩模型体积
- **渲染优化**：
  - 动画帧回调中避免更新 React 状态
  - 采用Point 与 点材质高效加载动画粒子

### 4. 🎥 动画效果实现
| 动画类型             | 实现技术                                      |
|----------------------|---------------------------------------------|
| 汽车粒子聚合动画      | Shader + 包围盒检测 + BufferGeometry         |
| 环形律动粒子动画      | Shader + 噪声纹理驱动                       |
| 雷达扫描动画          | 动态几何体 + 扫描着色器                     |
| 空气动力飞线          | 曲线路径动画 + 粒子轨迹生成                 |