Performance issues when rendering first frame of ThreeJS app

Put add a few objects to the scene per frame over time. Three.js inits WebGL resources on first use so if there's 100 objects on your scene all 100 objects get initialized the first time you call renderer.render.

So, just put N objects to the scene, call renderer.render, then next frame add N more to the scene, etc until all the objects have been added.

It's probably most important to do it by material and geometry. In other words if you have 10 different materials and 10 different geometries and you're rendering 100 different models (a model takes one material and one geometry), then you want to make sure the first N models you add don't use all the materials and all the models because those are the things that need to get initialized.

Post processing passes also need initialization so if you're using any of those maybe the first frame just init those, then start adding objects.

You can pre render your scene(s) during the first 1 second calling the renderer.render(camera, scene).

First set auto clear to false

renderer.autoClear = false;

Your pre render does the first painting

const preRender = (time = 1000) => {
    return new Promise((resolve) => {
        const startTime = performance.now();

        function checkTime(currentTime) {
            if (currentTime - startTime >= time) {
                // pre render finished
                resolve();
            } else {
                requestAnimationFrame(checkTime);

                // so the first frames occur here!
                renderer.render(scene, camera);
                renderer.clear();
            }
        }

        requestAnimationFrame(checkTime);
    });
};

Then your instructions would look like this:

preRender().then(() => render());

Render is your loop, where you render your scene(s) normally.

const render = () => {
    requestAnimationFrame(render);

    // your custom logic
    renderer.render(scene, camera);
}

During pre render time you can show a loading and after that, the user experience is smooth.