javascript - Three.js MeshBasicMaterial 无法按预期工作

Question

我正在尝试使用 Three.js 创建纹理。

我的 texture_f1 源是一个 .png 文件，这意味着您可以通过它看到背景。

问题是，如果我尝试设置背景 color: 0xffffff 它不会与 map: 结合使用。

如果我只设置 color:0xffffff ，它返回白色，但是当与 map 一起使用时:像这样 var material_f1 = new THREE.MeshBasicMaterial({ map: texture_f1, color: 0xffffff}); 我可以透过 .png 黑色看到背景。

Answer 1

如果您有透明纹理，则必须将 material.transparent 设置为 true。

var material = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    map: texture,
    transparent: true
} )

请注意， Material 颜色不会“透过”透明纹理 - 它着色纹理。

如果您希望 Material 颜色“透过”透明纹理，则需要使用 ShaderMaterial，并创建自定义着色器。

在 this stackoverflow answer 中有一个这样做的例子.

three.js r.71