# How to render .png texture

**URL:** <https://discourse.threejs.org/t/how-to-render-png-texture/30957>\
**Category:** Questions\
**Tags:** textures\
**Created:** [October 19, 2021, 5:43am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957 "2021-10-19T05:43:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rupak](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@rupak](https://discourse.threejs.org/u/rupak)\
**Post date:** [October 19, 2021, 5:43am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/1 "2021-10-19T05:43:38Z")

</div>

Hi,

I am using the following code :

new THREE.TextureLoader().load( “…/uploads/assettype/xxx.png”);

Everything, is working fine except the image rendered is having a white background. The image itself doesn’t have any white background.

I want the background to be transparent.

Any help will be appreciated.

Thanks And Regards,  
Rupak Banerjee.

---

<div class="post-metadata">

**Author:** ![surya\_kumara](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/surya_kumara/32/20636_2.png) [@surya\_kumara](https://discourse.threejs.org/u/surya_kumara)\
**Post date:** [October 19, 2021, 5:52am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/2 "2021-10-19T05:52:58Z")

</div>

I think

```javascript
new THREE.MeshBasicMaterial({ map: THREE.TextureLoader().load( “…/uploads/assettype/xxx.png”), transparent: true, }));

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 19, 2021, 8:35am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/3 "2021-10-19T08:35:59Z")

</div>

Instead of making the material transparent, you can also just configure `alphaTest` for producing an alpha cutout.

---

<div class="post-metadata">

**Author:** ![rupak](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@rupak](https://discourse.threejs.org/u/rupak)\
**Post date:** [October 19, 2021, 11:21am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/4 "2021-10-19T11:21:13Z")

</div>

> [@surya\_kumara](#):
>
> `tureLoader().load( “…/uploa`

```javascript
const material = new THREE.PointsMaterial( { size: 128, sizeAttenuation: true,map:pointtexture, transparent: true } );

```

Doesn’t work. It shows a white background.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 19, 2021, 11:25am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/5 "2021-10-19T11:25:36Z")

</div>

@rupak  
A short working live code example, that demonstrates the issue, will be helpful. jsfiddle, codepen, codesandbox etc.

---

<div class="post-metadata">

**Author:** ![rupak](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@rupak](https://discourse.threejs.org/u/rupak)\
**Post date:** [October 19, 2021, 11:54am UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/6 "2021-10-19T11:54:10Z")

</div>

> [@Mugen87](#):
>
> alphaTest

 ![issue](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/3/439603719827444d4162b3c36a4ff66d24224364.png)

I am having texture at top of another texture. When, my icons are coming over other texture, the background is coming as white.

---

<div class="post-metadata">

**Author:** ![liangyuqi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/liangyuqi/32/22707_2.png) [@liangyuqi](https://discourse.threejs.org/u/liangyuqi)\
**Post date:** [March 15, 2022, 4:45pm UTC](https://discourse.threejs.org/t/how-to-render-png-texture/30957/8 "2022-03-15T16:45:17Z")

</div>

have the same problem as you