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

Question

我正在使用threejs 106 build 并在我的项目中使用webGLRenderer 和CSS2DRenderer。

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

我怎么知道资产已经显示在屏幕上，这样我就可以隐藏加载屏幕而不会使延迟出现在用户面前？

任何帮助将不胜感激。

Answer 1

当您的几何体和纹理完成加载后，它们仅存在于 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) 可用于预编译材质和着色器（如果您在几何体完成加载之前拥有它们）。