求助：使用THREE.js在浏览器加载3D模型出现白屏，无法加载指定模型

首先你需要从Sketchfab下载该模型的glTF格式文件（选择包含纹理的版本），将下载后的模型文件（通常是.glb或.gltf）和配套纹理文件放在项目目录下。

以下是完整的可运行HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Hoodie Model</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        // 引入Three.js核心库和GLTFLoader
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
        import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';

        // 初始化场景、相机、渲染器
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0); // 设置浅灰背景，避免与白屏混淆

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 1, 3); // 调整相机位置，确保能观测到模型

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加灯光——白屏常见诱因是灯光不足
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

        // 加载模型
        const loader = new GLTFLoader();
        loader.load(
            // 替换为你的本地模型路径，例如 './hoodie.glb'
            './hoodie.glb',
            function (gltf) {
                // 根据模型实际尺寸调整缩放与位置
                gltf.scene.scale.set(0.5, 0.5, 0.5);
                gltf.scene.position.y = -1;
                scene.add(gltf.scene);
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.error('模型加载错误:', error);
            }
        );

        // 窗口大小适配
        window.addEventListener('resize', function () {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            // 可选：让模型旋转，方便多角度观察
            const model = scene.getObjectByName('Scene');
            if (model) model.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

关键注意事项： #

• 路径正确性：确保loader.load()中的文件路径与本地模型位置匹配，路径错误会直接导致加载失败。
• 灯光配置：环境光提供基础照明，方向光模拟主光源，缺少灯光会让模型因无光照而不可见，表现为白屏。
• 相机位置：若相机距离模型过远或过近，都会无法观测到模型，可根据模型实际大小调整camera.position参数。
• 跨域问题：本地直接打开HTML文件可能触发浏览器跨域限制，建议用本地服务器（如VS Code的Live Server插件）运行项目。

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