使用Three.js如何对平面进行Alpha剪裁/遮罩？

Question

CSS3有一个mask属性，可以使用另一张图片的alpha通道进行剪裁。在Three.js中是否有类似的功能？还是需要编写自定义像素着色器？

- Dany Joumaa

---

你需要编写自己的着色器。可参考以下答案：https://dev59.com/lWjWa4cB1Zd3GeqPpU-V#13547817 - WestLangley

是我不理解这个如何工作，还是没有一个包含此功能的着色器库有点傻？看起来很不幸，我必须编写一个着色器才能获得这样基本的功能。 - Dany Joumaa

Answer 1

我意识到这是一个旧问题，但我遇到了它并认为我应该在这里添加一个更好的答案。你的问题表述得很好，我完全理解了。你要找的是Alpha Map。

与GuyGood告诉你的相反，这是几乎所有3D引擎中常见的技术... 在此处查看简要描述。

Three.js r68及以上版本支持大多数材质上的这种技术。在three.js文档中查看的alphaMap属性。

- bshow

Answer 2

这是我用来创建带有Alpha遮罩的平面的代码...希望能对你有所帮助。我无法检查它是否仍然有效，但如果无效，请尝试将透明度设置为“true”。

var textureWithAlphaChannel = THREE.ImageUtils.loadTexture('textures/texWithAlpha.png');
plane = new THREE.Mesh( new THREE.PlaneGeometry(4,4),
    new THREE.MeshBasicMaterial( {map: textureWithAlphaChannel , transparency: false, color: 0xFFFFFF, side: THREE.DoubleSide} )
);

- GuyGood

---

这并没有真正回答我的问题，因为我正在加载的图像没有 alpha 通道，而我正在尝试添加一个。 - Dany Joumaa

那么，你的问题表述得不好。而且你想做的在任何3D应用程序中都不是基本功能。正如WestLangley所说，你将不得不编写自己的着色器，然后使用第二个灰度纹理（代表你的alpha通道），并将其用于掩蔽。或者尝试生成一个空的RGBA-TextureObject，并从一个图像中添加RGB和另一个图像中的alpha，然后像我的答案一样继续。也许这对你有所帮助： https://dev59.com/fGQo5IYBdhLWcg3wI8jx - GuyGood

嘿，感谢你抽出时间来帮助我。不确定我的问题为何不清晰，因为我提到了CSS3遮罩属性以及我正在寻找在three.js中类似的东西。就“基本功能”而言，太阳下面的每个2D渲染引擎都支持遮罩，Unity有一个alpha剪辑着色器。当然，我还是新手，如果这是一个不合理的期望，那么请原谅我。另外，是否可能在three.js中将img打印在表面上？也许我可以在该元素上应用CSS3遮罩并将其投射到场景中。 - Dany Joumaa

问题在于我不太擅长2D Html/CSS，但问题并不在于遮罩/剪裁。问题在于你想从第二个图像或画布中提取alpha通道，并且three.js着色器并不适用于此，它们期望掩模灰度图像在图像的alpha通道中。如果WestLangley告诉你必须编写自己的着色器，请相信他，他对Three.js非常了解，比我更多，他知道自己在说什么。无论如何，请查看链接并尝试编写自己的自定义着色器以实现目标。 - GuyGood

@GuyGood，他的问题表述得很好。 - Ian Wise

@IanWise：几年后再读这篇文章，似乎我们两个都有些误解。很明显，我理解的并不是他真正想要做的事情。很高兴你提供了正确的答案，使用两个不同的纹理而不是一个带有alpha通道的纹理，这样就不需要alphamap属性了。 - GuyGood