baixuanda
/
FuJianModelPlatform


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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;
        }
        #info {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="info">
        <h1>模型加载测试</h1>
        <p>测试 GLTFLoader 是否能正常工作</p>
        <div id="status">准备测试...</div>
        <button onclick="testModelLoad()">测试模型加载</button>
    </div>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        
        console.log('Three.js 版本:', THREE.REVISION);
        console.log('GLTFLoader 加载:', GLTFLoader);
        
        window.testModelLoad = function() {
            const status = document.getElementById('status');
            status.innerHTML = '开始加载模型...';
            
            const loader = new GLTFLoader();
            console.log('GLTFLoader 实例创建成功');
            
            loader.load(
                '/models/启闭机.glb',
                function (gltf) {
                    console.log('模型加载成功:', gltf);
                    status.innerHTML = '模型加载成功！';
                },
                function (xhr) {
                    const percent = (xhr.loaded / xhr.total * 100).toFixed(0);
                    status.innerHTML = `加载中: ${percent}%`;
                    console.log(`加载进度: ${percent}%`);
                },
                function (error) {
                    console.error('模型加载失败:', error);
                    status.innerHTML = '模型加载失败: ' + error.message;
                }
            );
        }
    </script>
</body>
</html>