Visualizzazione del colore di sfondo tramite PNG trasparente sul materiale?

Question

Sto creando un case builder utilizzando THREE.js, le basi sono che voglio essere in grado di cambiare il height/width/length di una scatola, ruotarlo e anche cambiare il colore di sfondo della scatola.

Questo è finora: http://design365hosting.co.uk/casebuilder3D/

La dimensione modificabile opere, così come il trascinamento della scatola, ora sto lavorando con il cambiamento di colore di sfondo.

Il modo in cui desidero che funzioni è utilizzando PNG trasparenti come facce della scatola e impostando i colori di sfondo in modo che questo colore di sfondo venga visualizzato tramite il PNG trasparente.

Questo è il modo Attualmente sto facendo:

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

come potete vedere ho impostare il materiale per avere un colore di sfondo rosso e sovrapporre la trasparenza PNG, problema è, Three.js sembra ignora il colore di sfondo e mostra solo il PNG trasparente, il che significa che non viene mostrato nessun colore.

Il risultato previsto dovrebbe essere una casella rossa con il PNG sovrapposto.

Spero che abbia senso, qualcuno può aiutare?

Answer 1

Three.js MeshBasicMaterial non supporta ciò che si sta tentando di fare. In MeshBasicMaterial, se il file PNG è parzialmente trasparente, il materiale sarà parzialmente trasparente.

Quello che vuoi è il materiale che rimane opaco e il colore del materiale da mostrare invece.

È possibile farlo con una personalizzata ShaderMaterial. In effetti, è abbastanza facile. Ecco lo shader frammento:

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

} 

Ed ecco un violino: http://jsfiddle.net/g5btunz9/

Nel violino, la trama è un cerchio su uno sfondo trasparente. Puoi vedere il colore rosso del materiale visibile.

tre.js r.72