I've been experimenting with creating a cloud texture using two jpeg files - one for transparency and the other for color/visible texture. While the three.js documentation has been somewhat helpful, I'm struggling with the actual implementation. I know that alphaMap exists, but I'm unsure if I'm using it correctly. The code I have doesn't seem to be functioning as expected. The texture should be the color layer while the alpha serves as the clipping mask. The alpha mask works on its own, but it doesn't clip the texture layer.
// trying to 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);
}