使用材质将 Alpha Map 应用于模型会导致模型显示为白色

Question

尝试使用 alpha 贴图根据 alpha 贴图揭示底层模型。目前，alpha 贴图会覆盖模型纹理并显示为全白。

我尝试单独加载 alpha 贴图并将其应用于材质，然后将其附加到对象上 --> 将相关的 alpha 贴图显示为白色，未按预期显示底层模型

我已经尝试将 alpha 贴图和纹理加载到 MeshBasicMaterial --> 显示完整的纹理，其中不透明

let material = new THREE.MeshBasicMaterial({
              // map: iceTexture,
              color: '0xffffff',
              transparent : false,
              side: THREE.DoubleSide,
              alphaTest: 0.5,
              alphaMap: this.alphaMaps[0]
            });

当前结果是 alpha 贴图显示为全白 --> Current Output

这是我希望显示的底层纹理（就在 alpha 贴图允许的地方）--> Underlying Texture

注意：我目前没有使用任何着色器，底层模型是一个简单的 glb，上面应用了冰纹理

注意 2：在this answer 中，它说要在第一个对象后面添加第二个对象...这不起作用，它只是在顶部显示对象，没有应用透明度

Answer 1

我认为让你感到困惑的是transparent: false，而应该是transparent: true。我刚刚尝试了(click here for a live CodePen demo) 下面的代码，透明度按预期工作。我也不认为您需要alphaTest: 0.5，因为您似乎有一个移动渐变的动画序列。

在演示中，我使用这张图片作为 alphaMap：

... 这张图片作为常规地图：

代码实质如下：

// Load the textures
const texLoader = new THREE.TextureLoader();
var alphaTexture = texLoader.load("https://i.imgur.com/aH0jI5N.png");
var mapTexture = texLoader.load("https://i.imgur.com/qdWJkbc.jpg");

// Create geometry
var geometry = new THREE.PlaneBufferGeometry(10, 10, 10, 10);

// Create a basic material
var material = new THREE.MeshBasicMaterial({ 
  map: mapTexture,
  alphaMap: alphaTexture,
  transparent: true
});

var plane = new THREE.Mesh( geometry, material );