如何在 Three.js 中使用带有 ShaderMaterial 的 alpha 贴图纹理？答案

【问题标题】：How to use alpha map textures with ShaderMaterial in Three.js?如何在 Three.js 中使用带有 ShaderMaterial 的 alpha 贴图纹理？
【发布时间】：2018-04-02 05:25:15
【问题描述】：

我有一个 png 图像 (16x16)，我想在自定义材质 THREE.ShaderMaterial 中用作 alpha 贴图纹理。这是图片：

这是我预加载的纹理对象的设置：

alphaMap.magFilter = THREE.NearestFilter
alphaMap.wrapT = THREE.RepeatWrapping
alphaMap.repeat.y = 10
alphaMap.needsUpdate = true

在我添加的ShaderMaterial的属性中：

transparent: true

然后添加defines：

USE_ALPHAMAP: true,
ALPHATEST: 0.5

最后是uniform：

alphaMap: { type: 't', value: alphaMap }

我没有收到任何错误，但网格不可见。如果我将其设置为diffuseColor.rgb，则网格全黑。有什么遗漏或错误？

【问题讨论】：

标签： javascript three.js glsl textures shader

【解决方案1】：

此问题的解决方案（未记录）是：

uniforms['alphaMap'].value.needsUpdate = true

这样做是行不通的：

alphaMap.needsUpdate = true

这里应该可以加上：How to update things（贴图需要needsUpdateflag，但不清楚ShaderMaterial和制服怎么处理）。

【讨论】：