使用Three.js添加3D模型后无法显示的问题求助

核心问题分析 #

模型已成功加载但页面空白，大概率是模型处于相机可视范围外，或相机参数、模型位置/缩放设置不合理导致。结合你的代码，最明显的问题是模型位置设置在Y轴-60处，而相机在(0,0,5)位置并看向原点，该位置超出了相机的垂直视野范围。

具体修复步骤与代码调整 #

1. 调整模型位置与缩放，确保在相机视野内 #

将模型移至场景原点（object.position.set(0, 0, 0)），并根据模型实际大小调整缩放比例，避免因缩放过小或过大导致不可见。

2. 添加辅助工具验证场景 #

添加GridHelper网格辅助线，直观确认场景原点位置，帮助判断模型是否在可视区域。

3. 优化灯光设置 #

增强灯光强度或调整位置，避免因光照不足导致模型看起来"消失"。

4. 添加加载回调与错误处理 #

通过进度回调和错误回调，排查加载过程中可能出现的隐藏问题（比如材质纹理加载失败）。

5. 自动适配相机视野 #

计算模型的包围盒，自动调整相机位置和控制器目标点，确保模型完整显示在视野中。

修改后的完整代码 #

<html>
<head>
    <title>3D Model</title>
    <style>
        html, body {
            margin: 0;
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/OBJLoader.js"></script>
<script src="/js/MTLLoader.js"></script>

<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 5);
    camera.lookAt(scene.position);

    // 添加网格辅助线，可视化场景原点
    const gridHelper = new THREE.GridHelper(10, 10);
    scene.add(gridHelper);

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

    const light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    // 增强方向光强度并调整位置
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 平滑交互效果

    var MTLLoader = new THREE.MTLLoader();
    MTLLoader.setPath("/models/Silivri001/");
    MTLLoader.load(
        "odm_textured_model_geo.mtl",
        function(material) {
            material.preload();

            var OBJLoader = new THREE.OBJLoader();
            OBJLoader.setMaterials(material);
            OBJLoader.setPath("/models/Silivri001/");

            OBJLoader.load(
                "odm_textured_model_geo.obj",
                function(object) {
                    // 将模型移至场景原点，调整缩放比例
                    object.position.set(0, 0, 0);
                    object.scale.set(0.5, 0.5, 0.5); // 根据模型实际大小调整
                    scene.add(object);

                    // 自动计算相机位置，确保模型完整显示
                    const box = new THREE.Box3().setFromObject(object);
                    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;
                    controls.target.copy(center);
                    controls.update();
                },
                function(xhr) {
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                },
                function(error) {
                    console.log('OBJ加载错误:', error);
                }
            );
        },
        function(xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        function(error) {
            console.log('MTL加载错误:', error);
        }
    );

    function animate() {
        requestAnimationFrame(animate);
        controls.update(); // 开启阻尼后需在动画循环中更新控制器
        renderer.render(scene, camera);
    }
    animate();

</script>
</body>
</html>

额外排查方向 #

• 验证模型文件有效性：使用Three.js官方OBJ查看器或其他3D工具打开模型，确认模型本身无损坏。
• 检查纹理路径：MTL文件中引用的纹理图片路径需相对MTL文件所在位置，若路径错误会导致材质显示异常。
• 查看控制台错误：打开浏览器开发者工具控制台，排查是否存在loader未加载、材质解析失败等JavaScript错误。
• 版本兼容性：确保使用的OBJLoader、MTLLoader、OrbitControls与Three.js r87版本匹配，避免版本不一致导致的兼容性问题。

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