Threejs обновляет УФ-карту модели, экспортированной из блендера - PullRequest
Новая
       272

Threejs обновляет УФ-карту модели, экспортированной из блендера

1 голос
/ 10 октября 2019

Я создаю некоторую табличную модель в блендере и применяю текстуру, используя 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

УФ-карта enter image description here

Результат enter image description here

И проблема возникла, когда я пытаюсь сменить модель со стороны ThreeJS,

Я использовал код ниже 

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

        Table.material.needsUpdate = true;
    });

И текстура, которую я использовалта же самая текстура, которую я использовал в блендере, но с другим цветом enter image description here

В результате кажется, что текстура не выровнена, в чем может быть проблема. enter image description here

1 Ответ

1 голос
/ 10 октября 2019

Проблема была с кодом, согласно Three.js документации

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