Question

我正在使用Blender在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);
     }
    );

型号： 请在此处查看模型https://github.com/SourceCodeZone/Model/blob/master/table.glb

UV MAP

结果

当我尝试从Threejs端更改模型时，问题就来了，

我使用了以下代码

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

        Table.material.needsUpdate = true;
    });

我使用的纹理与搅拌机中使用的纹理相同，但颜色不同

结果似乎没有对齐的纹理，可能是问题所在。

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

Threejs更新从搅拌机导出的模型的UV贴图

1 个答案: