Обновите текстуру с тремя. js

Question

У меня есть текстурированная модель из трех. js, и я хочу иметь возможность менять текстуру, определенную в файле .gltf, при загрузке страницы. Я искал здесь для вдохновения.

"images": [
{
  "uri": "flat_baseColor.png"
},
// etc

Поэтому для обновления текстуры я делаю

var images = [
"./textures/01.jpg",
//  "./textures/01.jpg",
];


var texture = new THREE.TextureLoader().load( images[0] );

var my_material = new THREE.MeshBasicMaterial({map: texture});

// load the model
var loader = new GLTFLoader().setPath( 'models/gltf/' ); // trex
loader.load( 'creature_posed.gltf', function ( gltf ) 
{
    gltf.scene.traverse( function ( child )
    {
        if ( child.isMesh )
        {
            // The textures go for a double flip, I have no idea why
            // Texture compensation
            texture.flipX = false;
            texture.flipY = false;
            child.material = my_material;
            texture.needsUpdate = true;
        }
    } );


    var model = gltf.scene;

Только текстура значительно бледна. :(

Я проверил это на себе, так что это не текстура). Что упустили?

Answer 1

При загрузке текстур вам необходимо обращать внимание на цветовое пространство: если текстура имеет данные о цвете (например, .map или .emissiveMap), это, вероятно, sRGB.

texture.encoding = THREE.sRGBEncoding;

См. GLTFLoader документы и управление цветом в трех. js. Это предполагает, что renderer.outputEncoding = THREE.sRGBEncoding также.

три. js r113