THREE.js GLTFLoader alpha does not show transparency(shows white background instead)

Questions
, ,
1

I have a model defined in blender:
image

As you can see, the texture is partially transparent(see nodes - I convert the white background to alpha):

image
image1233Ă—641 76.7 KB

(do not directly use alpha)

And make sure to enable BlendMode as AlphaClip(does not work with blendmode = opaque):
image

However, when loading into three.js as such:

const gltfLoader = new GLTFLoader();
            var loader = gltfLoader.load(gltfPath, (result) => {
                let root: Group = result.scene


                root.scale.setScalar(10);
                root.name = name;
                root.castShadow = true; 
                root.receiveShadow = true;
                //root.rotation.x = -90;

                let objectWrapper = new Object3D();
                objectWrapper.add(root);

                resolve(objectWrapper);
                console.log("Called!")
            });
        });

image
image457Ă—770 66.8 KB

The alpha is not working properly - how can I fix this? Any alternative method for alpha? some setting in GLTFLoader?

2

Blender’s node graphs don’t export in general — they’re Blender-specific. If you’re creating materials with the intention of exporting to glTF, you’ll want to review the exporter guidelines here and make sure you’re setting the material up that way.

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

tl;dr, alpha works, but textures need to be directly connected to Principled BSDF sockets, with certain exceptions. The long chain of nodes between the texture and the Principled BSDF won’t work.

If you need to convert a node graph to a texture, there are youtube tutorials for “baking blender materials to texture”, or the SimpleBake addon can help make it easier.

1 Like
3

/cc javascript - THREE.js GLTFLoader alpha does not show transparency(shows white background instead) - Stack Overflow

1 Like