Applying lightmap to GLTF model uses the wrong UVs

I understand that you can’t set the lightmap in Blender and have to export it and apply it separately.

This is what I have done, the model has 2 UVs the first for the textures the 2nd for the lightmap but when it runs it appears to use the first UV set for the lightmap which understandably looks a little funky:

Here is how I am loading the model:


const loader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/libs/draco/gltf/');
loader.setDRACOLoader(draco);
export const loadGLTF = (function() {
  return url =>
    new Promise(function(resolve, reject) {
      loader.load(url, resolve, null, reject);
    }).then(model => model.scene);
})();



const room = await loadGLTF('https://cdn.glitch.me/f4083998-b0b2-488e-ae5d-dc74ab22d4aa%2Froom.glb?v=1639399149730');
room.castShadow = true;
room.receiveShadow = true;
room.rotation.y = 0.9;
scene.add(room);
window.room = room;

const lightmapURL = 'https://cdn.glitch.me/f4083998-b0b2-488e-ae5d-dc74ab22d4aa%2Flightmap.jpg?v=1639397722587';
const lightmap = new TextureLoader().load(lightmapURL);
room.children[1].children[0].material.lightMap = lightmap;
room.children[1].children[1].material.lightMap = lightmap;

Can you please add the following line and check if the output looks more as expected?

lightmap.flipY = false;
1 Like

Perfect, thank you!!

1 Like