Loading Light Map

Questions
,
1

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 as the light map.

The model loads fine, but the light map doesn’t show. Here’s the code:

   loadGLTF(){
        
        const self = this;

        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load( '../../assets/ClassroomBakeLightMap.jpg' );
        texture.flipY = false;
        
        const loader = new GLTFLoader( ).setPath('../../assets/');
        // Load a glTF resource
        loader.load(
            'classroom-v6.glb',
            function ( gltf ) {
                const classroom = gltf.scene;

                classroom.traverse(function (room) {
                    if (room.isMesh) {
                        room.material.lightMap = texture;
                        room.material.needsUpdate = true;
                    }
                  });
                self.scene.add( classroom );
            },
                    );
    }

What am I missing here?

I am getting a warning in the console that states the following:

THREE.GLTFLoader: Custom UV set 3 for texture map not yet supported.

Is this related to the issue I’m having? The model does use four image nodes for its appearance (base colour, roughness, emission and normal) but they all use the same UV map. Is this causing the problem?

I’ve been pulling my hair out because of this so thank you in advance for any help. It’ll be very much appreciated.

Best,
Vincent

2

GLTFLoader only does this when the material has an .aoMap, otherwise it has no way of knowing that you need the second UV set. If your model doesn’t have an aoMap, and doesn’t already have >1 UV set, you’ll need to duplicate the first set if that’s what the lightmap should use.

THREE.GLTFLoader: Custom UV set 3 for texture map not yet supported.

It sounds like your model has 3+ UV sets already? Check in Blender, you may see something like this:

Screen Shot 2021-06-29 at 2.51.04 PM

Removing any unused UVs should help.

3

Hi Don,

Thanks so much for your reply, apologies for not saying it sooner but life got in the way. I checked out my model in Blender and there is only one UVMap associated with it.

blender-uvmaps
blender-uvmaps735×271 14.1 KB

I also ran it through the glTF Validator and it indicates there’s only one UVMap.

glTF-Validator

I think there must be an issue with the textures I’m using for the model’s material so I’m planning on changing a few things and optimising the model further. Hopefully I’ll get to the bottom of this issue. I might try a different export setting and maybe load the textures manually in Three.js.

When it comes to creating a second UVMap for the light map, I’ll probably just do it in Blender. Duplicating the current UVMap will create one called UVMap.001. Is there a certain naming convention (e.g. UVMap02 or lightmap) I must follow for UV2 in oder to use it for light maps?

Thanks again!

Best,
Vincent

4

Can you share the classroom-v6.glb model here?