Importing .glb with transparent material becomes opaque in threejs

Questions
, ,
1

Hey everyone, i imported a .glb with a mesh with the following material, which is transparent in blender

Screenshot 2024-11-03 at 9.29.00 PM
Screenshot 2024-11-03 at 9.29.00 PM1480×700 91.6 KB

When i load it in threejs it is completely opaque.
Can someone help?

Thank you !

2

Here is what I use to create transparent textures in Blender:

shader
shader824×486 36.2 KB

I believe the source material is simply a light gray color with minimal alpha. The transparent texture will show up as transparent in three.js.

However, this is not a 100% perfect solution. When I am using shadows and load a glb scene that has parts that use this texture, I have to parse the scene to insure that those parts do not cast a shadow. Here is an example:

function loadModel() {
    gltfLoader.load(fileName, function (gltf) {
        gltf.scene.traverse(function (child) {
            if (child.isMesh) { // default = cast/receive shadow
                child.castShadow = true;
                child.receiveShadow = true;
            }
            if ( // exception for glass parts
                child.name == "propeller" ||
                child.name == "canopy1glass" ||
                child.name == "canopy2glass") {
                    child.castShadow = false;
                    child.receiveShadow = false;
            }
        });
        model = gltf.scene;
    });		
}

As this indicates, you need to make sure that you use separate parts for transparent textures.

3

Note that Blender’s exporters cannot translate node graphs into materials, you do need to set the materials up for compatibility with the format you’re exporting to. In general the glTF exporter is looking for colors, factors, and textures connected to the Principled BSDF node as shown in the example shader graphs here:

https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html

1 Like
4

Thank you phil and don! Will play around with principled bsdf then!

5

Thanks. That document is why I recently changed all my textures to use Principled BSDF instead of, for example, GLTF Metallic. I think Blender 4.2 inserted the Light Path, Disable Shadow, and Transparent BSDF. Since Disable Shadow apparently has no effect on three.js, there may be better ways to create transparent materials For example, you may not have to import a material, but can just use Principled BSDF and Material Output.