Question 338806 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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?

Tags:

2

Answers


  1. 0

    Try one of these, should fix your issue:

    (…).transparent = true
(…).alphaTest = 0.01
(…).depthTest = false
// (…).depthWrite = false is default in GLTFLoader, but you can try
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search