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

**URL:** <https://discourse.threejs.org/t/three-js-gltfloader-alpha-does-not-show-transparency-shows-white-background-instead/61349>\
**Category:** Questions\
**Tags:** gltf-loader, textures, materials\
**Created:** [February 11, 2024, 10:36pm UTC](https://discourse.threejs.org/t/three-js-gltfloader-alpha-does-not-show-transparency-shows-white-background-instead/61349 "2024-02-11T22:36:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhiraam\_E](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abhiraam_e/32/15886_2.png) [@Abhiraam\_E](https://discourse.threejs.org/u/Abhiraam_E)\
**Post date:** [February 11, 2024, 10:36pm UTC](https://discourse.threejs.org/t/three-js-gltfloader-alpha-does-not-show-transparency-shows-white-background-instead/61349/1 "2024-02-11T22:36:20Z")

</div>

I have a model defined in blender:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/b/1ba5f2ee176b54c7b23a20c3b35ef9b82d6e636f.jpeg)

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/7/9732bdb9b2fb8c0e50bc0c9d8596cdff25b62f2e.png)

(do not directly use alpha)

And make sure to enable BlendMode as AlphaClip(does not work with blendmode = opaque):  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/a/ba832c70536f183c247fa43b6c21018ebc2812de.png)

However, when loading into three.js as such:

```js
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/6/46ae371a117359f9dc50d0bceb5934d1f3a84569.jpeg)  
The alpha is not working properly - how can I fix this? Any alternative method for alpha? some setting in GLTFLoader?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 11, 2024, 11:15pm UTC](https://discourse.threejs.org/t/three-js-gltfloader-alpha-does-not-show-transparency-shows-white-background-instead/61349/2 "2024-02-11T23:15:45Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 11, 2024, 11:33pm UTC](https://discourse.threejs.org/t/three-js-gltfloader-alpha-does-not-show-transparency-shows-white-background-instead/61349/3 "2024-02-11T23:33:02Z")

</div>

/cc [javascript - THREE.js GLTFLoader alpha does not show transparency(shows white background instead) - Stack Overflow](https://stackoverflow.com/q/77978614/1314762)