Three.js 通过材质上的透明PNG显示背景色？

我正在使用

THREE.js

制作一个案例生成器，基本原理是我希望能够更改一个框的

高度/宽度/长度

，旋转它，还可以更改框的背景色

到目前为止，情况如下：

改变尺寸和拖动长方体一样有效，现在我正在处理背景颜色的改变

我希望这样做的方式是使用透明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

MeshBasicMaterial

不支持您正在尝试的操作。在

MeshBasicMaterial

中，如果PNG部分透明，则材质将部分透明

您需要的是保持不透明的材质，以及要显示的材质颜色

可以通过修改材质的着色器来执行此操作：

var material=新的三种材质。网格材质（{
颜色：0x0080ff，
贴图：纹理
} );
material.onBeforeCompile=函数（着色器）{
var custom_map_fragment=THREE.ShaderChunk.map_fragment.replace(
`diffuseColor*=texelColor；`，
`diffuseColor=vec4（混合（漫反射，texelColor.rgb，texelColor.a），不透明度）`
);
shader.fragmentShader=shader.fragmentShader.replace（'#include'，custom_map_fragment）；
};

这是一把小提琴：

在小提琴中，纹理是透明背景上的圆形。您可以通过显示看到材质的颜色

---

three.js r.125

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