Using an alphaMap is not providing transparency in my material

user_271271 0
Viewed 7090

I am trying to create chainlink surface. I have 2 textures; a standard map which has the metallic look of the metal links with a white background (diffuse):

I also have an alpha map:

I am trying to apply both of these to a MeshBasicMaterial without luck:

var chainlinkMask = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_mask.png');
chainlinkMask.wrapS = THREE.RepeatWrapping;
chainlinkMask.wrapT = THREE.RepeatWrapping;
chainlinkMask.repeat.set( 2, 2 );

var chainlinkDiffuse = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_Diffuse.png');
chainlinkDiffuse.wrapS = THREE.RepeatWrapping;
chainlinkDiffuse.wrapT = THREE.RepeatWrapping;
chainlinkDiffuse.repeat.set( 2, 2 );

material.map = chainlinkMask;
material.alphaMap = chainlinkDiffuse;
material.transparency = true;
material.side = THREE.DoubleSide;

This gives me the following:

As you can see, the alpha map isn't being applied.

Why not?

Any help appreciated.

three.js alpha alphablending javascript
3 Answers

directly use material.transparent will cause rendering problem, for example. you have 2 corssing plane with each one applied material.transparent = true, and material.side = DoubleSide. rotate it you will see rendering problem. just use the solution @WestLangley mentioned above.

user_87525350
Related