Lightmap not applying correctly

Questions
1

Hi all, im trying to set up my lightmap in three js. I can get it to display, but it appears to not be wrapping correctly. I’ve included a photo of the output.

Here is the code im using:


const loaderTexture = new THREE.TextureLoader();
const lightmapT = loaderTexture.load("3d/textures2/bakedtx.png");
lightmapT.flipY = true;

lightmapT.channel = 1;
lightmapT.encoding = THREE.sRGBEncoding;

loader.load("3d/test 2.glb", function (gltf) {
  scene.add(gltf.scene);
  gltf.scene.scale.set(1, 1, 1);
  gltf.scene.traverse(function (child) {
    console.log(child.name, "test");

    if (child.material) {
      child.material.lightMap = lightmapT;
      child.material.lightMapIntensity = 2;
    }
  });
});

Is it possible I exported it wrong from blender? ive attached a zip with full examples

image
image1284×862 72.8 KB

untitled.zip (292.5 KB)

  • List item
1 Like
2

When working with light maps - be sure to use r151 or newer, since it adds better support for multiple UV sets exported from Blender.

3

Any other ideas? That doesn’t seem to be the issue. I will be posting an example of it not working

4

Might need to set .flipY = false/true on the lightmap texture?

5

Need to use second uv for lightMap, aoMap etc.

7

Hi, this is great advice. I sent the blender advice to my friend to see if it would help (hes the one creating the model), and in the meantime I set up a three js example in codepen.

I logged out the lightmap, and I do see it, I also flippedY (i even tried flipping X and alternating Y). But nothing I do seems to work. Do you think you could take a quick look at my provided example and find what i’m doing wrong? This problem has plagued me for a couple days, would love to find a solution.

1 Like
8

Is this the intended result:

image
image1033×578 84.7 KB

I have the following observation: the Three.js release is rather old, so some of the texture stuff might not be available (e.g. channels). Also, the uv and uv2 coordinates are different.

Here is the just light map based on uv coordinates (not uv2):

image
image948×520 28.7 KB

So, what I did is:

  • commented line 10 with flipY:
// lightmapT.flipY = true; // commented
  • added manual copy of uv2 into uv (from line 48)
if (child.material) {
   child.geometry.deleteAttribute( 'uv2' ); // added
   child.geometry.setAttribute( 'uv2', child.geometry.getAttribute('uv') ); // added
   child.material.lightMap = lightmapT;
   child.material.lightMapIntensity = 1;
}
1 Like
9

Hi, i’ve updated the scene but I can’t get it to work. I copied your code exactly and updated to a more recent version of three js (158).

Is it possible theres another step to be done, or is it more likely the issue is taking place with blender?

10

Hi,
Please try these changes:

script tag open
async src=“https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js”>
script tag close

script tag open
type=“importmap”>
{
“imports”:{
“three”:“https://unpkg.com/three@0.156.0/build/three.module.js”,
“three/addons/”:“UNPKG - three”
}
}
script tag close

import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

…

   // child.material.map = null;
   // child.geometry.deleteAttribute("uv2"); // added

I made these changes in Your codepen and…

lightmap2

I hope that made some help !

PS: script tag open is "<script " and script tag close is “<” and “/script>”

2 Likes
11

Something has changed (e.g. the model has changed UVs). Here is a modified version:

https://codepen.io/boytchev/full/ZEwRJxq

image

4 Likes
12

Thanks! that looks to be it. Thank you so much. How did you know the channel to use? I guess you just experimented between 0 and 1 and then toggled flipY? Strange, I thought I had 100% tried that combination.

13

I didn’t. It was just a random change until it worked. BTW once it worked, it worked for a combination of parameters that I’m sure I had already tested before … and had failed. So, there is still some mystery.

A more systematic approach would be for someone with sufficiently good skills in Blender and Three.js to advice how to define/export things from Blender, so that they show up well in Three.js. There were many threads in this forum about models from Blender that cannot be immediately rendered well in Three.js, because of incompatibilities of geometries, materials, lights, maps, etc.

1 Like