Bake shadows and import to three js

Question

hope all is well!

I was wondering how I would bake shadows and import the model with these shadows into three js. I would also like to change the material of the model in three js dynamically while retaining the shadows.

Thanks for any help, really appreciate it!

Thanks, Ed.

Answer 1

There are a couple ways of doing baked shadows that you can use with three.js:

• Ambient Occlusion (AO): How do you bake ambient occlusion for a model?. AO provides subtle shadows in holes, corners, and other occluded areas. It remains useful even if the object or lighting moves.
• Lightmap: How can i bake a lightmap and use it in Blender Game engine. Lightmaps provide more complete representation of shadow and light on a surface, including hard shadows cast by other objects, but is only accurate if the object and lighting do not move.

An AO map can be embedded in the model in formats like glTF (see https://github.com/KhronosGroup/glTF-Blender-IO), which three.js can load via THREE.GLTFLoader. I'm not aware of a way to export the lightmap as part of your model, so you'd probably need to load it separately via THREE.TextureLoader.

In either case, the material can be modified independently of the AO or lightmap.

Finally, you could also bake the shadows directly into a base color texture, but then you lose the option of modifying the material in three.js.