3d model only renders once on a mulit page website

[jennyoyo]

Hello everyone! I am currently building an ecommerce app using React. My goal is to render a different 3d object for each item’s show page. I’m using GLTFLoader to load the 3d models and the first 3d object loads wonderfully. However, when I navigate the site to view a different item’s show page, the object does not load. I am getting the error below in my browser console.

And here’s my code:

Is there a way I can have different 3d objects render on different routes? For example, http://localhost:3000/products/1, http://localhost:3000/products/2, http://localhost:3000/products/3 would all load different 3d objects. Or is three.js only meant for one page applications? Thank you so much for your help. I could not find any information on the internet.

[drcmda]

you can have as many routes as you like. but the problem isn’t evident from what you posted. it could be a wrong path, for instance if “url” is a relative path (./models/foo.glb). in that case you must either import the glb and use that url, or put the file into the public folder. it could also be something related to routing.

if you have a reduced codesandbox i could look at it. alternatively you can hop into r3f’s discord and it would be quicker. this discourse is better kept as a clean resource for purely threejs related things.

[jennyoyo]

Hi @drcmda. Thank you so much for your reply. I am part of r3f’s discord. Let me know how I should contact you, I would love to show you what I have right now. I am at a loss and any guidance is appreciated!