Consider a different CDN for drei-assets

[pbeshai]

I have been playing around with <Environment /> in drei and this morning I noticed my app failing to work, showing CORS errors in the console:

Access to XMLHttpRequest at 'https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/dikhololo_night_1k.hdr' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

three.module.js:34824 GET https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/dikhololo_night_1k.hdr net::ERR_FAILED

Going to that URL directly gave me at first a 429 error:

429: Too Many Requests

Trying a minute later gave me a 522 cloudflare error

Error 522 Ray ID: 64dc52f2b941ed17 • 2021-05-11 15:08:56 UTC
Connection timed out

Might be worth using a different CDN that is more reliable, it was super cool how easy it was to use. But also easy enough for me to just host the hdr files locally (thank you open source!). For future reference,

-<Environment preset="city" />
+<Environment path="/hdri/" files="potsdamer_platz_1k.hdr" />

The above code assumes the hdr file was put at url path /hdri/potsdamer_platz_1k.hdr

[joshuaellis]

I think @gsimone might have set this up?

[gsimone]

yeah, I noticed problems with githack today, we need to come up with something more reliable, might tie in with the market work that's happening. For now let's leave this open in case other users have the problem

[fnick851]

I have this issue now:

Access to XMLHttpRequest at 'https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/venice_sunset_1k.hdr' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there a recommended workaround or fix?

[gsimone]

Download the asset and serve it yourself, it's the easiest way around these problems

[ChrisCrossCrash]

I'm also having this issue. I'm getting 429: Too Many Requests responses from the GitHack CDN when I use the Environment component. My production server hosts its own HDRI files, so there's no problem there. The problem is that I've been doing so many little examples and experiments with the preset prop that I've apparently hit the request limit for GitHack.

I think that a potentially more serious problem is that when the CDN doesn't give a successful response, the site just crashes. The user just sees a white screen (at least that's what I've seen with Create React App).

Perhaps the Environment component, and other components that rely on a CDN should handle non-successful responses more gracefully by default? It would be way better to have an ugly/dark 3D model than not be able to use the site at all.

Another great thing would be if you could set an environment variable for the CDN URL. Maybe something like R3F_CDN_URL. Then you could give devs a way to clone a repository with the CDN files and host them themselves. Devs could even use the preset props without problems.

[Radlad-io]

I've been getting CORS issues when trying to use the environment component.

Access to fetch at 'https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/kiara_1_dawn_1k.hdr' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[CodyJasonBennett]

We since moved assets to https://market.pmnd.rs. Please do let me know if there are any withstanding issues, although I can only recommend vendoring and self-hosting assets in production for privacy reasons.