baixuanda
/
XinJiang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!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 #ff9800;
            background: #f9f9f9;
        }
        .test-item h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .rotation-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }
        .control-group {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 4px;
        }
        .control-group h4 {
            margin: 0 0 10px 0;
            color: #1976d2;
        }
        .rotation-value {
            font-family: monospace;
            background: #263238;
            color: #aed581;
            padding: 5px 10px;
            border-radius: 3px;
            margin: 5px 0;
        }
        .test-button {
            background: #ff9800;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        .test-button:hover {
            background: #f57c00;
        }
        .test-button.active {
            background: #4CAF50;
        }
        .info-box {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔄 模型旋转调试</h1>
        <p>测试时间: <span id="test-time"></span></p>
        
        <div class="test-item">
            <h3>📋 问题描述</h3>
            <p>模型上下颠倒，需要找到正确的旋转角度来修正方向。</p>
            <div class="info-box">
                <strong>当前情况：</strong> 模型显示上下颠倒
                <br><strong>可能原因：</strong> 坐标系转换旋转方向错误
            </div>
        </div>

        <div class="test-item">
            <h3>🔧 旋转调试控制</h3>
            <div class="rotation-controls">
                <div class="control-group">
                    <h4>绕X轴旋转</h4>
                    <div class="rotation-value">当前: <span id="rot-x">0</span>°</div>
                    <button class="test-button" onclick="rotateX(90)">+90°</button>
                    <button class="test-button" onclick="rotateX(-90)">-90°</button>
                    <button class="test-button" onclick="rotateX(180)">+180°</button>
                    <button class="test-button" onclick="resetRotation('x')">重置</button>
                </div>
                
                <div class="control-group">
                    <h4>绕Y轴旋转</h4>
                    <div class="rotation-value">当前: <span id="rot-y">0</span>°</div>
                    <button class="test-button" onclick="rotateY(90)">+90°</button>
                    <button class="test-button" onclick="rotateY(-90)">-90°</button>
                    <button class="test-button" onclick="rotateY(180)">+180°</button>
                    <button class="test-button" onclick="resetRotation('y')">重置</button>
                </div>
                
                <div class="control-group">
                    <h4>绕Z轴旋转</h4>
                    <div class="rotation-value">当前: <span id="rot-z">0</span>°</div>
                    <button class="test-button" onclick="rotateZ(90)">+90°</button>
                    <button class="test-button" onclick="rotateZ(-90)">-90°</button>
                    <button class="test-button" onclick="rotateZ(180)">+180°</button>
                    <button class="test-button" onclick="resetRotation('z')">重置</button>
                </div>
                
                <div class="control-group">
                    <h4>预设旋转</h4>
                    <button class="test-button" onclick="applyPreset('z-up-to-y-up')">Z-up → Y-up</button>
                    <button class="test-button" onclick="applyPreset('y-up-to-z-up')">Y-up → Z-up</button>
                    <button class="test-button" onclick="applyPreset('flip-x')">翻转X轴</button>
                    <button class="test-button" onclick="applyPreset('flip-y')">翻转Y轴</button>
                </div>
            </div>
        </div>

        <div class="test-item">
            <h3>📊 旋转矩阵</h3>
            <div class="rotation-value" id="matrix-display">
                [1, 0, 0, 0]<br>
                [0, 1, 0, 0]<br>
                [0, 0, 1, 0]<br>
                [0, 0, 0, 1]
            </div>
        </div>

        <div class="test-item">
            <h3>🎯 推荐解决方案</h3>
            <p>根据你的描述（模型上下颠倒），最可能的解决方案是：</p>
            <div class="info-box">
                <strong>方案1：</strong> 绕X轴旋转 +90° (Math.PI/2)
                <br><strong>方案2：</strong> 绕X轴旋转 -90° (-Math.PI/2)
                <br><strong>方案3：</strong> 绕X轴旋转 180° (Math.PI)
            </div>
            <p>点击上面的按钮测试不同的旋转效果。</p>
        </div>

        <div class="test-item">
            <h3>📝 代码示例</h3>
            <div style="background: #263238; color: #aed581; padding: 15px; border-radius: 4px; font-family: monospace;">
                // 在模型加载后应用旋转<br>
                model.rotation.x = Math.PI / 2; // +90度<br>
                // 或者<br>
                model.rotation.x = -Math.PI / 2; // -90度<br>
                // 或者<br>
                model.rotation.x = Math.PI; // 180度
            </div>
        </div>
    </div>

    <script>
        let currentRotation = { x: 0, y: 0, z: 0 };
        
        function updateDisplay() {
            document.getElementById('rot-x').textContent = Math.round(currentRotation.x * 180 / Math.PI);
            document.getElementById('rot-y').textContent = Math.round(currentRotation.y * 180 / Math.PI);
            document.getElementById('rot-z').textContent = Math.round(currentRotation.z * 180 / Math.PI);
            
            // 更新矩阵显示
            const cosX = Math.cos(currentRotation.x);
            const sinX = Math.sin(currentRotation.x);
            const cosY = Math.cos(currentRotation.y);
            const sinY = Math.sin(currentRotation.y);
            const cosZ = Math.cos(currentRotation.z);
            const sinZ = Math.sin(currentRotation.z);
            
            document.getElementById('matrix-display').innerHTML = 
                `[${cosY*cosZ.toFixed(2)}, ${-cosY*sinZ.toFixed(2)}, ${sinY.toFixed(2)}, 0]<br>` +
                `[${(sinX*sinY*cosZ + cosX*sinZ).toFixed(2)}, ${(-sinX*sinY*sinZ + cosX*cosZ).toFixed(2)}, ${-sinX*cosY.toFixed(2)}, 0]<br>` +
                `[${(-cosX*sinY*cosZ + sinX*sinZ).toFixed(2)}, ${(cosX*sinY*sinZ + sinX*cosZ).toFixed(2)}, ${cosX*cosY.toFixed(2)}, 0]<br>` +
                `[0, 0, 0, 1]`;
        }
        
        function rotateX(angle) {
            currentRotation.x += angle * Math.PI / 180;
            updateDisplay();
        }
        
        function rotateY(angle) {
            currentRotation.y += angle * Math.PI / 180;
            updateDisplay();
        }
        
        function rotateZ(angle) {
            currentRotation.z += angle * Math.PI / 180;
            updateDisplay();
        }
        
        function resetRotation(axis) {
            currentRotation[axis] = 0;
            updateDisplay();
        }
        
        function applyPreset(preset) {
            switch(preset) {
                case 'z-up-to-y-up':
                    currentRotation.x = Math.PI / 2;
                    break;
                case 'y-up-to-z-up':
                    currentRotation.x = -Math.PI / 2;
                    break;
                case 'flip-x':
                    currentRotation.x = Math.PI;
                    break;
                case 'flip-y':
                    currentRotation.y = Math.PI;
                    break;
            }
            updateDisplay();
        }
        
        // 初始化
        document.getElementById('test-time').textContent = new Date().toLocaleString('zh-CN');
        updateDisplay();
        
        console.log('旋转调试页面加载完成');
        console.log('当前旋转角度:', currentRotation);
    </script>
</body>
</html>