用three.js更新纹理

Question

我在three.js中有一个纹理化的模型，我希望能够在页面加载时交换出.gltf文件中定义的纹理。我一直在here寻找灵感。

"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 docs和color management in three.js。这也假定renderer.outputEncoding = THREE.sRGBEncoding。

three.js r113