如何仅为材质纹理设置透明度/不透明度

Question

我希望通过在使用光标悬停物体时更改物体颜色来实现对物体的高光效果。对象的材质有纹理贴图（比如说棋盘格）。我正在使用缓动功能将材质颜色从红色变为蓝色。

我想要达到的效果是将带有红色棋盘格的材料变成蓝色而没有格子板纹理。我想让纹理贴图松散所有不透明度，同时颜色从红色变为蓝色。我通过使用两个网格实现了这种效果，一个网格使用红色格子板材料，第二个网格使用蓝色材质透明且不透明度设置为零。我已经将不透明度从0调整为1，并实现了效果。

然而，我想知道是否可以通过仅使用单个材质的一个网格来获得相同的效果。如果我可以设置独立于材料透明度的地图透明度，那将是可能的。我担心只有为此目的重复网格的性能问题。解决问题的一种方法是在运行时创建悬停的网格克隆并在悬停后将其丢弃。

对此有何想法？

Answer 1

您无法更改纹理的不透明度，但可以更改传递的图像的不透明度。只需在canvas元素上绘制它并将此画布传递给纹理而不是图像。当您需要更改不透明度时，只需在此画布上重新绘制一个需要不透明度的图像，然后根据需要标记纹理更新：

texture.needsUpdate = true;

Answer 2

您可以通过创建自定义ShaderMaterial来实现所需的效果。

以下是如何破解WebGLRenderer可视化效果的方法：

重写map_fragment.glsl，如下所示：

vec4 texelColor = texture2D( map, vUv );

texelColor.xyz = inputToLinear( texelColor.xyz );

//diffuseColor *= texelColor;
diffuseColor.rgb *= ( texelColor.rgb - vec3( 1.0 ) ) * opacity + vec3( 1.0 );

three.js r.73