baixuanda
/
XinJiang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<!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: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-item {
            margin: 15px 0;
            padding: 15px;
            border-left: 4px solid #2196F3;
            background: #f9f9f9;
        }
        .test-item h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .code-block {
            background: #263238;
            color: #aed581;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            margin: 10px 0;
        }
        .status-info {
            color: #2196F3;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔄 坐标系转换测试</h1>
        <p>测试时间: <span id="test-time"></span></p>
        
        <div class="test-item">
            <h3>📋 坐标系说明</h3>
            <p><strong>Three.js 默认坐标系 (Y-up):</strong></p>
            <ul>
                <li>Y轴: 朝上 (垂直方向)</li>
                <li>Z轴: 朝前 (视线方向)</li>
                <li>X轴: 朝右 (水平方向)</li>
            </ul>
            
            <p><strong>GLB模型坐标系 (Z-up):</strong></p>
            <ul>
                <li>Z轴: 朝上 (垂直方向)</li>
                <li>Y轴: 朝前 (视线方向)</li>
                <li>X轴: 朝右 (水平方向)</li>
            </ul>
        </div>

        <div class="test-item">
            <h3>🔧 转换方法</h3>
            <p>将 Z-up 坐标系转换为 Y-up 坐标系：</p>
            <div class="code-block">
// 方法1: 直接旋转模型
model.rotation.x = -Math.PI / 2

// 方法2: 使用转换工具
import { convertCoordinateSystem } from '../utils/coordinateConverter'
const convertedModel = convertCoordinateSystem(model, 'z-up', 'y-up')
            </div>
        </div>

        <div class="test-item">
            <h3>✅ 已实现的功能</h3>
            <p>✓ 坐标系转换工具函数 (<code>coordinateConverter.ts</code>)</p>
            <p>✓ 自动检测模型坐标系</p>
            <p>✓ 支持多种坐标系转换</p>
            <p>✓ 坐标系参考轴可视化</p>
            <p>✓ 在 Map3DScene.vue 中应用转换</p>
        </div>

        <div class="test-item">
            <h3>📊 使用示例</h3>
            <div class="code-block">
// 在模型加载后应用坐标系转换
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)
}
            </div>
        </div>

        <div class="test-item">
            <h3>🎯 测试建议</h3>
            <p>1. 运行开发服务器查看模型显示效果</p>
            <p>2. 检查模型方向是否正确</p>
            <p>3. 如需调试，可取消注释坐标系参考轴</p>
            <p>4. 使用变换面板调整模型位置和旋转</p>
            <p class="status-info">💡 提示：如果模型方向仍不正确，可能需要调整旋转角度</p>
        </div>
    </div>

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