javascriptthree.jsblenderalpha

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

I have a model defined in blender:

enter image description here

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

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

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!")
            });
        });

enter image description here

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

Solution

  • 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 — the alpha socket on Principled BSDF is okay, 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.