🗑️ 💃🏾 🙅 A- फ्रेम में एक मूल दृश्य बनाएं 👨‍👦 ❔ 🍰

अनुवाद के लेखक से: पिछले लेख में, हमने ए-फ्रेम की बुनियादी अवधारणाओं पर चर्चा की। चक्र को जारी रखने के लिए, मैं एक ऐसा पाठ बनाना चाहता था जो A- फ्रेम की मुख्य विशेषताओं का वर्णन करेगा, लेकिन मैंने महसूस किया कि आधिकारिक साइट से लेख का अनुवाद करना बेहतर है, जो कि मेरी राय में, बहुत अच्छी तरह से लिखा गया है, और इस तरह के लेख को दोहराने में कोई समझदारी नहीं है।

आइए फ्रेम में कैसे काम करता है, यह समझने के लिए ए-फ्रेम में एक मूल दृश्य बनाते हैं। हमें HTML की प्रारंभिक समझ की आवश्यकता है। इस पाठ में, हम सीखेंगे:

कैसे आदिम का उपयोग कर 3 डी वस्तुओं को जोड़ने के लिए;
आंदोलनों, घुमाव और स्केलिंग की मदद से वस्तुओं को 3-आयामी स्थान में कैसे बदलना है;
कैसे एक पर्यावरण जोड़ने के लिए;
कैसे बनावट जोड़ने के लिए;
घटनाओं और एनिमेशन के माध्यम से बुनियादी अन्तरक्रियाशीलता को कैसे जोड़ा जाए
कैसे पाठ जोड़ने के लिए।

आप यहां कोड के साथ खेल सकते हैं

एचटीएमएल के साथ शुरू करते हैं

<html> <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html>

हम <head> सेक्शन में जोड़े गए <script> टैग के माध्यम से A- फ्रेम को कनेक्ट करते हैं। लायब्रेरी कोड CDN पर है। एक-फ्रेम कनेक्शन को <-a-scene> से पहले जोड़ा जाना चाहिए क्योंकि A- फ्रेम कस्टम HTML तत्वों को पंजीकृत करता है जिन्हें <a-scene> से पहले परिभाषित किया जाना चाहिए DOM में जोड़ा जाता है, अन्यथा दृश्य खाली रहेगा।

इसके बाद, हम <body> दस्तावेज़ के मुख्य भाग में <a-scene> टैग जोड़ते हैं। <a-scene> वह तत्व है जिसके द्वारा दृश्य को नियंत्रित किया जाता है। <A-scene> में तत्वों को जोड़कर हम उन्हें वास्तविक 3D दृश्य में जोड़ते हैं। <a-scene> आपके लिए आवश्यक हर चीज़ के लिए ज़िम्मेदार है: WebGL, <कैनवास>, कैमरा, लाइट, रेंडरर (दराज), साथ ही HTC Vive, Oculus Rift, Samsung GearVR जैसे प्लेटफ़ॉर्म पर WebVR समर्थन से जुड़ी हर चीज़ ओकुलस गो और गूगल कार्डबोर्ड।

वस्तुओं को जोड़ें

<-सीन> का उपयोग करके, हम मानक ए-फ़्रेम प्राइमेटिव का उपयोग करके 3 डी ऑब्जेक्ट जोड़ते हैं, उदाहरण के लिए <a-box>। हम एक नियमित HTML तत्व की तरह <a-box> का उपयोग कर सकते हैं, अनुकूलन के लिए इसमें विशेषताएँ जोड़ सकते हैं। यहां ए-फ्रेम में कुछ और मानक प्राइमरी उपलब्ध हैं: <a-सिलेंडर>, <a-plane>, <a-sphere>।

निम्नलिखित कोड उदाहरण में, हम एक रंग जोड़ेंगे <a-box>। <-Box> के लिए और अधिक गुण यहां देखे जा सकते हैं ।

यह ध्यान दिया जाना चाहिए कि ए-फ़्रेम में प्राइमेटिव कुछ घटकों के लिए केवल रैपर हैं। यह सुविधाजनक है, लेकिन आपको यह समझने की जरूरत है कि <a-box> के अंतर्गत ज्यामिति और भौतिक घटकों के साथ <-a-एंटिटी> निहित है:

 <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>

किसी भी स्थिति में, चूंकि कैमरा और दृश्य में जोड़ा गया क्यूब एक ही बिंदु 0,0,0 पर हैं , हम क्यूब को तब तक नहीं देख पाएंगे जब तक हम इसकी स्थिति नहीं बदलते। ऐसा करने के लिए यह काफी सरल है: आपको अंतरिक्ष में हमारे घन को स्थानांतरित करने के लिए केवल स्थिति विशेषता को बदलने की आवश्यकता है।

किसी वस्तु को 3D में बदलना

पहले 3 डी स्पेस की बात करते हैं। ए-फ्रेम एक दाहिने हाथ के समन्वय प्रणाली का उपयोग करता है। कैमरे की डिफ़ॉल्ट दिशा है: धनात्मक X- अक्ष दाईं ओर जाता है, धनात्मक Y- अक्ष ऊपर जाता है और धनात्मक Z- अक्ष हमारी ओर स्क्रीन से वापस जाता है:

WebVR API की स्थिति लौटने और मीटर में डेटा पोज़ करने के बाद से ए-फ़्रेम मीटर (रिएक्टाज़ोन की तरह पिक्सेल नहीं) में दूरी मापता है। जब आप एक वीआर दृश्य डिजाइन करते हैं, तो वस्तुओं के वास्तविक आकार पर विचार करना बहुत महत्वपूर्ण है। 10 मीटर की ऊंचाई वाला एक घन हमारे कंप्यूटरों की स्क्रीन पर सामान्य लग सकता है, लेकिन आभासी वास्तविकता में डूबे रहने पर यह बहुत भारी हो जाएगा।

ए-फ्रेम रोटेशन इकाइयां डिग्री (थ्री। जेएस में रेडियन की तरह नहीं) हैं, इसलिए जब वे थ्री.जेएस से टकराते हैं तो वे स्वचालित रूप से रेडियन में बदल जाएंगे। दाएं हाथ का नियम रोटेशन की सकारात्मक दिशा निर्धारित करने के लिए उपयोग किया जाता है। किसी भी अक्ष की सकारात्मक दिशा के साथ दाहिने हाथ की उंगली को इंगित करें, फिर जिस दिशा में हमारी उंगलियां मुड़ी हुई हैं और रोटेशन की सकारात्मक दिशा होगी।

हमारे क्यूब को स्थानांतरित करने, घुमाने या स्केल करने के लिए, हम क्रमशः स्थिति , रोटेशन और स्केल घटकों (<-a-box> टैग की विशेषताओं द्वारा दर्शाए गए) को बदल सकते हैं। आइए रोटेशन और स्केलिंग लागू करके शुरू करें:

 <a-scene> <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box> </a-scene>

यह दिए गए कोणों पर हमारे घन को घुमाना चाहिए और इसे सभी अक्षों में दो बार खींचना चाहिए।

पूर्वजों और वंशजों का परिवर्तन

HTML का उपयोग करके A- फ़्रेम में दृश्य ग्राफ़ लागू किया गया है। ऐसी संरचना के प्रत्येक तत्व में कई वंशज और केवल एक पूर्वज हो सकते हैं। ऐसी संरचना में कोई भी वंशज अपने पूर्वज के परिवर्तन गुणों (स्थिति, रोटेशन, स्केल) को विरासत में मिला है।

उदाहरण के लिए, हम एक घन के वंश के रूप में एक गोले को जोड़ सकते हैं:

 <a-scene> <a-box position="0 2 0" rotation="0 45 45" scale="2 4 2"> <a-sphere position="1 0 3"></a-sphere> </a-box> </a-scene>

दृश्य पर गोले की स्थिति 1 2 3 होगी , 1 0 3 नहीं , क्योंकि डिफ़ॉल्ट रूप से गोला अपने पूर्वज के निर्देशांक में है, अर्थात, घन 2 0 0 है । इस मामले में यह बिंदु एक क्षेत्र के लिए एक संदर्भ बिंदु होगा जिसमें इसके निर्देशांक 1 0 3 हैं । यही बात रोटेशन और स्केल पर भी लागू होती है। यदि घन की किसी भी विशेषता को बदल दिया जाता है, तो यह परिवर्तन स्वचालित रूप से सभी वंशज (हमारे मामले में, गुंजाइश) को प्रभावित करेगा।

यदि हम एक सिलेंडर को एक गोले के वंशज के रूप में जोड़ते हैं, तो सिलेंडर के परिवर्तनों की गणना उसके पूर्वजों: घन और क्षेत्र के परिवर्तनों के आधार पर की जाएगी।

हम अपने घन को कैमरे के सामने रखते हैं

अब हम अपने कैमरे को अपने क्यूब को दिखाई देते हैं। हम अपने क्यूब को Z अक्ष में 5 मीटर तक नकारात्मक दिशा में ले जा सकते हैं (यानी हमसे दूर)। आइए इसे Y अक्ष से दो मीटर ऊपर उठाएँ। यह सब स्थिति विशेषता को बदलकर किया जा सकता है:

 <a-scene> <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> </a-scene>

अब हम उसे देखते हैं! जुहा!

प्रबंध

फ्लैट पैनल डिस्प्ले (लैपटॉप, कंप्यूटर) के लिए, कैमरे को कीबोर्ड पर माउस और WASD या तीर को खींचकर डिफ़ॉल्ट रूप से नियंत्रित किया जाता है। फोन में, इसके लिए एक्सेलेरोमीटर जिम्मेदार है। इस तथ्य के बावजूद कि ए-फ़्रेम वेबवीआर के लिए एक रूपरेखा है, यह इन नियंत्रण योजनाओं का समर्थन करता है ताकि दृश्य को एक आभासी वास्तविकता हेलमेट के बिना देखा जा सके।

यदि आप एक आभासी वास्तविकता हेलमेट का उपयोग करते हैं, तो नियंत्रकों और एक हेलमेट का उपयोग करके नियंत्रण किया जाएगा। अपने हेलमेट के ब्राउज़र से आभासी वास्तविकता में जाने के लिए, आपको आभासी वास्तविकता हेलमेट की छवि के साथ आइकन पर क्लिक करने की आवश्यकता है, जो निचले दाएं कोने में स्थित है। यदि आप 6 डिग्री की स्वतंत्रता के साथ एक हेलमेट का उपयोग करते हैं, और आपके पास वास्तविक स्थान है, तो आप शारीरिक रूप से आपके द्वारा बनाए गए दृश्य के आसपास चल सकते हैं।

पर्यावरण जोड़ें

ए-फ़्रेम डेवलपर्स को उन घटकों को बनाने और साझा करने की अनुमति देता है जो तब अपनी परियोजनाओं में उपयोग करना आसान होते हैं। डिएगो गोबर्न द्वारा निर्मित पर्यावरण घटक विभिन्न वातावरण उत्पन्न करता है और यह सब कोड की सिर्फ एक पंक्ति के साथ हासिल किया जाता है! पर्यावरण घटक हमारे बीपी अनुप्रयोगों के लिए एक दृश्य मंच बनाने का एक शानदार और आसान तरीका है। यह आपको दर्जनों वातावरण बनाने की अनुमति देता है, बड़ी संख्या में मापदंडों द्वारा अनुकूलन योग्य है।

पहले आपको ए-फ़्रेम के बाद स्क्रिप्ट को अनुभाग से कनेक्ट करना होगा:

 <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> </head>

उसके बाद, पहले से ही दृश्य में, आपको पर्यावरण विशेषता और निर्दिष्ट सेटिंग्स के साथ <-a- निकाय> टैग जोड़ने की आवश्यकता है, इसे 200 पेड़ों के साथ एक जंगल (जंगल) होने दें:

 <a-scene> <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <!-- ,   ! --> <a-entity environment="preset: forest; dressingAmount: 200"></a-entity> </a-scene>

नोट : ध्यान रखें कि कमजोर "लोहा" का उपयोग करते समय ऐसा दृश्य धीमा हो सकता है। उदाहरण के लिए, यह Oculus Go जैसे मोबाइल उपकरणों पर हो सकता है। इसलिए यदि आप मोबाइल उपकरणों का समर्थन करते हैं, तो उत्पन्न वस्तुओं की संख्या पर नज़र रखें।

बनावट लागू करें

हम अपने क्यूब में src विशेषता का उपयोग करके एक छवि, वीडियो या कैनवास का उपयोग करके बनावट लागू कर सकते हैं, जैसे हम एक नियमित टैग के साथ करते हैं। हमें रंग = "लाल" को हटाने की भी आवश्यकता है क्योंकि बनावट का उपयोग करते समय रंग अभी भी प्रदर्शित नहीं होगा।

 <a-scene> <a-box src="https://i.imgur.com/mYmmbrp.jpg" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky color="#222"></a-sky> </a-scene>

अब हमें अपने क्यूब को पहले से ऑनलाइन लोड की गई बनावट के साथ देखना चाहिए।

हम फाइल अपलोड सिस्टम का उपयोग करते हैं

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

यदि हम <-a-assets> के अंदर एक टैग लिखते हैं, तो A- फ़्रेम इसे सामान्य HTML में प्रदर्शित नहीं करेगा, यह स्रोत को संसाधित करेगा और इसे तीन.js पर भेजेगा। यह ध्यान रखना महत्वपूर्ण है कि एक बार जब हम एक छवि अपलोड करते हैं, तो हम इसे कहीं भी उपयोग कर सकते हैं, उदाहरण के लिए, बनावट के रूप में। ए-फ्रेम नेटवर्क पर फ़ाइलों को स्थानांतरित करने से जुड़ी क्रॉस-डोमेन और अन्य संभावित समस्याओं का भी ध्यान रखेगा।

बनावट को जोड़ने के लिए फ़ाइल अपलोड नियंत्रण प्रणाली का उपयोग करने के लिए आपको आवश्यकता है:

< A-scene> टैग के अंदर <a-assets> टैग जोड़ें (प्रथम स्तर तक)
<Img> टैग जोड़ें, src विशेषता में छवि फ़ाइल लिंक (साथ ही सामान्य HTML में) होना चाहिए
आपको img टैग के लिए आईडी विशेषता सेट करने की आवश्यकता है। आदर्श रूप में, इसे स्वयं बनावट का वर्णन करना चाहिए (उदाहरण के लिए, id = "boxTexture")
उस ऑब्जेक्ट के लिए src विशेषता जोड़ें जिसमें इसे होना चाहिए। उदाहरण के लिए, <a-box src = "# boxTexture"> के लिए

 <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky color="#222"></a-sky> </a-scene>

एक मनमाना वातावरण बनाएँ

हमने ऊपर पर्यावरण घटक के बारे में पहले ही बात की है। यह अपने आप उत्पन्न होता है। लेकिन क्या होगा अगर हमें अपना वातावरण बनाने की आवश्यकता है: बादलों, पृथ्वी, अन्य वस्तुओं को जोड़ें? मैं इसके बारे में आगे बात करने का प्रस्ताव करता हूं।

दृश्य के लिए एक पृष्ठभूमि छवि जोड़ें।

ए-फ्रेम में एक दृश्य के लिए एक पृष्ठभूमि छवि को जोड़ने के लिए, एक विशेष <a-sky> तत्व है। <a-sky> आपको शुद्ध रंग और 360 चित्र या वीडियो दोनों को जोड़ने की अनुमति देता है। उदाहरण के लिए, एक गहरे भूरे रंग की पृष्ठभूमि जोड़ने के लिए आपको निम्नलिखित कोड लिखना होगा:

 <a-scene> <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky color="#222"></a-sky> </a-scene>

या हम 360 फोटो का उपयोग कर सकते हैं:

 <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky src="#skyTexture"></a-sky> </a-scene>

जमीन जोड़ें

जमीन को जोड़ने के लिए हम <a-plane> तत्व का उपयोग करेंगे। डिफ़ॉल्ट रूप से, ए-फ़्रेम में विमान एक्सवाई अक्ष के समानांतर उन्मुख होते हैं। विमान को पृथ्वी के समानांतर बनाने के लिए, हमें इसे घुमाने की आवश्यकता है ताकि यह XZ अक्ष के समानांतर हो। यह एक्स-अक्ष के साथ विमान -90 ° मोड़कर किया जा सकता है।

 <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30" repeat="10 10"></a-plane>

प्रकाश पर काम कर रहे हैं

हमारे दृश्य के प्रकाश को बदलने के लिए, हम <a-light> तत्व को जोड़ या पुन: कॉन्फ़िगर कर सकते हैं। डिफ़ॉल्ट रूप से, हमारे पास कोई प्रकाश स्रोत नहीं था, लेकिन ए-फ़्रेम स्वयं परिवेश प्रकाश और दिशात्मक प्रकाश जोड़ता है। यदि ए-फ़्रेम ने इन प्रकाश स्रोतों को नहीं जोड़ा, तो दृश्य पूरी तरह से काला होगा। यदि हम अपने स्वयं के प्रकाश स्रोतों को जोड़ते हैं, तो वे स्रोत जो डिफ़ॉल्ट रूप से ए-फ्रेम कहते हैं, हटा दिए जाएंगे।

हम विसरित प्रकाश के एक स्रोत को जोड़ेंगे, जिसमें एक नीला-हरा रंग होगा (आकाश के साथ सामंजस्य स्थापित करने के लिए)। बिखरे हुए प्रकाश को हमारे दृश्य के सभी तत्वों पर गिरना चाहिए (ज़ाहिर है, अगर उनके पास सामग्री होगी, लेकिन डिफ़ॉल्ट रूप से ऐसा है)।

हम एक बिंदु प्रकाश स्रोत भी जोड़ेंगे। एक बिंदु प्रकाश स्रोत एक प्रकाश बल्ब की तरह है। इस तरह के एक स्रोत का प्रकाश प्रभाव पूरी तरह से वस्तु की दूरी पर निर्भर करेगा।

 <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"> <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky src="#skyTexture"></a-sky> <a-light type="ambient" color="#445451"></a-light> <a-light type="point" intensity="2" position="2 4 4"></a-light> </a-scene>

एनीमेशन जोड़ें

हमारे पास अंतर्निहित एनीमेशन सिस्टम ए-फ़्रेम का उपयोग करके एनीमेशन जोड़ने का अवसर है। एनीमेशन समय के साथ कुछ मूल्य (घटक संपत्ति) को बदलता है। हमें बस कुछ ऑब्जेक्ट के वंशज के रूप में <a-एनीमेशन> तत्व जोड़ना होगा, उदाहरण के लिए <a-box>। आइए घन को चेतन करने का प्रयास करें ताकि वह ऊपर और नीचे की ओर बढ़े।

 <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"> <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation> </a-box> </a-scene>

हम कहते हैं <-एनीमेशन>:

आपको स्थिति विशेषता को चेतन करने की आवश्यकता है।
मूल स्थिति से 20 सेंटीमीटर ऊपर 0 2.2 -5 पर चेतन।
प्रत्येक चक्र पर एनीमेशन की दिशा बदलें।
एनीमेशन लूप 2 सेकंड (2000 मिलीसेकंड) लेगा।
एनीमेशन को अंतहीन रूप से दोहराएं।

अतिरिक्त विवरण

<a-animation> ए-फ्रेम रेंडरिंग चक्र का उपयोग करता है, इसलिए किसी वस्तु के गुणों में प्रत्येक परिवर्तन प्रति फ्रेम एक बार होता है। यदि आपको अधिक नियंत्रण की आवश्यकता है और मानों को मैन्युअल रूप से बदलना चाहते हैं, तो आप टिक कॉलबैक और Tween.js (जो AFRAME.TWEEN लिंक के माध्यम से उपलब्ध है के माध्यम से उपलब्ध है) जैसे पुस्तकालय के साथ एक ए-फ़्रेम घटक लिख सकते हैं। सर्वश्रेष्ठ प्रदर्शन के लिए, ए-फ्रेम स्तर पर फ्रेम-बाय-फ्रेम संचालन किया जाना चाहिए, आपको अपना स्वयं का अनुरोध बनाने की आवश्यकता नहीं है जब ए-फ्रेम पहले से ही है तो फ़ंक्शन।

अन्तरक्रियाशीलता जोड़ें

आइए अपने क्यूब के साथ बातचीत करने की क्षमता जोड़ें: जब हम इसे देखते हैं, तो हम इसका आकार बढ़ाएंगे, और जब क्लिक किया जाएगा, तो यह अपनी धुरी के चारों ओर स्क्रॉल करेगा।

यह मानते हुए कि अधिकांश डेवलपर्स के पास नियंत्रकों के साथ वीआर हेलमेट नहीं है, हम कंप्यूटर और मोबाइल उपकरणों - कर्सर पर इनपुट के लिए बुनियादी घटक का उपयोग करने पर ध्यान केंद्रित करेंगे। कर्सर मोबाइल डिवाइस और कंप्यूटर के लिए माउस क्लिक के मार्गदर्शन के माध्यम से किसी ऑब्जेक्ट पर "क्लिक" करने की क्षमता प्रदान करता है। लेकिन आपको यह समझने की ज़रूरत है कि कर्सर बातचीत करने का सिर्फ एक तरीका है, अगर हमारे पास असली वीआर नियंत्रक हैं तो सब कुछ थोड़ा अलग होगा।

कर्सर को कैमरे से जोड़ने के लिए, हमें इसे कैमरा तत्व (<-a-camera>) के वंशज के रूप में जोड़ना होगा।

चूंकि हमने अभी तक कैमरे की पहचान नहीं की है, ए-फ्रेम ने यह स्वचालित रूप से किया। लेकिन चूंकि हमें कैमरे में एक कर्सर जोड़ने की आवश्यकता है, इसलिए हम <a-camera> मैन्युअल रूप से परिभाषित करेंगे और वहां <a-कर्सर> जोड़ेंगे:

 <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"> <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation> </a-box> <a-camera> <a-cursor></a-cursor> </a-camera> </a-scene>

यदि हम कर्सर के दस्तावेज़ीकरण को देखते हैं, तो हम देखते हैं कि यह हॉवर ईवेंट जैसे कि मूषक, मूसलीव, और क्लिक ईवेंट को भी हैंडल करता है।

ईवेंट श्रोता घटक

कर्सर घटनाओं को संभालने का एक तरीका जावास्क्रिप्ट के माध्यम से एक घटना श्रोता को जोड़ना है, जैसे सामान्य रूप से DOM तत्व के लिए। यदि आप जावास्क्रिप्ट के अपने ज्ञान के बारे में अनिश्चित हैं, तो आप इस अनुभाग को अगले तक छोड़ सकते हैं।

जावास्क्रिप्ट में, हम तत्व को क्वेरीसेलर के माध्यम से प्राप्त करते हैं, और addEventListener का उपयोग करते हैं, और होवर पर क्यूब के आकार को बढ़ाने के लिए सेटआटब्यूट करते हैं। नोट: ए-फ्रेम सेटआट्री को संशोधित करता है ताकि यह एक ही बार में कई घटकों के साथ काम कर सके। हम दूसरे तर्क के रूप में {x, y, z} जोड़ सकते हैं।

 <script> var boxEl = document.querySelector('a-box'); boxEl.addEventListener('mouseenter', function () { boxEl.setAttribute('scale', {x: 2, y: 2, z: 2}); }); </script>

लेकिन एक तेज़ तरीका ए-फ़्रेम घटक के अंदर तर्क को घेरना होगा। इस पद्धति को दृश्य के लोड होने की प्रतीक्षा करने की आवश्यकता नहीं है, हमें चयनकर्ताओं का उपयोग करने की आवश्यकता नहीं है क्योंकि घटक हमें संदर्भ देता है:

 <script> AFRAME.registerComponent('scale-on-mouseenter', { schema: { to: {default: '2.5 2.5 2.5'} }, init: function () { var data = this.data; this.el.addEventListener('mouseenter', function () { this.setAttribute('scale', data.to); }); } }); </script>

