Update texture with three.js

问题

I've got a textured model in three.js and I want to be able to swap out the texture defined in the .gltf file when the page loads. I've looked here for inspiration.

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

So to update the texture I do

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;

Only the texture is considerably pale. :(

I've tested it against itself, so it's not the texture). What have a missed out?

回答1:

When loading textures you'll need to pay attention to colorspace: if the texture has color data (like .map or .emissiveMap) it's probably sRGB.

texture.encoding = THREE.sRGBEncoding;

See GLTFLoader docs and color management in three.js. This assumes that renderer.outputEncoding = THREE.sRGBEncoding as well.

three.js r113

来源：https://stackoverflow.com/questions/60302943/update-texture-with-three-js