通过材料上的透明PNG显示背景颜色？答案

【问题标题】：Displaying background colour through transparent PNG on material?通过材料上的透明PNG显示背景颜色？
【发布时间】：2012-09-04 07:03:48
【问题描述】：

我正在使用THREE.js 制作案例构建器，基本是我希望能够更改框的height/width/length，旋转它，并更改框的背景颜色。

到目前为止是这样的： http://design365hosting.co.uk/casebuilder3D/

尺寸改变有效，盒子的拖动也有效，现在我正在处理背景颜色的改变。

我希望它工作的方式是使用透明 PNG 作为框的面，并设置背景颜色，以便此背景颜色通过透明 PNG 显示。

这就是我目前的做法：

var texture = THREE.ImageUtils.loadTexture("images/crate.png");
materials.push(new THREE.MeshBasicMaterial({color:0xFF0000, map: texture}));

如您所见，我将材质设置为红色背景色并覆盖透明 PNG，问题是，three.js 似乎忽略了背景色，只显示透明 PNG，这意味着没有颜色显示出来。

预期的结果应该是一个带有覆盖 PNG 的红色框。

希望这是有道理的，有人可以帮忙吗？

【问题讨论】：

标签： three.js png overlay transparent

【解决方案1】：

Three.js MeshBasicMaterial 不支持您尝试执行的操作。在MeshBasicMaterial 中，如果PNG 部分透明，则材质将部分透明。

您想要的是保持不透明的材料，以及要显示的材料颜色。

您可以通过修改材质的着色器来做到这一点：

var material = new THREE.MeshPhongMaterial( {
    color: 0x0080ff,
    map: texture
} );

material.onBeforeCompile = function ( shader ) {

    var custom_map_fragment = THREE.ShaderChunk.map_fragment.replace(

        `diffuseColor *= texelColor;`,

        `diffuseColor = vec4( mix( diffuse, texelColor.rgb, texelColor.a ), opacity );`

    );

    shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', custom_map_fragment );

};

这是一个小提琴：https://jsfiddle.net/17jmgn6r/

在小提琴中，纹理是透明背景上的圆形。你可以看到材料的颜色显示出来。

three.js r.125

【讨论】：

着色器不会使材质“透出”，它只是用红色（uniforms.color 中设置的颜色）填充 alpha 背景（应该是透明的）。使用带有填充背景而不是透明背景的简单 png 可以更轻松地实现这一点。此外，如果您的目标是拥有一个透明的平面（或对象），那么它不会遮挡场景中它背后的任何东西，那么这不起作用。当我找到此案例的解决方案时，我会更新此评论。
@PabloKvitca 这个答案是为了回答所提出的问题而写的；它不是为了适应您的用例而编写的。如果您想为您的用例发布答案，您可以创建一个新问题并自己回答。
据我了解问题是相同的用例，他想要通过纹理进行展示。无论如何，我认为提出一个新问题是一个更好的主意。我会继续这样做。