सामग्री पर पारदर्शी पीएनजी के माध्यम से पृष्ठभूमि रंग प्रदर्शित करना?

Question

मैं THREE.js का उपयोग कर केस निर्माता बना रहा हूं, मूल बातें मैं बॉक्स के height/width/length को बदलने, इसे चारों ओर घूमने और बॉक्स के पृष्ठभूमि रंग को बदलने में सक्षम होना चाहता हूं।

यह अब तक है: http://design365hosting.co.uk/casebuilder3D/

आयाम काम करता है बदल रहा है, के रूप में बॉक्स के खींचने करता है, अब मैं पृष्ठभूमि रंग बदलने के साथ काम कर रहा हूँ।

जिस तरह से मैं इसे काम करना चाहता हूं वह बॉक्स के चेहरे के रूप में पारदर्शी पीएनजी का उपयोग करके और पृष्ठभूमि रंगों को सेट करना है ताकि यह पृष्ठभूमि रंग पारदर्शी पीएनजी के माध्यम से दिखाया जा सके।

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

के रूप में आप देख सकते हैं मैं लाल की एक पृष्ठभूमि रंग है और पारदर्शी PNG ओवरले करने के लिए सामग्री निर्धारित करते हैं, समस्या है, Three.js लगता है:

यह कैसे मैं वर्तमान में यह कर रहा हूँ है पृष्ठभूमि रंग को अनदेखा करें और केवल पारदर्शी पीएनजी दिखाएं, जिसका अर्थ है कि कोई रंग दिखाता है।

अपेक्षित परिणाम ओवरलेड पीएनजी के साथ एक लाल बॉक्स होना चाहिए।

आशा है कि समझ में आया, क्या कोई मदद कर सकता है?

Answer 1

तीन.जेएस MeshBasicMaterial जो आप करने का प्रयास कर रहे हैं उसका समर्थन नहीं करते हैं। MeshBasicMaterial में, यदि पीएनजी आंशिक रूप से पारदर्शी है, तो सामग्री आंशिक रूप से पारदर्शी होगी।

आप क्या चाहते हैं, अपारदर्शी, और इसके बजाय सामग्री रंग दिखाने के लिए सामग्री है।

आप इसे कस्टम 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/

बेला में, बनावट एक पारदर्शी पृष्ठभूमि पर एक चक्र है। आप भौतिक शो के लाल रंग को देख सकते हैं।

तीन.जेएस आर .72