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.

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.

• javascript
• three.js
• alpha
• alphablending

3 Answers 3

Try setting the transparent parameter to true instead of transparency

material.transparent = true;

If you are using an alpha map, use one of these two patterns when defining your material:

alphaMap: texture,
transparent: true,

or

alphaMap: texture,
alphaTest: 0.5, // if transparent is false
transparent: false,

Use the latter if possible, and avoid artifacts that can occur when transparent is true.

three.js r.85

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.