Three.js trying to add alphaMap

Question

I am trying to create a cloud texture from two jpeg files. One being the transparency and the other the color/visible texture. The three.js docs are helpful to an extent but lack actual implementation. So while I know alphaMap exists I am not sure if this is how to implement it. This code doesn't seem to be working properly. The texture is to be the color layer while the alpha is to be the clipping mask. The alpha mask work on itself but doesn't clip the texture layer.

// add clouds
function addClouds(){
    loadText.innerText = "Adding Atmosphere";
    var cloudsTexture = loader.load( "img/earthcloudmap.jpg" ),
        cloudsAlpha = loader.load( "img/earthcloudmaptrans.jpg" ),
        materialClouds = new THREE.MeshPhongMaterial( {
            map: cloudsTexture,
            alphaMap : cloudsAlpha,
            transparent : true,
            depthWrite  : false
        } );
    meshClouds = new THREE.Mesh(spGeo, materialClouds);
    meshClouds.scale.set(1.015, 1.015, 1.015);
    scene.add(meshClouds);
}

Answer 1

The code seems ok to me

What is inside the alpha jpg file ?

take in to account that

.alphaMap

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null. Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the WebGL renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.

doc