# Trouble Rendering HDR Background in Three.js project

**URL:** <https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627>\
**Category:** Questions\
**Tags:** blender, hdr, textures\
**Created:** [June 28, 2025, 12:11am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627 "2025-06-28T00:11:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![shadow91102](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shadow91102/32/59337_2.png) [@shadow91102](https://discourse.threejs.org/u/shadow91102)\
**Post date:** [June 28, 2025, 12:11am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627/1 "2025-06-28T00:11:08Z")

</div>

Hello!  
I’m working on a project where I’m trying to switch up the background from a 3D model to an image in HDR format. I’m not quite getting the results I’d hoped for.  
It’s dark and unrealistic.  
I’d really appreciate it if you could take a look at the HDR file generation and the code implementation to see if there might be a little hiccup somewhere.  
I would really appreciate your help.

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/9/39afa0ecec9e6f0b3b6155af95ee6871654ce8c4.jpeg)  
 ![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/3/e33645c534e323bb49213d6282284464c7289d2d.jpeg)  
 ![3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a96f6cfdf678a1c40ebe8f1bab22ee0f9d704e49.jpeg)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 28, 2025, 1:56am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627/2 "2025-06-28T01:56:06Z")

</div>

After loading the HDR, do you set texture.colorSpace = THREE.LinearSRGBColorSpace;

([three.js docs](https://threejs.org/docs/index.html#api/en/constants/Textures))

---

<div class="post-metadata">

**Author:** ![shadow91102](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shadow91102/32/59337_2.png) [@shadow91102](https://discourse.threejs.org/u/shadow91102)\
**Post date:** [June 28, 2025, 2:18am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627/3 "2025-06-28T02:18:10Z")

</div>

Thank you.  
but it is still not working.  
how can I create and use the realistic HDR Background?  
Thank you for your help

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 28, 2025, 2:19am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627/4 "2025-06-28T02:19:58Z")

</div>

> [@manthrax](#):
>
> After loading the HDR, do you set texture.colorSpace = THREE.LinearSRGBColorSpace;

Can you create a jsfiddle or codepen showing your issue?