# Generate shadow effect by using HDR file

**URL:** <https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548>\
**Category:** Questions\
**Tags:** loaders, shaders, geometry\
**Created:** [April 27, 2022, 12:57pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548 "2022-04-27T12:57:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 27, 2022, 12:57pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/1 "2022-04-27T12:57:41Z")

</div>

Hello guys,  
I need some guidance how we can generate shadow effect using HDR texture any reference or guidance helps me a lot and thanks for your time.

```javascript
function sceneLights(fileEnv) {
    new RGBELoader()
        .load(`${pathEnvironment}${fileEnv}.hdr`, function (texture) {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            scene.environment = texture;
            texture.dispose();
    
		
            hemiLight.visible = false;
            dirLight.visible = false;
        });
}

```

Above is my code where I load multiple HDR files just want to know how we can generate shadow effect without using any light, wanna use only HDR texture.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 27, 2022, 1:48pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/2 "2022-04-27T13:48:15Z")

</div>

Image-based lighting (IBL) like HDR textures do not function as shadow-casting lights, you may want to position a directional light or point light in addition, or bake your shadows in Blender. Lighting from IBL _does_ get reduced by ambient occlusion, so baked ambient occlusion works well too.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 27, 2022, 3:59pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/3 "2022-04-27T15:59:45Z")

</div>

Thanks for your reply, sir you have any reference for this where I know more about this

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 27, 2022, 4:05pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/4 "2022-04-27T16:05:34Z")

</div>

If you search online for “bake diffuse in Blender” there are lots of youtube tutorials and such. Scenes with baked lighting and Principled BSDF or Unlit materials can be exported from Blender to glTF and loaded into three.js.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 27, 2022, 4:19pm UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/5 "2022-04-27T16:19:53Z")

</div>

Is it possible we can bake with the help of three js real time and save it as a png format?

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [April 28, 2022, 6:54am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/6 "2022-04-28T06:54:25Z")

</div>

> Is it possible we can bake with the help of three js real time and save it as a png format?

I don’t think so. There is a couple of addons that you can add to blender to take care of the baking.

> **[GitHub - Naxela/The\_Lightmapper: Fast and easy baked GI Lightmaps for Blender...](https://github.com/Naxela/The_Lightmapper)**
>
> Fast and easy baked GI Lightmaps for Blender and Cycles - GitHub - Naxela/The\_Lightmapper: Fast and easy baked GI Lightmaps for Blender and Cycles

[GLB Texture Tools - Blender Market](https://blendermarket.com/products/glb-texture-tools) (We are using this one in my current project)

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 28, 2022, 7:09am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/7 "2022-04-28T07:09:27Z")

</div>

@JuanP sir I need in Three js like I have 5 glb models loaded into a scene without any light I need to cast shadow from HDR texture for this I need to add AOmap or Lightmaps for this fake shadows or something else.

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [April 28, 2022, 7:29am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/8 "2022-04-28T07:29:41Z")

</div>

@Gundeep_Singh Exactly…

AO maps can be exported directly in the GLTF file trough blender export. Light maps are no supported in GLTF so after importing your GLTF you will need to add the light maps manually to each material.

Light maps use a second UV slot, you will need to generate it in blender too.

Don’t forget to flip the lightmap with `lightMap.flipY` or manually flip vertically the texture/image in photshop or similar (inconsistency between how gltf and threejs handle UVs)

Take a look at this links

> [@Loading Light Map](https://discourse.threejs.org/t/loading-light-map/27648):
>
> Hi everyone, I’m relatively new to Three.js so please excuse me if I’m missing the obvious here. I’m having problems getting a light map to show on a model. I’ve exported a GLB file from Blender, along with a light map exported separately. It has one material, one mesh ‘room’ and one UV map (named ‘UVMap’ in Blender). From what I’ve gathered from the examples online, Three.js automatically creates a second UV when importing a gltf model, and then it’s just a matter of loading the image to use…

> [@Loading lightmap issue](https://discourse.threejs.org/t/loading-lightmap-issue/18882):
>
> Hi guys, i am new to threejs. i was testing loading lightmaps. i am following the document and my lightmap has some position offset. i baked my lightmap using blender on the second uv. HERE is the weird lightmap result.(the lightmap seems to be a little bit offset to the left) here is the scene i made in blender, and the lightmap i baked in blender. any ideas where i made it wrong?

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 28, 2022, 8:22am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/9 "2022-04-28T08:22:36Z")

</div>

@JuanP I saw that links, sir one thing more I wanna know if I added one plane into my scene is it possible with three js it automatically bakes and creates AOmap texture so we can use that texture for a shadows.

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [April 28, 2022, 8:38am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/10 "2022-04-28T08:38:54Z")

</div>

No, you can’t bake textures in threejs

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [April 28, 2022, 9:00am UTC](https://discourse.threejs.org/t/generate-shadow-effect-by-using-hdr-file/37548/11 "2022-04-28T09:00:15Z")

</div>

ok sir thanks @JuanP