¿Muestra el color de fondo a través de PNG transparente en el material?

Question

Estoy creando un caso usando THREE.js, lo básico es que quiero poder cambiar el height/width/length de un cuadro, rotarlo y también cambiar el color de fondo del cuadro.

Esta es hasta ahora: http://design365hosting.co.uk/casebuilder3D/

La dimensión cambiante obras, al igual que el arrastre de la caja, ahora estoy trabajando con el cambio de color de fondo.

La manera en que quiero que esto funcione es mediante el uso de PNG transparentes como las caras de la caja y estableciendo colores de fondo para que este color de fondo se muestre a través del PNG transparente.

Ésta es la forma en que estoy haciendo actualmente:

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

como se puede ver que establecer que el material tenga un color de fondo de color rojo y superponer la transparencia PNG, es un problema, parece three.js ignore el color de fondo y simplemente muestre el PNG transparente, lo que significa que no se ve el color.

El resultado esperado debe ser un cuadro rojo con el PNG superpuesto.

Espero que tenga sentido, ¿alguien puede ayudar?

Answer 1

Three.js MeshBasicMaterial no es compatible con lo que está tratando de hacer. En MeshBasicMaterial, si el PNG es parcialmente transparente, el material será parcialmente transparente.

Lo que quiere, es el material para permanecer opaco, y el color del material se muestra en su lugar.

Puede hacerlo con un ShaderMaterial personalizado. De hecho, es bastante fácil. Aquí está el 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); 

} 

Y aquí es un violín: http://jsfiddle.net/g5btunz9/

En el violín, la textura es un círculo sobre un fondo transparente. Puede ver el color rojo del material a través de mostrar.

three.js r.72