baixuanda
/
XinJiang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单旋转测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .solution {
            margin: 20px 0;
            padding: 15px;
            border-left: 4px solid #4CAF50;
            background: #f9f9f9;
        }
        .solution h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .code {
            background: #263238;
            color: #aed581;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .status.info {
            background: #e3f2fd;
            border-left: 4px solid #2196F3;
        }
        .status.warning {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔄 简单旋转测试</h1>
        <p>测试时间: <span id="test-time"></span></p>
        
        <div class="status info">
            <strong>问题：</strong>模型上下颠倒
            <br><strong>原因：</strong>GLB模型是Z轴朝上，Three.js是Y轴朝上
        </div>

        <div class="solution">
            <h3>✅ 推荐解决方案</h3>
            <p>在模型加载后添加以下代码：</p>
            <div class="code">
// 方法1：绕X轴旋转 -90度（最常用）<br>
model.rotation.x = -Math.PI / 2;<br><br>
// 方法2：绕X轴旋转 +90度<br>
model.rotation.x = Math.PI / 2;<br><br>
// 方法3：绕X轴旋转 180度<br>
model.rotation.x = Math.PI;
            </div>
        </div>

        <div class="solution">
            <h3>🔧 在项目中的具体修改</h3>
            <p>编辑文件：<code>src/scenes/Map3DScene.vue</code></p>
            <p>找到模型加载部分，添加旋转代码：</p>
            <div class="code">
// 在 model.position.sub(center) 之后添加：<br>
model.rotation.x = -Math.PI / 2; // 或者尝试 +Math.PI / 2
            </div>
        </div>

        <div class="solution">
            <h3>📋 完整代码示例</h3>
            <div class="code">
async function loadModel() {<br>
  const loader = new GLTFLoader()<br>
  const gltf = await loader.loadAsync(props.modelUrl)<br>
  const model = gltf.scene<br><br>
  // 计算包围盒并居中<br>
  const box = new THREE.Box3().setFromObject(model)<br>
  const center = box.getCenter(new THREE.Vector3())<br>
  model.position.sub(center)<br><br>
  // 修复上下颠倒问题<br>
  model.rotation.x = -Math.PI / 2;<br><br>
  const group = new THREE.Group()<br>
  group.add(model)<br>
  group.position.set(0, 0, 0)<br>
  group.rotation.y = THREE.MathUtils.degToRad(5)<br>
  map.add(group)<br>
  modelGroup = group<br>
}
            </div>
        </div>

        <div class="status warning">
            <strong>提示：</strong>如果 -90度 不正确，请尝试 +90度 或 180度。
            <br>不同的模型可能需要不同的旋转角度。
        </div>

        <div class="solution">
            <h3>🎯 测试步骤</h3>
            <ol>
                <li>修改 <code>Map3DScene.vue</code> 添加旋转代码</li>
                <li>运行开发服务器 <code>npm run dev</code></li>
                <li>查看模型方向是否正确</li>
                <li>如不正确，尝试其他旋转角度</li>
            </ol>
        </div>
    </div>

    <script>
        document.getElementById('test-time').textContent = new Date().toLocaleString('zh-CN');
        console.log('简单旋转测试页面加载完成');
    </script>
</body>
</html>