使用三个js对一个平面进行Alpha裁剪/屏蔽？

Question

CSS3具有mask属性，允许使用另一个图像的Alpha通道进行裁剪。在三个js中是否有类似的实现？或者是否需要编写自定义像素着色器？

Answer 1

我意识到这是一个古老的问题，但我发现它想到我应该在这里添加一个更好的答案。你的问题没有严厉措辞，我理解得很完美。您正在寻找的是 Alpha地图。

与GuyGood告诉你的情况相反，这是几乎所有3D引擎中的常用技术......请参阅brief description here

Three.js r68及以上版本支持他对大多数材料的技术。请参阅three.js documentation here上的 alphaMap 属性。

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