How to bake light with textures?

Toby · May 26, 2023, 9:14pm

I’m new to Blender and Three.js so I’m trying to find a way to bake light with texture into a image and then apply to the model in Three.js.

I try to set up nodes, along with creating a new UV Map for light map as screenshot below. In Blender, I managed to control the UV unwrapping without affecting the textures UV. As the result, I receive a seems to be baked light and textures image. However, when I try to use it in Three.js, the textures is not correctly applied.

Here is the code snippet I use:

const bakedTexture = textureLoader.load('room-box-baked.png');
// reverse Y coordinates
bakedTexture.flipY = false;
// color correction on texture
bakedTexture.encoding = THREE.sRGBEncoding;

// Materials

// Baked Material
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture });

gltfLoader.load('room-box-simple.glb', (gltf) => {
	gltf.scene.traverse((child) => {
		//console.log(child);
		child.material = bakedMaterial;
	});
	scene.add(gltf.scene);
});

Could someone tell me what can I do to correctly bake the texture with light and apply to model in Threejs? I attached the .blend file, .glb and texture image here: room-box.zip - Google Drive