使用 gltfLoader 的模型加载和场景渲染之间存在延迟，我怎么知道何时隐藏加载屏幕？

问题描述

我正在使用 Threejs 106 构建，并在我的项目中使用 webglrenderer 和 CSS2DRenderer。

尝试加载 glb 模型并根据 onProgress 的 loader 回调显示加载进度。我在加载 100% 完成时隐藏加载屏幕并调用渲染器，但几何图形的渲染需要几秒钟才能显示在画布上。

我如何知道资产已显示在屏幕上，以便我可以隐藏加载屏幕而不是延迟出现在用户面前？

任何帮助将不胜感激。

解决方法

当您的几何体和纹理完成加载后，它们只存在于 RAM 中，但尚未传递到 GPU。如果这些元素已添加到场景中，它最终会在您第一次调用 render(scene,cam) 时加载到 GPU。这通常是可能导致延迟的瓶颈。资产越大，延迟时间越长。我的建议是等到之后第一次渲染完成隐藏加载屏幕：

onLoadComplete() {
    update();
}

var firstRender = true;
function update() {
    // This will block for a moment the first time
    renderer.render(scene,camera);

    // Hide loading bar after the first render
    if (firstRender) {
        firstRender = false;
        hideLoadScreen();
    }

    // Subsequent frames should run smoothly afterward
    requestAnimationFrame(update);
}

有一些辅助工具可以帮助您将这些资产预先上传到 GPU，这样您就不必等到第一帧。

• renderer.initTexture(texture) 可以在每个纹理加载完成后使用。
• renderer.compile(scene,cam) 可用于预编译材质和着色器，前提是您在几何体完成加载之前拥有它们。