通过材料上的透明PNG显示背景颜色? [英] Displaying background colour through transparent PNG on material?

问题描述

我正在使用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的红色框.

希望如此，任何人都可以帮忙吗?

解决方案

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

I'm making a case builder using THREE.js, the basics are i want to be able to change the height/width/length of a box, rotate it around, and also change the background color of the box.

This is it so far: http://design365hosting.co.uk/casebuilder3D/

The dimension changing works, as does the dragging of the box, now i'm working with the background color change.

The way i want this to work is by using transparent PNGs as the faces of the box, and setting background colors so that this background colour shows through the transparent PNG.

This is how I'm currently doing it:

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

as you can see I set the material to have a background colour of red and overlay the transparent PNG, problem is, three.js seems to ignore the background colour and just show the transparent PNG, meaning no colour shows through.

The expected result should be a red box with the overlayed PNG.

Hope that made sense, can anyone help?

解决方案

Three.js MeshBasicMaterial does not support what you are trying to do. In MeshBasicMaterial, if the PNG is partially transparent, then the material will be partially transparent.

What you want, is the material to remain opaque, and the material color to show through instead.

You can do this with a custom ShaderMaterial. In fact, it is pretty easy. Here is the fragment shader:

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 );

}

And here is a Fiddle: http://jsfiddle.net/g5btunz9/

In the fiddle, the texture is a circle on a transparent background. You can see the red color of the material show through.

three.js r.72

这篇关于通过材料上的透明PNG显示背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！