हम इस घटक को HTML विशेषता के माध्यम से जोड़ सकते हैं:

 <script> AFRAME.registerComponent('scale-on-mouseenter', { // ... }); </script> <a-scene> <!-- ... --> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2" scale-on-mouseenter="to: 2.2 2.2 2.2"> <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation> </a-box> <!-- ... --> </a-scene>

इवेंट एनीमेशन

<a-animation> में किसी ऑब्जेक्ट द्वारा किसी ईवेंट का निर्माण करने पर उसका एनीमेशन शुरू करने और समाप्त करने की क्षमता होती है। यह घटना के नाम को निर्दिष्ट करके शुरुआती विशेषता के माध्यम से किया जा सकता है।

हम कर्सर घटक के लिए दो एनिमेशन जोड़ सकते हैं - हमारे घन को आकार देने के लिए मूषक और प्रलयकाल की घटनाएँ, और क्लिक घटना द्वारा Y अक्ष के चारों ओर घन को घुमाने के लिए:

 <a-box color="#FFF" width="4" height="10" depth="2" position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3" src="#texture"> <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation> <!-- These animations will start when the box is looked at. --> <a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation> <a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"></a-animation> <a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation> </a-box>

ऑडियो जोड़ें

आभासी वास्तविकता में पूर्ण विसर्जन के लिए ऑडियो बहुत महत्वपूर्ण है। यहां तक कि पृष्ठभूमि में सिर्फ सफेद शोर को जोड़ने में कुछ समय लग सकता है। हम प्रत्येक दृश्य के लिए ध्वनि का उपयोग करने की सलाह देते हैं। ध्वनि जोड़ने का एक तरीका: <ऑडियो> तत्व को <a- संपत्ति> और ऑटोप्ले विशेषता में जोड़ें:

 <a-scene> <a-assets> <audio src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay preload></audio> </a-assets> <!-- ... --> </a-scene>

या हम <a-sound> तत्व का उपयोग करके स्थानिक ऑडियो जोड़ सकते हैं। जब हम स्रोत के करीब पहुंचते हैं तो यह घटक ध्वनि को तेज बनाता है। हम स्थिति विशेषता का उपयोग करके <-Sound> कर सकते हैं:

 <a-scene> <!-- ... --> <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true" position="-3 1 -4"></a-sound> <!-- ... --> </a-scene>

पाठ जोड़ें

ए-फ़्रेम में एक पाठ घटक है। इसे प्रदर्शित करने के कई तरीके हैं और प्रत्येक विधि के अपने फायदे और नुकसान हैं। ए-फ्रेम में तीन-बम्फोंट-पाठ के माध्यम से एसडीएफ कार्यान्वयन है जो काफी उत्पादक है।

इस पाठ के लिए, हम पाठ के सबसे सरल रूप का उपयोग करने का सुझाव देते हैं, <a-text>:

 <a-text value="Hello, A-Frame!" color="#BBB" position="-0.9 0.2 -3" scale="1.5 1.5 1.5"></a-text>

पाठ जोड़ने के अन्य तरीके हैं:

केविन नागो द्वारा बनाया गया पाठ ज्यामिति । यह 3D पाठ है और इसके प्रतिपादन के लिए अधिक संसाधनों की आवश्यकता है।
मेयो टोबिट द्वारा बनाया गया HTML Shader - यह बनावट के रूप में पाठ प्रस्तुत करता है। यह आसानी से स्टाइल किया जाता है, लेकिन लंबी गणना की जाती है।

निष्कर्ष

आप यहां कोड के साथ खेल सकते हैं । आप यहां वास्तविक समय में दृश्य देख सकते हैं ।

पेरोड के लेखक से: आप सभी का ध्यान आकर्षित करने के लिए धन्यवाद! अगले लेख में मैं ए-फ्रेम पर एक गेम बनाने में अपने अनुभव के बारे में बात करने की कोशिश करूंगा: उन सभी सूक्ष्मताओं और कठिनाइयों के बारे में जो मुझे विकास प्रक्रिया में इंतजार कर रहे थे।

A- फ्रेम में एक मूल दृश्य बनाएं