Help with loading issue

[Iwandertx]

I have a project that is using two models. Both loaded from BLOB storage.

const Model1 = (props) => {
const modelSource = props.modelPath + '/Model1 .gltf'
const model1 Manager = new THREE.LoadingManager();

model1Manager.onError = function (url) { console.log('There was an error loading ' + url); };
model1Manager.onLoad = function () { props.callBack() }
const [modelObject, setModelObject] = useState()
useEffect(() => {
let modelLoader = new GLTFLoader(model1Manager);
modelLoader.load(modelSource, setModelObject)
}, [])
return modelObject ? : null
}
export default (Model1);

const Model2 = ( ) => {
const model2Path = "string of the url"
const [ model2Object, setModel2Object] = useState()
const model2Manager = new THREE.LoadingManager();
model2Manager.onError = function (url) { console.log('There was an error loading ' + url); };

useEffect(() => {
const model2Loader = new GLTFLoader(model2Manager);
model2Loader.load(model2Path, setModel2Object)
}, [])

if (model2Object) {
    model2Object.scene.position.set(-125, -125, 100)
    model2Object.scene.scale.set(.55, .55, .55)
}
// useFrame(() => { if (model2Object) { model2Object.scene.rotation.x += .0001; } });
return model2Object ? <primitive object={model2Object.scene} /> : null

}

export default ( Model2 );

This is the component that uses both models

                <Canvas className="main Scene" >
                    <SceneLights />
                    <Controls role={pageData.role} />
                    <Suspense fallback={<LoadingScreen />}>
                        <Model1 modelPath={pageData.modelSet.modelSet} callBack={finishedLoading} />
                        <HSR hsData={hsData}  />
                        <Model2 />
                    </Suspense>
                </Canvas>

The only difference between the two is A) model1's path is passed in through props. Because it can be changed. (There are dozens of choices)
B) model2 is a skybox that does not change. But I do set the position and scale. I have commented this out with no change to behaviour in question.

I have two questions.

1st) on a state change both models are re-fetch from BLOB storage. What is the best way to prevent this. I should only need to download them one time.

2nd) When the models are re-rendered there is a very noticeable delay with model2 (it is absent for a full 2 seconds). Model1 is much more complex with 36 textures. While Model2 is simple with 4 textures. Any ideas why?

[drcmda]

use useLoader - it caches your models and makes it way simpler. https://codesandbox.io/s/hungry-easley-lwmpi

also check out gltfjsx, this is how you can turn your gltfs into declarative assets

[Iwandertx]

I changed the code to this:

const Model2 = (props) => {
const model2Path = "url to blob storage"
const model2Object = useLoader(GLTFLoader, model2Path)
if ( model2Object ) {
model2Object .scene.position.set(-125, -125, 100)
model2Object .scene.scale.set(.55, .55, .55) }
return model2Object ? <primitive object={ model2Object .scene} /> : null
}
export default (Model2);

With no discernible improvement.

[drcmda]

without codesandbox theres nothing i can do.

either way, it's

export default function Model({ url }) {
  const model = useLoader(GLTFLoader, url)
  return <primitive object={model.scene} position={[-125, -125, 100]} rotation={[.55, .55, .55]} />
}

<Suspense fallback={null}>
  <Model url="url to blob storage" />
</Suspens>

you dont need to check if the model is there because your component suspends. and if there's an error it throws (error-boundaries to catch it).

[drcmda]

btw ofc that will start the loading process once the component mounts, which isnt optimal - but at least it will cache it. second load is instant.

you can use this https://github.com/pmndrs/use-asset together with new GLTFLoader().load(url, callback) to make precache happen. i will use this soon for useLoader in the upcoming v5 release.