I want to understand , when threejs renders it’s geometry compared to browser rendering and eventloop . I am using a 3rdPartyLib which uses three js. I am loading parts in big quantity lets say 100 - 1000 in for loop . Once part loaded I am expecting to see them in them in the canvas one by one. but I am seeing everything at last all together once everything loaded . Till the time user is not able to do anything . I can see in console log is completing very fast for all the parts. Bu I am not seeing geometries in the viewer.
Console log runs in weird ways in terms of what and when it prints, if you want to debug timing - it won’t be much help.
As soon as you call .render, GPU is querried to render the frame. That’s as much as you or anyone has control over it. Whether or not that .render is called before or after models are loaded onto the GPU - depends on your code.
For loop is a blocking loop. So the loop is only finished when everything inside it is finished / loaded.
Then you need to load the parts asynchronously and also not use the for loop. Ex.:
const urls = [ './part1.glb', './part2.glb', './part3.glb', ... ];
const loadModels = (url, target) => {
if (!urls.length) return;
// NOTE This is non-blocking, because async
gltfLoader.load(urls.pop(), ({ scene }) => target.add(scene));
};
const onRenderFrame = () => {
renderer.render(scene, camera);
requestAnimationFrame(onRenderFrame());
};
const scene = new THREE.Scene();
const init () => {
onRenderFrame();
loadModels();
};
Even when loading model parts async, you will still get stutter whenever new material is added to the scene - so if each part uses a new material, that ain’t going to be pretty.