🔄 坐标系转换测试
测试时间:
📋 坐标系说明
Three.js 默认坐标系 (Y-up):
- Y轴: 朝上 (垂直方向)
- Z轴: 朝前 (视线方向)
- X轴: 朝右 (水平方向)
GLB模型坐标系 (Z-up):
- Z轴: 朝上 (垂直方向)
- Y轴: 朝前 (视线方向)
- X轴: 朝右 (水平方向)
🔧 转换方法
将 Z-up 坐标系转换为 Y-up 坐标系：
// 方法1: 直接旋转模型
model.rotation.x = -Math.PI / 2
// 方法2: 使用转换工具
import { convertCoordinateSystem } from '../utils/coordinateConverter'
const convertedModel = convertCoordinateSystem(model, 'z-up', 'y-up')
✅ 已实现的功能
✓ 坐标系转换工具函数 (coordinateConverter.ts)
✓ 自动检测模型坐标系
✓ 支持多种坐标系转换
✓ 坐标系参考轴可视化
✓ 在 Map3DScene.vue 中应用转换
📊 使用示例
// 在模型加载后应用坐标系转换
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)
// 坐标系转换：Z-up → Y-up
const convertedModel = convertCoordinateSystem(model, 'z-up', 'y-up')
const group = new THREE.Group()
group.add(convertedModel)
map.add(group)
}
🎯 测试建议
1. 运行开发服务器查看模型显示效果
2. 检查模型方向是否正确
3. 如需调试，可取消注释坐标系参考轴
4. 使用变换面板调整模型位置和旋转
💡 提示：如果模型方向仍不正确，可能需要调整旋转角度