Question

我正在使用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，意味着没有显示颜色。< / p>

预期结果应该是带有重叠PNG的红色框。

希望有道理，任何人都可以帮忙吗？

Answer 1

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

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

您可以使用自定义ShaderMaterial执行此操作。事实上，这很容易。这是片段着色器：

uniform vec3 color;
uniform sampler2D texture;

varying vec2 vUv;

void main() {

    vec4 tColor = texture2D( texture, vUv );

    gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );

}

这是一个小提琴：http://jsfiddle.net/g5btunz9/

在小提琴中，纹理是透明背景上的圆圈。您可以看到材料的红色显示。

three.js r.72

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

1 个答案: