Resolving Environment Preset Loading Error in React Three Fiber

anapimolodec

Aiaru / 아야루

Posted on November 27, 2024

Resolving Environment Preset Loading Error in React Three Fiber

Recently I got this error on a project using Three Fiber Js which was working perfectly fine before.


After reading these discussions:

The problem is occurring because it cannot find the preset used in the <Environment> component.


It seems like there are two solutions:

  1. Update Three Fiber JS to version 9.70.4 or above
    npm install @react-three/drei@^9.70.4

  2. For a more resilient approach, store the environment map locally:

  • Identify the HDR file name from the error message (e.g., 'dikhololo_night_1k.hdr' for preset='night')
  • Download the HDR file from free resources website.
  • Place the file in your project's public directory at /public/hdri/
  • Update your Environment component to reference the local file:
<Environment files="/hdri/your_file.hdr">
...
</Environment>
Enter fullscreen mode Exit fullscreen mode

folder structure

This local file approach prevents future loading issues and gives you more control over the environment map used in your scene.


You can check the source code here: code file


Hope it helped anyone!

💖 💪 🙅 🚩
anapimolodec
Aiaru / 아야루

Posted on November 27, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related