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

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,意味着没有透过颜色显示.

预期结果应该是带有重叠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