Three.js正在尝试添加alphaMap

Three.js trying to add alphaMap

本文关键字：添加 alphaMap js Three      更新时间：2024-04-12

我正试图从两个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);
}

代码对我来说似乎还可以

alpha jpg文件中有什么？

考虑

.alphaMap

alpha贴图是一个灰度纹理，用于控制表面（黑色：完全透明；白色：完全不透明）。违约为null。仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器由于额外的DXT压缩和未压缩中为绿色提供的精度位RGB 565格式。仅亮度和亮度/alpha纹理也将仍按预期工作。

文档

相关文章：