Three.js LoadingManager onProgress 仅在完成后工作？

Question

我正在尝试在 three.js 中制作一个带有

HTML

进度条的加载屏幕。我使用

THREE.LoadingManager()

传递到我的

GLTFLoader

。我使用

onProgress

方法来获取每个模型加载的时间，但它似乎不起作用。它只在最后工作，一旦一切都被加载（所以基本上它从 0% 跳到 98%）。我认为这与我使用包装函数有关。这是我的代码：

let loadingManager = new THREE.LoadingManager();

loadingManager.onProgress = function(url, loaded, total){
    document.getElementById('loading-progress').value = Math.round((loaded / total) * 100);
    document.getElementById('loading-progress-label').innerHTML = `${Math.round((loaded / total) * 100)}%`;
}

let loader = new THREE.GLTFLoader(loadingManager);

function load(asset, pos=[0, 0, 0], rot=[-Math.PI / 2, Math.PI, Math.PI], scale=[5, 5, 5], appendTo){
    loader.load(`Assets/${asset}.glb`, function(object){
        object.scene.position.set(pos[0], pos[1], pos[2]);
        object.scene.rotation.set(rot[0], rot[1], rot[2]);
        object.scene.scale.set(scale[0], scale[1], scale[2]);
        object.scene.name = asset;

        scene.add(object.scene);

        if(appendTo != undefined){
            appendTo.push(object.scene);
        }
    });
};

//Decoration
load('platform_grass', [-5, 4, -0.5]);
load('platform_grass', [-2, 3, -0.5], undefined, [5, 10, 5]);
load('rock_largeA', [1, 3, -1], undefined, [2, 2, 2]);
load('plant_bushDetailed', [-5, 1, -1], undefined, [3, 3, 3]);
load('plant_bushDetailed', [-2, 6, -1], undefined, [3, 3, 3]);

我很确定问题与我使用

load

功能有关，而不是手动加载每个资产。任何帮助表示赞赏。

谢谢！

Answer 1

LoadingManager 文档实际上说

onProgress —（可选）当项目完成complete时将调用此函数。

尝试将第二个回调函数传递给加载程序（它将作为您的进度回调）。

这对我有用：

const loadingManager = new LoadingManager()

// optionally
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')

const loader = new GLTFLoader(loadingManager)

// optionally
loader.setDRACOLoader(dracoLoader)

loader.load(
  gltfPath,
  // on load handler
  async (gltf) => {
    // do whatever you want with the gltf
  },
  // on progress handler
  (xhr) => {
    const progressXHR = xhr.loaded / xhr.total
    // ...
  }
)