Three.js trying to add alphaMap
<p>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.</p>

<pre><code>// 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);
}
</code></pre>