Improving Loading Progress Accuracy for Large .glb Files

[kaos1478]

Currently in my setup, I have only one .glb file, but it weighs approximately 30MB. When using import { Loader } from '@react-three/drei', the progress is calculated by the number of items loaded (please correct me if I'm wrong), which causes the loader in my application to stay at 0% until the model is fully downloaded and loaded, and then quickly jump to 100% and display the content. This "issue" is not concerning with fast internet, but on slow connections, it can give the impression of freezing. I've tried a few different approaches to display progress realistically, but without success. Does anyone have any ideas on how to work around this obstacle?

Using: hook: useGLTF component: Loader dependencies: { "@react-three/drei": "^9.105.6", "@react-three/fiber": "^8.16.6", "framer-motion": "^11.2.10", "leva": "^0.9.35", "next": "^14.2.3", "react": "^18", "react-dom": "^18", "three": "^0.165.0" }

[kaos1478]

As a temporary solution, I've split the model into 15 .glb files and integrated them into the scene. Here’s how I'm using them:

const modelsList = useGLTF([
    '/x/x/body.glb',
    '/x/x/book.glb',
    '/x/x/bracelets.glb',
    '/x/x/clothes.glb',
    '/x/x/hair.glb',
    '/x/x/scales.glb',
    '/x/x/snake_body.glb',
    '/x/x/snake_eyes.glb',
    '/x/x/stone.glb',
    '/x/x/straps.glb',
    '/x/x/sword.glb',
])

I also preload these models using useGLTF.preload():

useGLTF.preload([
    '/x/x/body.glb',
    '/x/x/book.glb',
    '/x/x/bracelets.glb',
    '/x/x/clothes.glb',
    '/x/x/hair.glb',
    '/x/x/scales.glb',
    '/x/x/snake_body.glb',
    '/x/x/snake_eyes.glb',
    '/x/x/stone.glb',
    '/x/x/straps.glb',
    '/x/x/sword.glb',
])

I've discontinued the use of the Loader component because it started encountering errors after this change. Instead, I've implemented a custom loader fallback using Suspense.