使用 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 and color management in three.js。这也假设 renderer.outputEncoding = THREE.sRGBEncoding。

three.js r113

使用 three.js 更新纹理

Update texture with three.js

textures

three.js