Three.js黑屏问题求助：无法正常加载新加坡3D模型

问题根源分析 #

你的代码存在几个关键问题导致黑屏：

• 语法错误：代码中wireframe:true属于无关联的无效代码，会触发JavaScript语法错误，直接中断脚本执行。
• 缺少GLTFLoader模块：Three.js核心库不包含GLTFLoader，需单独引入该组件才能加载.glb格式模型。
• 模型可见性风险：相机位置与模型尺寸不匹配，且未添加加载错误处理，无法排查模型加载失败的情况。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Singapore 3D Model</title>
    <style>
        body { margin: 0; } /* 移除默认边距，避免渲染区域空白 */
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 引入GLTFLoader模块 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script>
        let scene, camera, renderer;
        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xdddddd);
            
            camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 5000);
            camera.position.set(0, 0, 10); // 直接设置合适的相机位置
            
            // 优化灯光参数，避免过曝
            const ambientLight = new THREE.AmbientLight(0x404040, 1);
            scene.add(ambientLight);
            
            const topLight = new THREE.DirectionalLight(0xffffff, 1);
            topLight.position.set(50, 50, 50); // 缩小位置数值适配常规模型尺寸
            topLight.castShadow = true;
            scene.add(topLight);
            
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            
            // 加载模型并添加错误处理
            const loader = new THREE.GLTFLoader();
            loader.load('singapore.glb', 
                function(gltf){
                    const model = gltf.scene;
                    scene.add(model);
                    
                    // 自动调整相机位置，确保模型完整可见
                    const box = new THREE.Box3().setFromObject(model);
                    const center = box.getCenter(new THREE.Vector3());
                    const size = box.getSize(new THREE.Vector3());
                    const maxDim = Math.max(size.x, size.y, size.z);
                    const fov = camera.fov * (Math.PI / 180);
                    let cameraZ = Math.abs(maxDim / (2 * Math.tan(fov / 2)));
                    camera.position.z = cameraZ * 1.2; // 预留20%视野余量
                    camera.lookAt(center);
                },
                // 加载进度反馈
                function(xhr) {
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                },
                // 加载错误提示
                function(error) {
                    console.error('模型加载失败:', error);
                }
            );
            
            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }
        
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        
        init();
        animate();
    </script>
</body>
</html>

额外注意事项 #

• 确认singapore.glb文件路径正确，与HTML文件同目录或使用正确的相对/绝对路径。
• 若仍黑屏，打开浏览器控制台（F12）查看是否有加载错误或其他报错信息。
• 可根据模型实际效果调整灯光强度、相机位置等参数。

内容的提问来源于stack exchange，提问作者javier