drei using `Envinronment` component causes error

@react-three/drei 9.54.6

It started to happen today after 1 p.m. utc

Uncaught Error: Could not load studio-small-3/studio_small_03_1k.hdr: Failed to fetch) Access to fetch at 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/potsdamer-platz/potsdamer_platz_1k.hdr' from origin ... 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.

We have this error when trying to fetch env files for <Environment /> component preset="studio". After updating to latest version and changing presets back and forward it starts to work again. Looks like it might be some weird cache issue.

This is also happening on all our different envs - local, dev, beta

Thanks in advance!

Jun 05 '23 15:06 AlexanderMoroz

Market's CDN was down in prior versions which that path points to. I swapped Drei to read from #1486 where we already host these files and also read matcaps from.

Jun 05 '23 23:06 CodyJasonBennett

Ok, thanks! so upgrading to version after 9.70.4 looks like fixing problem. It's up to you to close this issue!

Thanks a lot.

Jun 06 '23 10:06 AlexanderMoroz

Does this fix also resolve the preset attribute on <Stage />? For <Environment /> we placed our desired HDR in the public folder and references it with the files attribute to prevent issues in the future, but I don't see an equivalent files attribute on the <Stage /> component.

Jun 06 '23 14:06 arcasoy

Had the same problem with a <Environment preset="warehouse" /> component in my website that I wanted to host with GitHub pages. Upgrading like @AlexanderMoroz suggested worked for me :)

npm install @react-three/drei@^9.70.4 --force

Jun 08 '23 16:06 philippwulff

@arcasoy I think that will require a PR. I don't see a way of specifying it either.

Jun 08 '23 17:06 CodyJasonBennett

Does this fix also resolve the preset attribute on <Stage />? For <Environment /> we placed our desired HDR in the public folder and references it with the files attribute to prevent issues in the future, but I don't see an equivalent files attribute on the <Stage /> component.

you can set the env to null in the stage component and then use your own env. but either way, preset is temporarily fixed with a drei update. and https://github.com/pmndrs/assets looks ready enough so that we can finally move to self host to avoid dealing with cdns altogether.

Jun 09 '23 09:06 drcmda

you can set the env to null in the stage component and then use your own env. but either way, preset is temporarily fixed with a drei update. and pmndrs/assets looks ready enough so that we can finally move to self host to avoid dealing with cdns altogether.

 <Stage
   environment={null}
  >
   <Environment path='/folder_to_hdrfiles/' files="file_name.hdr"></Environment>
 </Stage>

this can be done like this

Jun 22 '23 16:06 kai2128

you can set the env to null in the stage component and then use your own env. but either way, preset is temporarily fixed with a drei update. and pmndrs/assets looks ready enough so that we can finally move to self host to avoid dealing with cdns altogether.
 <Stage
   environment={null}
  >
   <Environment path='/folder_to_hdrfiles/' files="file_name.hdr"></Environment>
 </Stage>
this can be done like this

after install @pmndrs/assets and setup Environment component like below

import { suspend } from 'suspend-react';
const city = import('@pmndrs/assets/hdri/city.exr').then((module) => module.default);

<Stage environment={null}>
    <Environment files={suspend(city)}></Environment>
</Stage>

still get error "THREE.RGBELoader Read Error: no header found" and model can't show properly

Thanks in advance!

Jun 26 '23 09:06 jernox

you can set the env to null in the stage component and then use your own env. but either way, preset is temporarily fixed with a drei update. and pmndrs/assets looks ready enough so that we can finally move to self host to avoid dealing with cdns altogether.
 <Stage
   environment={null}
  >
   <Environment path='/folder_to_hdrfiles/' files="file_name.hdr"></Environment>
 </Stage>
this can be done like this
after install @pmndrs/assets and setup Environment component like below
import { suspend } from 'suspend-react';
const city = import('@pmndrs/assets/hdri/city.exr').then((module) => module.default);

<Stage environment={null}>
    <Environment files={suspend(city)}></Environment>
</Stage>
still get error "THREE.RGBELoader Read Error: no header found" and model can't show properly

Thanks in advance!

Jul 12 '23 10:07 kikichu121

Had the same problem with a <Environment preset="warehouse" /> component in my website that I wanted to host with GitHub pages. Upgrading like @AlexanderMoroz suggested worked for me :)
npm install @react-three/drei@^9.70.4 --force 

solved my problem thanks