सीन के पीछे कोई भी CSS background-image मान, ग्रेडिएंट या इमेज, पेंट करता है, सीन के क्लियर रंग को पारदर्शी बनाकर और कैनवास को स्टाइल करके।
CSS background image का मान
लागू की गई स्टाइल
सीन के पीछे दो रंगों के बीच दी गई दिशा में एक सीधा ग्रेडिएंट पेंट करता है, स्टॉप उसके साथ प्रतिशत के रूप में।
दो रंग, दिशा और दो स्टॉप
लागू की गई स्टाइल
सीन के पीछे दो रंगों के बीच एक गोल ग्रेडिएंट पेंट करता है, दिए गए shape में position से फैलता हुआ, स्टॉप केंद्र से प्रतिशत के रूप में।
दो रंग, केंद्र की पोज़िशन, दो स्टॉप और शेप
लागू की गई स्टाइल
सीन के पीछे कई रंगों से होकर एक सीधा ग्रेडिएंट पेंट करता है, हर एक अपने स्टॉप प्रतिशत पर; colors और stops की लंबाई समान होनी चाहिए, वरना इसके बजाय एक त्रुटि ऑब्जेक्ट वापस आता है।
रंग, उनके स्टॉप और दिशा
लागू की गई स्टाइल, या सूचियों की लंबाई अलग होने पर एक त्रुटि संदेश
सीन के पीछे कई रंगों से होकर एक गोल ग्रेडिएंट पेंट करता है, हर एक अपने स्टॉप प्रतिशत पर; colors और stops की लंबाई समान होनी चाहिए, वरना इसके बजाय एक त्रुटि ऑब्जेक्ट वापस आता है।
रंग, उनके स्टॉप, केंद्र की पोज़िशन और शेप
लागू की गई स्टाइल, या सूचियों की लंबाई अलग होने पर एक त्रुटि संदेश
सीन के पीछे एक इमेज दिखाता है, CSS पृष्ठभूमि विकल्पों के साथ कि वह कैसे दोहराती, स्केल होती, बैठती और स्क्रॉल होती है; सीन का क्लियर रंग पारदर्शी हो जाता है ताकि इमेज दिखे।
इमेज URL और repeat, size, position, attachment, origin और clip विकल्प
लागू की गई स्टाइल
bitbybit.babylon.scene.canvasBackgroundImage({ imageUrl: "https://example.com/backdrop.jpg", repeat: Bit.Inputs.Base.backgroundRepeatEnum.noRepeat, size: Bit.Inputs.Base.backgroundSizeEnum.cover, position: Bit.Inputs.Base.gradientPositionEnum.center, attachment: Bit.Inputs.Base.backgroundAttachmentEnum.scroll, origin: Bit.Inputs.Base.backgroundOriginClipEnum.paddingBox, clip: Bit.Inputs.Base.backgroundOriginClipEnum.borderBox });
सीन की पृष्ठभूमि को एक सादे रंग से भरता है और पहले सेट की गई कोई भी कैनवास पृष्ठभूमि इमेज या ग्रेडिएंट हटाता है।
हेक्स रंग
कैमरा को वह बनाता है जिसके ज़रिए सीन रेंडर होता है, पहले सक्रिय कैमरा के नियंत्रण अलग करते हुए।
सक्रिय किया जाने वाला कैमरा
const camera = bitbybit.babylon.camera.arcRotate.create({ radius: 20, target: [0, 0, 0], alpha: 45, beta: 70, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
bitbybit.babylon.scene.activateCamera({ camera });
वह कैमरा देता है जिसके ज़रिए सीन वर्तमान में रेंडर होता है।
सक्रिय कैमरा
डिफ़ॉल्ट परिक्रमा करने वाले कैमरा, जिसका नाम Camera है, को फिर से रखता है और उसकी सीमाएँ और संवेदनशीलताएँ सेट करता है।
कैमरा position पर lookAt की ओर देखता हुआ रखा जाता है; त्रिज्या, alpha और beta की सीमाएँ तय करती हैं कि वह कितना ज़ूम और परिक्रमा कर सकता है, कोण डिग्री में, और संवेदनशीलताएँ तय करती हैं कि वह कितनी तेज़ी से प्रतिक्रिया करता है, कम अधिक तेज़ है।
पोज़िशन, लक्ष्य और वैकल्पिक सीमाएँ और संवेदनशीलताएँ
bitbybit.babylon.scene.adjustActiveArcRotateCamera({ position: [20, 20, 20], lookAt: [0, 0, 0], lowerRadiusLimit: 5, upperRadiusLimit: 100, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
सीन को अंतर्निहित स्काईबॉक्स में से एक से घेरता है और उसे उस एनवायरनमेंट लाइटिंग के रूप में उपयोग करता है जिसे परावर्तक मैटेरियल ग्रहण करते हैं।
blur दिखने वाले आकाश को नरम करता है, environmentIntensity स्केल करता है कि वह सीन को कितना रोशन करता है, और hideSkybox आकाश को छिपाते हुए लाइटिंग रखता है।
बिल्ट-इन स्काईबॉक्स, उसका आकार, ब्लर, एनवायरनमेंट तीव्रता और दृश्यता
सीन को आपके अपने टेक्सचर से लोड किए गए स्काईबॉक्स से घेरता है और उसे एनवायरनमेंट लाइटिंग के रूप में उपयोग करता है।
textureUrl किसी .hdr फ़ाइल, .env फ़ाइल या छह क्यूब फेस इमेज के रूट की ओर इंगित कर सकता है; उसके बिना कुछ नहीं होता। hideSkybox आकाश को छिपाते हुए लाइटिंग रखता है।
टेक्सचर का URL और आकार, स्काईबॉक्स का आकार, ब्लर, एनवायरनमेंट तीव्रता और दृश्यता
सीन को आपके द्वारा स्वयं लोड किए गए क्यूब टेक्सचर से बने स्काईबॉक्स से घेरता है और उसे एनवायरनमेंट लाइटिंग के रूप में उपयोग करता है।
texture किसी .hdr या .env फ़ाइल से आ सकता है। hideSkybox आकाश को छिपाते हुए लाइटिंग रखता है; enableGroundProjection निचले आकाश को समतल करके एक ऐसा ग्राउंड बनाता है जिस पर मॉडल खड़ा होता है।
क्यूब टेक्सचर, स्काईबॉक्स का आकार, ब्लर, एनवायरनमेंट तीव्रता, दृश्यता और ग्राउंड प्रोजेक्शन
const texture = new BABYLON.CubeTexture("https://example.com/env/studio", bitbybit.babylon.scene.getScene());
bitbybit.babylon.scene.enableSkyboxFromTexture({ texture, size: 1000, blur: 0.1, environmentIntensity: 0.7, hideSkybox: false, enableGroundProjection: true, projectedGroundRadius: 20, projectedGroundHeight: 3 });
दूर की ज्यामिति को एक रंग में फीका करता है, जैसे धुंध करती है।
linear सीन इकाइयों में start से end तक फीका करता है; exponential और exponentialSquared दूरियों को अनदेखा करके इसके बजाय density से फीका करते हैं; none कोहरा बंद करता है।
फ़ॉग मोड, रंग, घनत्व और आरंभ और अंत की दूरियाँ
सीन में एक पॉइंट लाइट जोड़ता है, जैसे drawPointLight करता है, उसे वापस दिए बिना; उन स्क्रिप्ट के लिए जिन्हें केवल लाइट का होना चाहिए।
लाइट की पोज़िशन, रंग, तीव्रता, बल्ब की त्रिज्या और शैडो सेटिंग्स
bitbybit.babylon.scene.drawPointLightNoReturn({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
इस लाइब्रेरी से बनाई गई लाइटों के शैडो जेनरेटर सूचीबद्ध करता है, छाया सक्षम प्रति लाइट एक; ड्रॉ किए गए मेश उनके साथ कास्टर के रूप में पंजीकृत होते हैं।
शैडो जनरेटर, या एक खाली सूची
एक लाइट जोड़ता है जो बल्ब की तरह एक पॉइंट से हर दिशा में चमकती है, उसकी पोज़िशन पर एक वैकल्पिक छोटे चमकते गोले के साथ।
enableShadows true होने पर एक शैडो जेनरेटर बनाया जाता है और सीन में पहले से मौजूद हर मेश छाया डालता और ग्रहण करता है; intensity प्रकाश शक्ति है, इसलिए हज़ारों में मान सामान्य हैं।
लाइट की पोज़िशन, रंग, तीव्रता, बल्ब की त्रिज्या और शैडो सेटिंग्स
पॉइंट लाइट
const light = bitbybit.babylon.scene.drawPointLight({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
सीन में एक डायरेक्शनल लाइट जोड़ता है, जैसे drawDirectionalLight करता है, उसे वापस दिए बिना; उन स्क्रिप्ट के लिए जिन्हें केवल लाइट का होना चाहिए।
लाइट की दिशा, रंग, तीव्रता और शैडो सेटिंग्स
bitbybit.babylon.scene.drawDirectionalLightNoReturn({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
एक लाइट जोड़ता है जो सूर्य की तरह हर जगह एक ही तरह चमकती है, direction के साथ।
enableShadows true होने पर एक शैडो जेनरेटर बनाया जाता है और सीन में पहले से मौजूद हर मेश छाया डालता और ग्रहण करता है; intensity एक सादा गुणक है जहाँ 1 पूरी शक्ति है।
लाइट की दिशा, रंग, तीव्रता और शैडो सेटिंग्स
डायरेक्शनल लाइट
const sun = bitbybit.babylon.scene.drawDirectionalLight({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
सीन को BabylonJS द्वारा डिफ़ॉल्ट रूप से उपयोग की जाने वाली बाएँ हाथ की निर्देशांक प्रणाली और दाएँ हाथ की प्रणाली, जो अधिकांश CAD टूल और glTF की परंपरा है, के बीच स्विच करता है; सक्रिय कैमरा मेल खाने के लिए रिफ़्रेश किया जाता है।
क्या दाएँ-हाथ की प्रणाली का उपयोग करना है
BabylonJS सीन समग्र रूप से: सक्रिय कैमरा और उसकी सीमाएँ, शैडो वाली लाइटें, स्काईबॉक्स और एनवायरनमेंट लाइटिंग, फ़ॉग, फ़िज़िक्स, पॉइंटर इवेंट, कैनवास की पृष्ठभूमि और ड्रॉ किए गए सब कुछ को साफ़ करना। सीन में हर मेश, लाइट और कैमरा होता है; अधिकांश स्क्रिप्ट लाइटिंग और कैमरा एक बार सेट करने के लिए इसे छूती हैं और फिर इसमें ड्रॉ करती हैं।