How to deploy react-three-fiber application?

[cmd-save]

I've encountered this is issue when building or deploying to production. The model (glTF) was loaded but it's not showing on the screen. Checking on the console, there was no error logs at all. There is the <canvas> on the markup but the screen is blank. On my local machine, it works 100%. I'm using create-react-app by the way. So is there a proper way to deploy react-three-fiber to production?

[gsimone]

It doesn't seem related to r3f, do you have any public code we can take a look at? Or maybe even the deployed app

[cmd-save]

Here is a quick code sample https://codesandbox.io/s/heuristic-leavitt-n7sd3?fontsize=14&hidenavigation=1&theme=dark

[stephencorwin]

@belmer You should check the network tab to see if the object is being loaded without any errors. It might be being blocked by a CORS policy. These errors might not get surfaced to the console and instead by errors on the request itself.

[cmd-save]

Yes- I checked the Network tab and everything is working fine. The glTF file was loaded correctly even from a remote server. CORS shouldn't be a problem as I'm running it on my private network. I actually also ran it on my local machine on a Production build but with same issue. Development build works perfectly fine.

[cmd-save]

Even with this sample code https://codesandbox.io/s/heuristic-leavitt-n7sd3?fontsize=14&hidenavigation=1&theme=dark building this on production has the same issue. I'm not sure if the UV maps contributes to the issue but this model for example have some UVs in it.

[drcmda]

it doesnt look correct to me, the way you treat the model data. for instance, you dump a scene into the render graph, with a material, but scenes dont have materials in threejs. also, you're missing dispose={null}, if that component renders twice for whatever reason, r3f will dispose materials and geometries. (most likely that's your issue, the model will simply disappear)

it looks to me you like you want to exchange gltf materials and meshes, it couldn't be easier if you use GLTFJSX: https://github.com/react-spring/gltfjsx plain threejs people are used to mutation and traversal, even changing a simple color is a complete mess for them. in react that's as comfortable as dealing with a SVG.

https://codesandbox.io/s/focused-feistel-vkiym?file=/src/index.js

[cmd-save]

Hi @drcmda , thanks man. Works perfectly! Thank you for explaining.