🔄 简单旋转测试

测试时间:

问题：模型上下颠倒
原因：GLB模型是Z轴朝上，Three.js是Y轴朝上

✅ 推荐解决方案

在模型加载后添加以下代码：

// 方法1：绕X轴旋转 -90度（最常用）
model.rotation.x = -Math.PI / 2;

// 方法2：绕X轴旋转 +90度
model.rotation.x = Math.PI / 2;

// 方法3：绕X轴旋转 180度
model.rotation.x = Math.PI;

🔧 在项目中的具体修改

编辑文件：src/scenes/Map3DScene.vue

找到模型加载部分，添加旋转代码：

// 在 model.position.sub(center) 之后添加：
model.rotation.x = -Math.PI / 2; // 或者尝试 +Math.PI / 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)

// 修复上下颠倒问题
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
}
提示：如果 -90度 不正确，请尝试 +90度 或 180度。
不同的模型可能需要不同的旋转角度。

🎯 测试步骤

  1. 修改 Map3DScene.vue 添加旋转代码
  2. 运行开发服务器 npm run dev
  3. 查看模型方向是否正确
  4. 如不正确，尝试其他旋转角度