GTLF/GLB doesn’t load Glass when i load in three js but other file extension can
Seems like a duplicate of this thread
Custom Blender materials like Glass BSDF cannot be exported to .gltf outside Blender - they use their own node system. Only Principled BSDF can be exported (probably not with 100% support, but still.)
Can you please share a blender file of the model you are trying to export?
i tried to upload but fail…seems like my file is too large to upload
if u wan i can send u email or google drive
i hv check the materials its Principled BSDF, what happen? help
It does not seem like a setup for a glass surface - are you sure there are no additional shaders applied?
seems like my file is too large to uploadif u wan i can send u email or google drive- can you share a link to Google Drive? It can be just the glass object - you can remove all other parts of the model / blender scene.
Use Alpha Blend in the “Setting” section
Also, you won’t get refraction/reflection. Just so you know.
Im super new to 3d model, this model I buy from online and the glass materials I jz follow step by step from YouTube.
I hv share the model on Google drive, would be grateful if can help
@Danson_Wong the transparency data is not in that GLB at all, because it isn’t getting exported. You’ll need to share the
.blend, or some other file that works correctly, for us to help you convert it to glTF.
We are also working on support for the ‘transmission’ property but it won’t export or load in three.js correctly just yet. Note that physical transparency with refraction is more expensive, and more advanced to set up, so I would still recommend using the “Alpha Blend” mode suggested by Usnul here.
Yes, there seems to be some issue with alpha channel in glTF. Added a half-transparent cube to your model and exported as:
- glb (cube opaque):
- dae (cube barely visible):
Couldn’t get it to export to glTF with proper alpha with any combination of settings. Unless someone else does know why it happens, you can either use another model format (Collada seems to work fine), or assign a material with a name “glass” in Blender and then manually apply transparency / refraction to it when loading the model in your app (this is also the only option if you want refractions to work as they do in your blend file, screen space refractions can’t be imported automatically.)
This Blend file doesn’t seem to be set up right. Most of the transparent materials have transmission enabled and not “Alpha Blend”. There are textures missing from the file so I can’t export it myself.
It looks like you currently need to set the alpha channel of the material’s base color to get it to export, not just the separate Alpha channel, in addition to enabling Alpha Blend mode. That’s a bug, but easy to work around. With that you can definitely export transparent materials:
okay so my solution is import to threejs editor and set opacity and enable transparent then export to glb
thanks for helping anywhere, i appreciate it
there are lot of file formats, no idea what are the different.
i choose glb cuz its fast to load.
Yes, you can create glass in blender and export it in a glb file. See Aircraft in Flight
As you can see, nose of the aircraft is mostly transparent and you can see objects behind the glass.
I used a transparent png file for the texture and a gltf Metallic Roughness shader but you might be able to use a Principled BSDF shader.
I can put a sample of the texture on my website if that would help.
Using the Principled BSDF node is the recommended way to do this, see the Blender glTF docs. If the transparency is just a scalar (i.e. not a texture) you’ll currently need to use the opacity value within the Principled BSDF “Base Color” socket, rather than the dedicated Principled BSDF “Alpha” socket. That should be fixed pretty soon.
Thanks for the head’s up. I guess that’s what I had originally done, but since I was under the impression that the gltf Metallic shader was the preferred shader, I switched to that. In either case, it appears that you do not have to use the three.js editor to create a transparent texture.