[react-three-fiber] Texture not loading properly on server

I’m using react-three-fiber in creating a 3D render by using threejs and react together. When run locally, all my textures look fine and load properly. But when run on an Azure VM, it shows some parts of the model have like a foily, almost spacesuit-like texture applied instead of the correct texture.

I’m using an fbx model by the way. I’ve scoured the net and tried possible solutions like checking the network tab and seeing if all the textures are loaded. And they are, with either a 200 or 304 status. Also checked Texture loading not working on server - #11 by Jpuppper but I don’t seem to have a problem with how the textures are formatted, which are supposed to be PNG.

I’m not really sure what’s going on here since it seems to only occur on the server. Any help/suggestion/advice is greatly appreciated. Thanks!

***Note: Here are screenshots of some of my models when loaded on the server:


can only be a wrong path. most likely you are trying to fetch from within the /src folder, which would work in dev in some bundlers but will fail in prod. assets have to be in the public folder. the url then becomes “/file.ext”.

another common mistake is that if you now upload to the server and you have routes, so it’s not www.xyz.com but www.xyz.com/foo then your path must be “./file.ext”.

@drcmda Oh the thing is, the way I’m running stuff on the server is by using npm run start as well since I’m just testing it out. I don’t plan on building it yet. The textures are all in the public folder. What’s weird is previous models I’ve made seem to work fine both locally and in the server. It’s just these two that really have an issue of not loading their respective textures when in the server.

local and server are two separate things, if the server runs in a subdir or route, then “/file.ext” won’t work, it would need to be “./file.ext”. threejs doesn’t care about any of this, it just wants to be able to load the asset.

@drcmda Hmm I see, let me try it out. But its not in subdir/route. its just on port 3000 or something like <server-ip>:3000/

in the end you just need to get the path right. also use chrome devtools, the networking tab, to see the error results, im guessing 404 atm. perhaps it also has to do with server settings, CORS, allowing image assets etc. but here i have no idea, i wouldn’t be able to help.

Yeah its not 404 as I stated in my post. All the textures are fetched without error according to the chrome devtools networking tab

re upping this post for views