使用三个 js 进行 Alpha 裁剪/遮罩平面？答案

【问题标题】：Alpha clipping / masking a plane using three js?使用三个 js 进行 Alpha 裁剪/遮罩平面？
【发布时间】：2014-05-11 16:20:21
【问题描述】：

CSS3 有一个mask 属性，允许使用另一个图像的 Alpha 通道进行剪辑。是否有类似的方法可以在三个 js 中实现这一点？还是需要编写自定义像素着色器？

【问题讨论】：

您需要编写自己的着色器。请参阅此相关答案以获得领先优势：stackoverflow.com/questions/12368200/…
是我不明白它是如何工作的，还是库中没有包含已经这样做的着色器有点傻？似乎很不幸，我必须编写一个着色器才能获得这样的基本功能。

标签： javascript three.js webgl

【解决方案1】：

我意识到这是一个老问题，但我发现它认为我应该在这里添加一个更好的答案。您的问题措辞不错，我完全理解。您正在寻找的是Alpha 地图。

与 GuyGood 告诉你的相反，这是几乎所有 3d 引擎中的一种常见技术......请参阅 brief description here

Three.js r68 及更高版本在大多数材质上都支持他的技术。请参阅three.js documentation here 上的 alphaMap 属性。

【讨论】：

【解决方案2】：

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

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} )
);

【讨论】：

这并不能真正回答我的问题，因为我正在加载的图像没有 Alpha 通道，我正在尝试添加一个。
好吧，那么您的问题措辞不当。而且您想要做的不是任何 3D 应用程序中的基本功能。正如 WestLangley 所说，您必须编写自己的着色器，然后使用第二个灰度纹理（代表您的 Alpha 通道），然后将其用于遮罩。或者可能尝试生成一个空的 RGBA-TextureObject 并从 1 个图像中添加 RGB 和从另一个图像中添加 alpha，然后像我的回答一样继续。 .. .也许这对你也有帮助：stackoverflow.com/questions/16287547/…
您好，感谢您抽出宝贵时间帮助我。不知道我的问题是如何不清楚的，因为我提到了 CSS3 掩码属性，以及我如何在三个 js 中寻找类似物。就“基本功能”而言，阳光下的每个 2D 渲染引擎都支持遮罩，Unity 有一个 alpha 剪辑着色器。当然，我还是新来的，所以如果这是不合理的期望，我深表歉意。另一方面，是否可以在三个js的表面上打印一个img？也许我可以在该元素上应用 CSS3 蒙版并将其拍摄到场景中。
嗯，问题是我不太喜欢 2D Html/CSS 的东西，但问题不在于掩蔽/剪切的东西。只是您想从第二个图像或画布中提供 alpha，而three.js 着色器不是为此而设计的，他们希望蒙版灰度图像位于图像的 alpha 通道中，仅此而已。如果他告诉您必须编写自己的着色器，也请相信 WestLangley，他非常喜欢 Three.js，比我多得多，而且他知道他在说什么；）无论如何，检查链接并尝试您自己的自定义实现目标的着色器。
@GuyGood，他的问题措辞很好。