使用three.js更新纹理

问题描述

我在 Three.js 中有一个纹理模型，我希望能够在页面加载时换出 .gltf 文件中定义的纹理.我在

我已经对其自身进行了测试，因此它不是纹理).错过了什么?

解决方案

加载纹理时需要注意颜色空间:如果纹理有颜色数据(如 .map 或 >.emissiveMap) 可能是 sRGB.

texture.encoding = THREE.sRGBEncoding;

请参阅 GLTFLoader 文档 和 three.js 中的颜色管理.这假设 renderer.outputEncoding = THREE.sRGBEncoding 也是如此.

three.js r113

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?

解决方案

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

这篇关于使用three.js更新纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！