तीन.js पृष्ठभूमि को पारदर्शी या अन्य रंग में बदलना

Question

मैं अपने कैनवास के डिफ़ॉल्ट पृष्ठभूमि रंग को काले से पारदर्शी / किसी अन्य रंग में बदलने की कोशिश कर रहा हूं - लेकिन कोई भाग्य नहीं।

मेरा HTML:

<canvas id="canvasColor">

मेरा सीएसएस:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

जैसा कि आप निम्नलिखित ऑनलाइन उदाहरण में देख सकते हैं कि मेरे पास कैनवास से जुड़े कुछ एनीमेशन हैं, इसलिए खिचड़ी भाषा सिर्फ एक विकल्प है: 0; आईडी पर।

लाइव पूर्वावलोकन: http://devsgs.com/preview/test/particle/

किसी भी विचार कैसे डिफ़ॉल्ट काले अधिलेखित करने के लिए?

Comments

function init() {आपके कैनवास की शुरुआत में लाल है! तीन.js इसे काले रंग में बदल देता है setClearColorHex!

— साइमन सरिस

Answer 1

जब मैं तीन.जैस का उपयोग करने लगा, तो मुझे यह पता चला। यह वास्तव में एक जावास्क्रिप्ट मुद्दा है। इस समय आपके पास:

renderer.setClearColorHex( 0x000000, 1 );

आपके threejsinit फ़ंक्शन में। इसे इसमें बदलें:

renderer.setClearColorHex( 0xffffff, 1 );

अद्यतन: अद्यतन समाधान के लिए HdN8 के लिए धन्यवाद:

renderer.setClearColor( 0xffffff, 0);

# 2 अद्यतन करें: जैसा कि वेस्टलैंगले ने एक और बात में कहा है , इसी तरह के सवाल - अब आपको setClearColor()फ़ंक्शन के साथ संयोजन में एक नया WebGLRenderer उदाहरण बनाते समय नीचे दिए गए कोड का उपयोग करना होगा :

var renderer = new THREE.WebGLRenderer({ alpha: true });

# 3 अपडेट करें: श्रीडॉब बताते हैं कि चूंकि r78आप वैकल्पिक रूप से अपने दृश्य की पृष्ठभूमि का रंग निर्धारित करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Comments

आप वास्तव में सही हैं। कैनवास वास्तव में पारदर्शी जनसंपर्क है। डिफ़ॉल्ट, तो मुझे शर्म आती है। यह इंगित करने के लिए कि इसे बदलने के लिए बहुत बहुत धन्यवाद - यह अब बहुत अच्छा लग रहा है!

— user1231561

अच्छा लगा, इसने मुझे थोड़ा बहुत परेशान किया। मैंने तीन .js स्क्रिप्ट में पाया यह विधि जल्द ही पदावनत कर दी गई है, इसके बजाय setClearColor (0xffffff, 1) का उपयोग करें।

— HdN8

@ HdN8 - अपडेट के लिए धन्यवाद, मैंने इसे उत्तर में जोड़ दिया है।

— जो

setClearColor (0xffffff, 1) ने मेरे लिए काम नहीं किया (इसे सफ़ेद बनाया) लेकिन setClearColor (0xffffff, 0) ने काम किया (इसे पारदर्शी बनाया)

— रोनेन रैबिनोविस

चूंकि r78आप बस कर सकते हैंscene.background = new THREE.Color( 0xff0000 );

— mrdoob

Answer 2

एक पूर्ण उत्तर: (r71 के साथ परीक्षण)

पृष्ठभूमि का रंग उपयोग सेट करने के लिए:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

यदि आप एक पारदर्शी पृष्ठभूमि चाहते हैं, तो आपको पहले अपने रेंडरर में अल्फा को सक्षम करना होगा:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

अधिक जानकारी के लिए डॉक्स देखें ।

Answer 3

पारदर्शिता के लिए, यह भी अनिवार्य है: तीन पृष्ठभूमि के साथ पारदर्शी पृष्ठभूमि केrenderer = new THREE.WebGLRenderer( { alpha: true } ) माध्यम से

Answer 4

मैंने पाया कि जब मैंने तीन.जेएस संपादक के माध्यम से एक दृश्य बनाया, तो मुझे न केवल सही उत्तर के कोड (ऊपर) का उपयोग करना पड़ा, बल्कि रेंडरर को अल्फा मान और स्पष्ट रंग के साथ सेट करने के लिए, मुझे ऐप में जाना पड़ा .json फ़ाइल और "दृश्य" ऑब्जेक्ट की "पृष्ठभूमि" विशेषता ढूंढें और इसे इसमें सेट करें "background: null":।

तीन.जेएस संपादक से निर्यात मूल रूप से "पृष्ठभूमि": 0 पर सेट था

Answer 5

2020 में r115 का उपयोग करके यह इसके साथ बहुत अच्छा काम करता है:

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

Answer 6

मैं यह भी जोड़ना चाहूंगा कि यदि तीन। Js एडिटर का उपयोग करना है तो बैकग्राउंड कलर को स्पष्ट करने के साथ-साथ index.html में भी सेट करना न भूलें।

background-color:#00000000