Threejs update UV map of model exported from blender

I am creating some table model in blender and applied texture using UV mapping and exported using GLTF. And when I use the gltf loader and load the object and add to scene it works fine.

Code:

  var container, scene, camera, renderer, controls, stats;
  var Table;
    // SCENE
	 scene = new THREE.Scene();
	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position.set(2,2,5);
	camera.lookAt(scene.position);	
	// RENDERER
	if ( Detector.webgl )
		renderer = new THREE.WebGLRenderer( {antialias:true} );
	else
		renderer = new THREE.CanvasRenderer(); 
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'webgl' );
	container.appendChild( renderer.domElement );
	// CONTROLS
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	// EVENTS


	// STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );

	// LIGHT
	var light = new THREE.PointLight(0xffffff,1);
	light.position.set(-2,3,-3);
	scene.add(light);

	var ambient = new THREE.AmbientLight( 0xffffff, 3.9);
	scene.add( ambient );

	var loader = new THREE.GLTFLoader();
	loader.load( './Model/table.glb',
		function ( gltf ) {
			gltf.scene.traverse( function ( node ) {
                           if(node.isMesh ){
 			      if(node.name==="Table"){
                                 Table = node;
			      }							 								 
			   }
			  
  		});
              scene.add(gltf.scene);
		
		});

	 },
	 function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	 },
	 function ( error ) {
		console.log( 'An error happened---' +error);
	 }
	);

Model:
Please see the model here https://github.com/SourceCodeZone/Model/blob/a5a1b04ae8e2884fab0318483b0d0604b026acdf/table.glb

UV MAP
enter image description here

Result
enter image description here

And the problem came when I try to change the model from threejs side,

I used below code

    var textureLoader = new THREE.TextureLoader();
	textureLoader.load( "./Texture/table/Table-map-new.png", function ( map ) {
		Table.material.map = map;

		Table.material.needsUpdate = true;
	});

And the texture I used is the same texture which I used in blender but with different colour
enter image description here

The result seems not aligned texture, what could be the problem.
enter image description here

You need to set texture.flipY = false when working with glTF files.

https://threejs.org/docs/#api/en/textures/Texture.flipY

4 Likes

Thanks, it works.

Works for me too thank you!!!