TypeError: Invalid URL

[RayJason]

I'm using react-three/drei for 3D. Put the model file in the public. And use the path: '/star. glb'

import { useGLTF } from '@react-three/drei'

// ...
const { nodes } = useGLTF('/star-icon-min.glb')
// ...

Although the model is loaded normally, there is an error:

I would like to know what is the best practice for static files in Remix.

[suhaotian]

Are you sure in /public has this file star-icon-min.glb? I just create one file with same filename, then access http://localhost:3000/star-icon-min.glb, it's works

[RayJason]

Of course

"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
"@remix-run/serve": "^2.8.1",

[suhaotian]

I check the source code, You can't pass path to useGLTF, you need pass url:

const { nodes } = useGLTF('http://localhost:3000/star-icon-min.glb')
console.log(nodes)

That's why Invalid URL

[RayJason]

Meaning it's best to put the file in object storage ahead of time, using an online link?
Is there a more elegant way to use local files? 🤣

[suhaotian]

Put it in yout public folder, then access the file via your server url + public path