DEV Community

Cover image for Resolving Environment Preset Loading Error in React Three Fiber
Aiaru / 아야루
Aiaru / 아야루

Posted on

1

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
nurbakzh profile image
Nurbek Zhomartov

Рахмет за идею, долго не мог решить проблему, из-за того, что CDN у drei время от времени не подгружает окружение

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more