baixuanda
/
FuJianModelPlatform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!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 {
            margin: 0;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        #info {
            background: #f0f0f0;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        #status {
            font-weight: bold;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="info">
        <h1>模型加载测试</h1>
        <div id="status">准备测试...</div>
        <button onclick="testDirectLoad()">直接加载模型</button>
        <button onclick="testThreeJS()">Three.js加载模型</button>
        <button onclick="testCesium()">检查Cesium</button>
        <div id="details"></div>
    </div>

    <script>
        const statusElement = document.getElementById('status');
        const detailsElement = document.getElementById('details');

        function updateStatus(message, isError = false) {
            statusElement.innerHTML = message;
            statusElement.style.color = isError ? 'red' : 'green';
        }

        function addDetails(message) {
            const p = document.createElement('p');
            p.textContent = message;
            detailsElement.appendChild(p);
        }

        function testDirectLoad() {
            updateStatus('正在直接加载模型...');
            addDetails('开始直接加载模型测试');
            
            fetch('/models/启闭机.glb')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.blob();
                })
                .then(blob => {
                    addDetails(`模型文件大小: ${blob.size} bytes`);
                    addDetails(`模型文件类型: ${blob.type}`);
                    updateStatus('模型文件加载成功！');
                })
                .catch(error => {
                    addDetails(`错误: ${error.message}`);
                    updateStatus('模型文件加载失败！', true);
                });
        }

        function testThreeJS() {
            updateStatus('正在测试Three.js...');
            addDetails('开始Three.js加载模型测试');
            
            // 检查Three.js是否加载
            if (typeof THREE === 'undefined') {
                addDetails('Three.js未加载');
                updateStatus('Three.js未加载！', true);
                return;
            }
            
            addDetails(`Three.js版本: ${THREE.REVISION}`);
            
            // 检查GLTFLoader是否加载
            if (typeof GLTFLoader === 'undefined') {
                addDetails('GLTFLoader未加载');
                updateStatus('GLTFLoader未加载！', true);
                return;
            }
            
            addDetails('GLTFLoader已加载');
            
            // 创建简单的场景
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;
            
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            
            // 添加光源
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);
            
            // 加载模型
            const loader = new GLTFLoader();
            addDetails('开始加载模型...');
            
            loader.load(
                '/models/启闭机.glb',
                function (gltf) {
                    const model = gltf.scene;
                    model.scale.set(0.5, 0.5, 0.5);
                    scene.add(model);
                    addDetails(`模型加载成功！部件数量: ${model.children.length}`);
                    updateStatus('模型加载成功！');
                    
                    // 动画循环
                    function animate() {
                        requestAnimationFrame(animate);
                        model.rotation.y += 0.01;
                        renderer.render(scene, camera);
                    }
                    animate();
                },
                function (xhr) {
                    const percent = (xhr.loaded / xhr.total * 100).toFixed(0);
                    addDetails(`加载进度: ${percent}%`);
                },
                function (error) {
                    addDetails(`错误: ${error.message}`);
                    updateStatus('模型加载失败！', true);
                }
            );
        }

        function testCesium() {
            updateStatus('正在检查Cesium...');
            addDetails('开始Cesium检查测试');
            
            if (typeof Cesium === 'undefined') {
                addDetails('Cesium未加载');
                updateStatus('Cesium未加载！', true);
                return;
            }
            
            addDetails('Cesium已加载');
            
            if (typeof window.viewer === 'undefined') {
                addDetails('window.viewer未定义');
                updateStatus('Cesium viewer未初始化！', true);
                return;
            }
            
            addDetails('Cesium viewer已初始化');
            
            const canvas = document.querySelector('.cesium-viewer canvas');
            if (!canvas) {
                addDetails('Cesium canvas未找到');
                updateStatus('Cesium canvas未找到！', true);
                return;
            }
            
            addDetails('Cesium canvas已找到');
            addDetails(`Canvas尺寸: ${canvas.width}x${canvas.height}`);
            updateStatus('Cesium检查完成！');
        }

        // 页面加载完成
        window.addEventListener('load', function() {
            addDetails('页面加载完成');
            addDetails('当前URL: ' + window.location.href);
        });
    </script>
</body>
</html>