Three.js 尝试添加 alphaMap

Question

我正在尝试从两个 jpeg 文件创建云纹理。一个是透明度，另一个是 color/visible 纹理。 three.js 文档在一定程度上有帮助，但缺乏实际实施。因此，虽然我知道 alphaMap 存在，但我不确定这是否是实现它的方法。此代码似乎无法正常工作。纹理是颜色层，而 alpha 是剪贴蒙版。 alpha 蒙版对自身起作用，但不会剪裁纹理层。

// 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

我觉得代码没问题

alpha jpg 文件里面有什么？

考虑到

.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

Three.js 尝试添加 alphaMap

Three.js trying to add alphaMap

javascript

alpha

three.js