GLTF image texture imported into three.js uses different color space than in Blender

I’m trying to import this shirt model from Blender into my three.js code as a gltf:
blender

However, when it shows up on my site, the image texture that’s overlayed on the center of the shirt appears different than it does in Blender:
website

The transparency from the original image texture is lost and is replaced with flat blue and white. Is this a problem with my three.js code or with my Blender/export settings?

Hi!

Is this a problem with my three.js code or with my Blender/export settings?

We can neither see your three.js code, nor your Blender file — please share those if you have questions about them. I would suggest opening the glTF file in online viewers first. That will tell you whether your code has anything to do with it:

1 Like

Thanks for the reply! I’m gonna try uploading it to a viewer and I’ll reply with my three.js code and Blender settings in a little while.

So, I tried uploading it to babylon.js, and got this:

These are the properties of the image according to babylon:

According to these properties, the image doesn’t have any alpha, even though its a transparent PNG which has a functioning alpha value in Blender:

So I assume the problem lies within how the image is being exported in the glTF, not with my three.js code. Do you know what could be causing this? Thanks again.

The “Mix” node above is not going to export, you’ll need to bake the texture so that it can be connected directly to the “Base Color” socket. Most of Blender’s nodes cannot be exported to any format. I’d refer to the Blender glTF addon documentation for examples of supported node graph setups.

1 Like

This worked. Thank you so much!

1 Like