using `Envinronment` component causes error - failed to fetch

[AlexanderMoroz]

@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!

[CodyJasonBennett]

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.

[AlexanderMoroz]

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.

[arcasoy]

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.

[philippwulff]

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 

[CodyJasonBennett]

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

[drcmda]

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.

[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

[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!

[kikichu121]

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!

[rezatd-develop]

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

[lttkachenko]

The same issue on drei-latest (9.88.17)

[astropicker]

Had this issue this morning on drei (9.88.13)

[tapadar13]

The issue persists on @react-three/drei (^9.102.6)

[dennicLiu]

The issue persists on @react-three/drei (^9.108.4)

[niteshreddy6690]

The issue persists on @react-three/drei": ^9.111.3