How to render .png texture

Questions
1

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.

2

I think

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

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

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

Doesn’t work. It shows a white background.

5

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

6

issue
issue1595×707 295 KB

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

1 Like
8

have the same problem as you