Displaying background colour through transparent PNG on material?

Question

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

Answer 1

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