# 模型上下颠倒解决方案

## 问题描述
GLB模型在Three.js场景中显示上下颠倒。

## 原因分析
- **GLB模型坐标系**: Z轴朝上，Y轴向前
- **Three.js坐标系**: Y轴朝上，Z轴向前
- **结果**: 模型旋转了90度，导致上下颠倒

## 已实施的解决方案

### 1. 简单旋转方案（已应用）
在 `src/scenes/Map3DScene.vue` 的 `loadModel()` 函数中添加：

```typescript
// 在 model.position.sub(center) 之后添加：
model.rotation.x = -Math.PI / 2; // 绕X轴旋转 -90度
```

### 2. 完整代码示例
```typescript
async function loadModel() {
  const loader = new GLTFLoader()
  const gltf = await loader.loadAsync(props.modelUrl)
  const model = gltf.scene

  // 计算包围盒并居中
  const box = new THREE.Box3().setFromObject(model)
  const center = box.getCenter(new THREE.Vector3())
  model.position.sub(center)

  // 修复上下颠倒问题：绕X轴旋转 -90度
  model.rotation.x = -Math.PI / 2

  const group = new THREE.Group()
  group.add(model)
  group.position.set(0, 0, 0)
  group.rotation.y = THREE.MathUtils.degToRad(5)
  map.add(group)
  modelGroup = group
}
```

## 如果仍然上下颠倒

如果 `-Math.PI / 2` 不正确，请尝试以下替代方案：

### 方案1：绕X轴旋转 +90度
```typescript
model.rotation.x = Math.PI / 2;
```

### 方案2：绕X轴旋转 180度
```typescript
model.rotation.x = Math.PI;
```

### 方案3：使用坐标系转换工具
```typescript
import { convertCoordinateSystem } from '../utils/coordinateConverter'

// 在模型加载后
const convertedModel = convertCoordinateSystem(model, 'z-up', 'y-up', 'flipped')
```

## 调试方法

### 1. 检查控制台输出
打开浏览器开发者工具，查看控制台中的模型信息：
```
[Map3D] === 模型调试信息 ===
[Map3D] 包围盒中心 (局部): (x, y, z)
[Map3D] 包围盒尺寸 (m): (x, y, z)
```

### 2. 使用坐标系参考轴
取消注释代码中的坐标系参考轴：
```typescript
// const axes = createCoordinateAxes(100)
// group.add(axes)
```

### 3. 使用变换面板
项目中的变换面板可以实时调整模型位置、旋转和缩放。

## 测试页面

创建了以下测试页面帮助调试：
- `test-rotation.html` - 交互式旋转调试
- `test-simple-rotation.html` - 简单旋转测试指南

## 常见问题

### Q: 为什么需要旋转模型？
A: 因为不同3D软件使用不同的坐标系标准，需要转换到Three.js的坐标系。

### Q: 旋转会影响模型动画吗？
A: 不会，坐标系转换只影响静态模型的初始方向。

### Q: 如何知道模型是什么坐标系？
A: 查看模型导出软件的设置，或根据模型尺寸判断（Z轴尺寸最大可能是Z-up）。

### Q: 旋转后模型位置不对怎么办？
A: 确保在居中（`model.position.sub(center)`）之后再进行旋转。

## 下一步建议

1. **测试当前方案**: 运行开发服务器查看模型显示效果
2. **调整旋转角度**: 如果不正确，尝试其他旋转角度
3. **使用调试工具**: 参考测试页面进行交互式调试
4. **记录成功方案**: 找到正确的旋转角度后记录下来

## 文件修改记录

- `src/scenes/Map3DScene.vue`: 添加模型旋转代码
- `src/utils/coordinateConverter.ts`: 创建坐标系转换工具
- `src/utils/coordinateDebug.ts`: 创建坐标系调试工具
- `test-rotation.html`: 交互式旋转调试页面
- `test-simple-rotation.html`: 简单旋转测试指南