Three.js中GLTF加载完成后无法赋值给外部变量的问题

核心原因 #

gltfLoader.load()是异步操作——浏览器不会等待模型加载完成再执行后续代码，而是先运行console.log(model)，此时模型还未加载完毕，model自然是undefined。模型能正常显示，是因为加载完成后回调函数会触发，给model赋值并添加到场景，但这一步发生在console.log之后。

解决办法 #

办法1：在回调函数内操作模型 #

所有需要用到model的逻辑都放在加载完成的回调里，确保模型已经完成赋值：

let model;
gltfLoader.load('./assets/javaLogo.gltf', function(gltf){
    model = gltf.scene;
    model.scale.set(44,44,44);
    scene.add(model);
    model.position.x = 44;
    model.position.y = -12;
    // 在这里操作model，比如打印或执行业务逻辑
    console.log(model); // 正常输出模型对象
});

办法2：用Promise+async/await封装加载 #

把加载过程包装成Promise，通过async/await控制代码执行顺序，让逻辑更直观：

function loadGLTFModel(url) {
    return new Promise((resolve, reject) => {
        gltfLoader.load(url, (gltf) => {
            resolve(gltf.scene);
        }, undefined, (error) => {
            reject(error);
        });
    });
}

// 用async函数执行加载流程
async function initModel() {
    let model = await loadGLTFModel('./assets/javaLogo.gltf');
    model.scale.set(44,44,44);
    scene.add(model);
    model.position.x = 44;
    model.position.y = -12;
    console.log(model); // 正常输出模型对象
}

initModel();

办法3：自定义事件监听加载完成 #

如果必须在回调外操作模型，可以通过自定义事件传递模型对象：

let model;
gltfLoader.load('./assets/javaLogo.gltf', function(gltf){
    model = gltf.scene;
    model.scale.set(44,44,44);
    scene.add(model);
    model.position.x = 44;
    model.position.y = -12;
    // 触发自定义事件，将模型作为参数传递
    window.dispatchEvent(new CustomEvent('modelLoaded', { detail: model }));
});

// 监听事件，拿到模型后执行后续逻辑
window.addEventListener('modelLoaded', (e) => {
    console.log(e.detail); // 正常输出模型对象
    // 在这里编写需要操作模型的代码
});

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