useGLTF.clear(url) not working

Questions
1

Hi, I have a problem with keeping models loaded with useGLTF in the cache, well when calling the method useGLTF.clear(modelUrl) it is not removed and even if the model in the modelUrl changes, the previous model is constantly loaded. All my code looks like this:

const { nodes } = useGLTF(modelUrl);

    useEffect(() => {
        return () => {
            useGLTF.clear(modelUrl); 
        };
    }, [modelUrl]);

I tried to diagnose the problem on my own but unfortunately I was unsuccessful. Does anyone have any idea what should help?

2

.clear just clears the thing from cache, the gltf data will be gone. threejs geometry and materials will be cleared by r3f automatically if the components unmounts, if dispose={null} isn’t present.

// Will be destroyed if unmounted
return <mesh geometry={nodes.foo.geometry} material={materials.bar} />
// Will *not* be destroyed if unmounted
return <mesh geometry={nodes.foo.geometry} material={materials.bar} dispose={null} />

the problem is that you’re swiming against the stream. useGLTF is specifically made for cache. cache and uncache on every url change is using cache for nothing. if you don’t want that, why not just using THREE GLTFLoader as is?

3

okey so I used GLTFLoader() as you suggested, unfortunately there is a problem that if I have such a code:

const loader = new GLTFLoader();
    loader.load(
        "http://192.168.33.12:8080/equipments",
        (gltf) => {
            console.log("loaded")
        },
        undefined,
        (error) => {
            console.error("An error occurred while loading the model:", error)
        }
    )

, an error appears: An error occurred while loading the model: [TypeError: Cannot read property ‘match’ of undefined].

4

try this, the undefined its a percent of loaded

const loader = new GLTFLoader();
loader.load(
“http://192.168.33.12:8080/equipments”,
(gltf) => {
console.log(“loaded”)
},
()=>{},
(error) => {
console.error(“An error occurred while loading the model:”, error)
}
)

or async

var model = await new GLTFLoader().loadAsync('url');
5

it looks like it’s a problem with something else because if I replace the url :

const loader = new GLTFLoader()
    loader.load(
        // "http://192.168.33.12:8080/equipments",
        require('@/assets/models/floor1_2.glb'),
        (gltf) => {
            console.log('loaded', gltf)
        },
        () => {},
        (error) => {
            console.log('An error happened', error)
        }
    )

it pops up the same error An error happened [TypeError: Cannot read property ‘match’ of undefined]. On the other hand doing exactly the same thing like this works:

import Floor1 from '@/assets/models/floor1_2.glb'

const models: Record<string, string> = {
    1: Floor1,
}

type ModelProps = {
    model: number
}

export const Model = (props: ModelProps) => {
    const gltf_model = models[props.model]
    const { nodes } = useGLTF(gltf_model)