JavaScript中如何访问GLTF加载异步子函数内部的返回变量？

云原生阿岚

2026-9-24

解决方案

问题根因

GLTFLoader.load是异步回调API，JS调用该方法后不会阻塞等待模型加载完成，会直接执行后续同步代码，因此回调内部给mesh赋值的逻辑还没触发，外层同步代码就已经读取了初始的null值。

步骤1：改造`CreateMesh`方法，返回Promise对象

CreateMesh(path){
    return new Promise((resolve, reject) => {
        this.gltfLoader.load(
            path,
            (gltf) => {
                this.experience.scene.add(gltf.scene)
                // 加载成功，返回模型实例
                resolve(gltf.scene)
            },
            // 加载进度回调，不需要可省略
            undefined,
            // 加载失败抛出错误
            (error) => reject(error)
        )
    })
}

步骤2：异步方式调用获取模型

方式1：使用`async/await`（推荐，可读性更高）

需要将调用CreateMesh的外层函数标记为async：

// 外层函数加async修饰
async initPlayer() {
    try {
        // 等待模型加载完成后再执行后续逻辑
        const playerMesh = await this.experience.loaderGltf.CreateMesh('./../static/player.glb')
        this.players.push(playerMesh)
        // 所有需要用到playerMesh的逻辑都可以写在这里
    } catch (err) {
        console.error('玩家模型加载失败：', err)
    }
}

方式2：使用`then`链式调用

如果不想修改外层函数的声明，可以用Promise的then方法处理返回结果：

this.experience.loaderGltf.CreateMesh('./../static/player.glb')
    .then(playerMesh => {
        this.players.push(playerMesh)
        // 所有需要用到playerMesh的逻辑都可以写在这里
    })
    .catch(err => {
        console.error('玩家模型加载失败：', err)
    })