Lightmap uses wrong uv in loaded gltf model

Questions
1

Hello, I created a second UV set in my model from blender. but when I load the model lightmap uses the first uv.

import * as THREE from 'three';

import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { ACESFilmicToneMapping, CineonToneMapping, HalfFloatType, LinearEncoding, LinearFilter, NearestFilter, NoToneMapping, ReinhardToneMapping, RGBAFormat, sRGBEncoding, WebGLCubeRenderTarget } from 'three'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 750);


const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 0);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.antialias = true;
renderer.toneMappingExposure = 1;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

let lightProbe;

lightProbe = new THREE.LightProbe();

let cubeTexture;

const genCubeUrls = function (prefix, postfix) {

	return [
		prefix + 'posx' + postfix, prefix + 'negx' + postfix,
		prefix + 'posy' + postfix, prefix + 'negy' + postfix,
		prefix + 'posz' + postfix, prefix + 'negz' + postfix
	];

};

const urls = genCubeUrls('textures/cubeMaps/', '.jpg');

new THREE.CubeTextureLoader().load(urls, function (cubeTexture) {

	scene.environment = cubeTexture;


	lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));
});

lightProbe.add(scene);

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
controls.minDistance = 0.1;
controls.maxDistance = 75;
controls.enablePan = true;
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI * 0.5;

const loader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data

var model;
// Load a glTF resource
loader.load(
	// resource URL
	'bentleyberjer.gltf',
	// called when the resource is loaded
	function (gltf) {



		var lightMap = new THREE.TextureLoader().load('Lightmap.png');

		lightMap.flipY = false;

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Group
		model = gltf.scene;
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

		gltf.receiveShadow = true;



		gltf.scene.traverse(function (child) {
			if (child.isMesh) {
				child.castShadow = true;
				child.receiveShadow = true;
				child.material.lightMap = lightMap;

			}
		});

		scene.add(gltf.scene);
	},
	// called while loading is progressing
	function (xhr) {

		//console.log((xhr.loaded / xhr.total * 100) + '% loaded');

	},
	// called when loading has errors
	function (error) {

		console.log(error);

	}
);```

Where might the problem be?
2

Which version of three are you using?

3

https://unpkg.com/three/build/three.module.js

here. I think it’s the latest version

4

What exactly is a second set of UVs ? If im not mistaken each model has its own UV. If by chance you duplicated you model and used the same UV. Its possible something carried over. For that go to Blender, select your object, then in the menu above, select object - relations - make local or make single user. If you have one model, and indeed somehow have 2 different UVs for the same model, then you can try to manipulate the UV properties in detail. console.log(yourgltfmodel), then the UV properties are located gltf.children.geometry.uv. Just remember the UVs use x and y coordinates, or rather u and v coordinates.

5

Each mesh may have 0–4 sets of UVs. To use the 2nd UV set for a lightmap, try:

texture.channel = 1; // 0, 1, 2, 3

This customization is supported only in three.js r151+.

1 Like
6

thanks. it solved problem.