Why does my WebP texture render black in Three.js MeshStandardMaterial?

Questions
1

I’m working on a Three.js project where I apply textures to a model.

When I use PNG or JPG textures, everything works correctly. But when I switch to a WebP texture, the model turns completely black.

const baseWebPBody = loader.load(
“models/webp_texture/Male_Body_BaseColor.webp”,
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
texture.needsUpdate = true;
},
undefined,
(err) => {
console.error(“Texture loading error:”, err);
}
);

const bodyMaterial = new THREE.MeshStandardMaterial({
map: baseWebPBody,
});

2

Are you certain the texture has completely loaded before trying to assign it to the material? Can you try it like this…

const bodyMaterial = new THREE.MeshStandardMaterial() 

const baseWebPBody = loader.load(
“models/webp_texture/Male_Body_BaseColor.webp”,
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
bodyMaterial.map = texture
},
undefined,
(err) => {
console.error(“Texture loading error:”, err);
}
);
5

Hm, the code looks OK to me… It’s strange that the same code would with PNG and not WebP. Would it be possible to share a demo, or the textures? needsUpdate shouldn’t be necessary when assigning colorSpace the first time the texture is used, but I wouldn’t expect it to break things either.