模型上下颠倒解决方案

问题描述

GLB模型在Three.js场景中显示上下颠倒。

原因分析

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

已实施的解决方案

1. 简单旋转方案（已应用）

在 src/scenes/Map3DScene.vue 的 loadModel() 函数中添加：

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

2. 完整代码示例

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度

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

方案2：绕X轴旋转 180度

model.rotation.x = Math.PI;

方案3：使用坐标系转换工具

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. 使用坐标系参考轴

取消注释代码中的坐标系参考轴：

// 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)）之后再进行旋转。

下一步建议

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

文件修改记录

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

模型上下颠倒解决方案.md 3.4 KB История Исходник