使用 alphaMap 无法在我的 material 中提供透明度

Question

我正在尝试创建 chainlink 表面。我有 2 个纹理；具有白色背景（漫反射）金属链接的金属外观的标准贴图：

我还有一张 alpha 贴图：

我正在尝试将这两个应用到 MeshBasicMaterial 但运气不佳：

var chainlinkMask = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_mask.png');
chainlinkMask.wrapS = THREE.RepeatWrapping;
chainlinkMask.wrapT = THREE.RepeatWrapping;
chainlinkMask.repeat.set( 2, 2 );

var chainlinkDiffuse = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_Diffuse.png');
chainlinkDiffuse.wrapS = THREE.RepeatWrapping;
chainlinkDiffuse.wrapT = THREE.RepeatWrapping;
chainlinkDiffuse.repeat.set( 2, 2 );

material.map = chainlinkMask;
material.alphaMap = chainlinkDiffuse;
material.transparency = true;
material.side = THREE.DoubleSide;

这给了我以下信息：

如您所见，未应用 alpha 贴图。

为什么不呢？

感谢任何帮助。

Answer 1

尝试将 transparent 参数设置为 true 而不是 transparency

material.transparent = true;

Answer 2

如果您使用的是 alpha 贴图，请在定义 material 时使用这两种模式之一：

alphaMap: texture,
transparent: true,

或

alphaMap: texture,
alphaTest: 0.5, // if transparent is false
transparent: false,

尽可能使用后者，并避免透明为真时可能出现的伪影。

three.js r.85

Answer 3

直接使用material.transparent会导致渲染问题，例如。你有 2 个交叉平面，每个平面都应用了 material.transparent = true 和 material.side = DoubleSide。旋转它你会看到渲染问题。只需使用上面提到的解决方案@WestLangley。

使用 alphaMap 无法在我的 material 中提供透明度

Using an alphaMap is not providing transparency in my material

javascript

three.js

alpha

alphablending