I’m trying to import this shirt model from Blender into my three.js code as a gltf:
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:
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:
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.
This worked. Thank you so much!
Hi @donmccurdy, the latest Blender glTF addon documentation is for Blender 2.80.
Has the workflow remained unchanged in subsequent versions?
Cheers
Newer documentation is available, there’s a dropdown in the lower left hand corner of the Blender docs to select a version:
Here’s a link for latest stable docs —
https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html
That’s great! Thank you. I wasn’t aware of the existence of a parallel “/latest” manual.
Bookmarked.
