थ्री.जेएस/वेबजीएल - उनके पीछे अन्य विमानों को छिपाने वाले पारदर्शी विमान

Question

जब आपके पास तीन.जेएस/वेबजीएल में दो विमान हैं और उनमें से एक या दोनों पारदर्शी हैं, तो कभी-कभी विमान पीछे पारदर्शी विमान से छिपा होगा। ऐसा क्यों है?

Answer 1

यह एक बग नहीं है, यह ठीक है कि ओपनजीएल (और, इसलिए, वेबजीएल) कैसे काम करता है। पारदर्शी सतह जेड-बफर के साथ अच्छी तरह से नहीं खेलती है, और इस तरह मैन्युअल रूप से क्रमबद्ध और बैक-टू-फ्रंट प्रस्तुत किया जाना चाहिए। तीन जेएस आपके लिए ऐसा करने का प्रयास कर रहे हैं (यही कारण है कि जब आप एक्स मान> 0 सेट करते हैं तो समस्या दूर हो जाती है) लेकिन आप दिखाए जा रहे ज्यामिति को छेड़छाड़ करने के मामले को मजबूती से संभाल नहीं सकते हैं।

मैंने इस मुद्दे को different SO question में अधिक गहराई से समझाया है, तो आप इसका संदर्भ लेना चाहेंगे।

Answer 2

सामग्री में alphaTest: 0.5 जोड़ने का प्रयास करें।

Answer 3

fwiw, यदि आपके पास बहुत सारे समानांतर विमान हैं (आपका नमूना नहीं देख सकता है, तो Google आपके डोमेन को हल नहीं कर सकता है), उन्हें लंबवत धुरी के साथ क्रमबद्ध रखना आसान है। विमानों की एक सूची के लिए [ए बी सी डी] ऑर्डर-टू-ड्रा या तो [ए बी सी डी] या [डी सी बी ए] होगा और कुछ भी नहीं! इसलिए सॉर्टिंग से प्रदर्शन हिट होने की आवश्यकता नहीं है। जैसे ही आप जाते हैं उन्हें बस रखें।

Answer 4

मान लें कि आप कुछ पारदर्शी * .png छवि का उपयोग कर रहे हैं। फिर इस में मदद मिलेगी:

new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false }); 

Answer 5

false को depthWrite गुण को सेट मेरी समस्या हल हो जाती।

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false 
});