Three.js 尝试添加 alphaMap

Question

我正在尝试从两个 jpeg 文件创建云纹理。一个是透明度，另一个是颜色/可见纹理。 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

alpha 贴图是一个灰度纹理，用于控制整个区域的不透明度 表面（黑色：完全透明；白色：完全不透明）。默认 一片空白。仅使用纹理的颜色，忽略 alpha 频道（如果存在）。对于 RGB 和 RGBA 纹理，WebGL 渲染器 采样此纹理时将使用绿色通道，因为额外的 在 DXT 压缩和未压缩中为绿色提供了一点精度 RGB 565 格式。仅亮度和亮度/阿尔法纹理也将 仍然按预期工作。

doc