Three.js Threejs更新从blender导出的模型的UV贴图

我正在blender中创建一些表格模型，并使用UV贴图应用纹理，并使用GLTF导出。当我使用gltf加载程序加载对象并添加到场景中时，效果很好

代码：

  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);
     }
    );

// 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;

型号： 请看这里的模型

UV贴图

结果

当我试图从三面改变模型时，问题来了

我使用了下面的代码

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

        Table.material.needsUpdate = true;
    });

我用的质地和我在搅拌机里用的一样，只是颜色不同

结果似乎纹理不对齐，可能是什么问题。

---

根据Three.js

GLTFLoader将自动正确配置从.gltf或.glb文件引用的纹理，前提是渲染器的设置如上所示。外部加载纹理（例如，使用TextureLoader）并将其应用于glTF模型时，必须给出颜色空间和方向：

  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);
     }
    );

// 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;

因此，我已将纹理加载部分更新为

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;
});