GLB模型坐标系转换说明

问题描述

你的GLB模型使用的是 Z轴朝上、Y轴向前 的坐标系，而Three.js默认使用 Y轴朝上、Z轴向前 的坐标系。这会导致模型在场景中显示方向错误。

解决方案

1. 坐标系差异对比

坐标系	朝上轴	向前轴	右轴	常见软件
Three.js (Y-up)	Y	Z	X	Three.js 默认
GLB模型 (Z-up)	Z	Y	X	Blender, 3ds Max, CAD

2. 已实现的转换工具

创建了 src/utils/coordinateConverter.ts 文件，包含以下功能：

主要函数：

convertCoordinateSystem(model, from, to) - 坐标系转换
autoConvertModelCoordinates(model) - 自动检测并转换
createCoordinateAxes(size) - 创建坐标系参考轴（调试用）
applyCoordinateConversion(group, config) - 应用转换到模型组

支持的坐标系：

y-up: Three.js 默认坐标系
z-up: Blender/3ds Max 默认坐标系
z-up-forward-x: 某些CAD软件坐标系

3. 在项目中的应用

Map3DScene.vue 中的修改：

// 导入转换工具
import { convertCoordinateSystem } from '../utils/coordinateConverter'

// 在模型加载函数中应用转换
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)
  group.position.set(0, 0, 0)
  group.rotation.y = THREE.MathUtils.degToRad(5)
  map.add(group)
  modelGroup = group
}

4. 转换原理

Z-up 到 Y-up 的转换实际上是绕 X 轴旋转 -90 度：

model.rotation.x = -Math.PI / 2

或者使用矩阵变换：

const matrix = new THREE.Matrix4().makeRotationX(-Math.PI / 2)
model.applyMatrix4(matrix)

5. 调试和验证

方法1：使用坐标系参考轴

// 在 Map3DScene.vue 中取消注释
const axes = createCoordinateAxes(100)
group.add(axes)

方法2：检查模型包围盒

转换前后检查模型尺寸：

const box = new THREE.Box3().setFromObject(model)
const size = box.getSize(new THREE.Vector3())
console.log(`模型尺寸: (${size.x}, ${size.y}, ${size.z})`)

方法3：使用变换面板

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

6. 测试页面

创建了两个测试页面：

test-project.html - 项目整体测试
test-coordinate.html - 坐标系转换专门测试

7. 注意事项

模型居中：转换前先将模型居中到原点
旋转顺序：确保在正确的位置应用旋转
性能考虑：坐标系转换只在加载时执行一次
调试模式：开发时可启用坐标系参考轴

8. 常见问题

Q: 转换后模型方向还是不对？ A: 检查模型的原始坐标系，可能需要调整旋转角度或使用自动检测功能。

Q: 如何知道模型是什么坐标系？ A: 查看模型导出软件的设置，或使用 autoConvertModelCoordinates 函数自动检测。

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

下一步建议

运行开发服务器测试模型显示效果
如需进一步调整，使用变换面板微调
考虑添加更多坐标系支持（如 Y-forward, Z-forward 等）
为不同类型的模型添加预设转换配置

坐标系转换说明.md 3.7 KB Bezpośredni odnośnik Historia Czysty