Threejs update UV map of model exported from blender

Question

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/master/table.glb

UV MAP

Result

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

The result seems not aligned texture, what could be the problem.

CodeDezk CodeDezk · Accepted Answer · 2019-10-10T10:58:59

The problem was with the code, according to Three.js documentation

GLTFLoader will automatically configure textures referenced from a .gltf or .glb file correctly, with the assumption that the renderer is set up as shown above. When loading textures externally (e.g., using TextureLoader) and applying them to a glTF model, colorspace and orientation must be given:

// If texture is used for color information, set colorspace.
texture.encoding = THREE.sRGBEncoding;

// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
texture.flipY = false;

So I have updated the texture loading part to

var textureLoader = new THREE.TextureLoader();
textureLoader.load( "./Texture/table/Table-map-new.png", function ( map ) {
    Table.material.map = map;
    Table.material.map.encoding = THREE.sRGBEncoding;
    Table.material.map.flipY = false;
    Table.material.needsUpdate = true;
});

Threejs update UV map of model exported from blender

1 Answers