Threejs更新从blender导出的模型的UV贴图答案

【问题标题】：Threejs update UV map of model exported from blenderThreejs更新从blender导出的模型的UV贴图
【发布时间】：2020-02-07 13:21:50
【问题描述】：

我正在搅拌机中创建一些表格模型，并使用 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);
     }
    );

型号： 型号请看这里https://github.com/SourceCodeZone/Model/blob/master/table.glb

紫外线地图

结果

当我尝试从threejs方面更改模型时，问题就来了，

我用下面的代码

    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 blender texture-mapping gltf uv-mapping

【解决方案1】：

问题出在代码上，根据 Three.js documentation

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

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

【讨论】：