Generate shadow effect by using HDR file

Questions
, ,
#1

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.

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.

#2

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.

#3

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

#4

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.

#5

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

#6

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.

GLB Texture Tools - Blender Market (We are using this one in my current project)

#7

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

#8

@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

#9

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

#10

No, you can’t bake textures in threejs

#11

ok sir thanks @JuanP