使用three.js渲染GLTF模型失败，请求帮忙定位代码问题

以下是你代码中存在的可直接导致渲染失败的问题：

• 缺少three.js核心库导入：代码中直接使用THREE全局对象调用场景、相机等接口，未先导入three.js核心库，会直接抛出未定义错误。
• GLTFLoader实例化语法错误：已经通过ES模块单独导入了GLTFLoader，不需要再加THREE.前缀调用，原代码new THREE.GLTFLoader()写法错误。
• 无加载错误捕获逻辑：未配置加载失败回调，无法定位是模型路径错误、跨域限制、文件损坏导致的加载失败。
• 模型视野适配缺失：相机固定在z=100位置，若模型尺寸过小、或模型原点不在视野范围内，会出现渲染空白的情况。
• 冗余变量：加载回调内声明的var obj未被使用，属于无效代码。

修复后完整代码 #

// 先导入three.js核心库，路径请根据你的项目实际结构调整
import * as THREE from './three.module.js';
import {GLTFLoader} from "./GLTFLoader.js";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    .01,
    1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

// 修正GLTFLoader实例化写法
var loader = new GLTFLoader();

loader.load(
    "scene.gltf",
    function(gltf){
        scene.add(gltf.scene);
        // 自动适配模型尺寸，确保在相机视野内
        const modelBox = new THREE.Box3().setFromObject(gltf.scene);
        const modelCenter = modelBox.getCenter(new THREE.Vector3());
        const modelSize = modelBox.getSize(new THREE.Vector3());
        const maxSize = Math.max(modelSize.x, modelSize.y, modelSize.z);
        camera.position.z = maxSize * 2.5;
        camera.lookAt(modelCenter);
    },
    // 加载进度回调，不需要可以留空
    undefined,
    // 加载错误回调，方便排查问题
    function(err){
        console.error('模型加载失败：', err);
    }
);

// 调整光照参数避免过曝或暗部死黑
var light = new THREE.HemisphereLight(0xFFFFFF, 0x333333, 1);
scene.add(light);
// 新增方向光，增强模型立体感
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(10, 10, 10);
scene.add(dirLight);

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
animate();

// 新增窗口大小变化适配，避免模型拉伸
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

额外排查项 #

如果修改后仍然无法正常渲染，请检查：

1. 不要直接用本地文件协议（file://）打开HTML文件，会触发跨域限制导致GLTF加载失败，请部署到本地服务器后访问。
2. 确认scene.gltf文件和关联的.bin、纹理文件都放在和HTML同目录下，路径拼写完全正确。
3. 打开浏览器控制台查看报错信息，可直接定位具体问题。

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