ए-फ़्रेम समीक्षा लेख

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

अंदर क्या है?

शुद्ध वेबलॉग पर ए-फ्रेम 0 से नहीं लिखा गया है, यह थ्री.जेएस लाइब्रेरी पर आधारित है। इसलिए, मैं सलाह देता हूं कि ए-फ्रेम के साथ काम करना शुरू करने से पहले आप पहले थ्री। जेएस की मूल अवधारणाओं को समझ लें, हालांकि यह आवश्यक नहीं है, क्योंकि ए-फ्रेम डिजाइन किया गया है ताकि आप कम से कम ज्यामिति प्रदान करने के बारे में सोचें और अपने आवेदन के तर्क पर अधिक ध्यान केंद्रित करें । यही कारण है कि वह वास्तव में, और रूपरेखा।

इसके लिए, ए-फ्रेम तीन मुख्य बिंदुओं को पोस्ट करता है, जिसके बारे में हम बाद में बात करेंगे।

A- फ्रेम HTML के साथ काम करता है

कई बुनियादी ए-फ़्रेम तत्व, जैसे कि दृश्य, कैमरा, बॉक्स, क्षेत्र, आदि को उपसर्ग a के साथ एक ही नाम के टैग के माध्यम से दृश्य में जोड़ा जाता है। प्रत्येक समान आइटम को कस्टम के रूप में पंजीकृत किया गया है। ए-फ्रेम (0.8.0) वर्तमान में v0 विनिर्देश का उपयोग करता है।

<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> </a-scene> 

कोड का यह छोटा सा टुकड़ा एक WebGL सीन खींचेगा जिसमें दो ऑब्जेक्ट जोड़े जाएंगे: दिए गए मापदंडों के साथ एक क्यूब और एक गोला। ऊपर उल्लिखित दो तत्वों के अलावा, कई अन्य प्राइमेटीज़ हैं जिन्हें उसी तरह से दृश्य में जोड़ा जा सकता है: <a-circle>, a-cone>, a-सिलेंडर> <a-dodecahronron,> <-icosahedron> , <a-octahedron>, <a-plane>, <a-ring>, <a-tetrahedron>, <a-torus-knot>, <a-torus>, <a-triangle> । ए-फ्रेम में भी कुछ अन्य तत्व हैं जो कुछ कार्य करते हैं:

• <a-camera> - एक कैमरा बनाता है। वर्तमान में केवल परिप्रेक्ष्य कैमरा (PerspectiveCamera) का समर्थन किया जाता है।
• <-obj-model>, <a-collada-model>, <a-gltf-model> - वे सभी इसी प्रारूप के मॉडल को लोड और प्रदर्शित करते हैं।
• <a-कर्सर> - एक ऐसा तत्व जो आपको विभिन्न कार्यों को करने की अनुमति देता है: क्लिक, मार्गदर्शन, आदि। कर्सर कैमरे के केंद्र से बंधा होता है, इसलिए यह हमेशा उपयोगकर्ता के देखने के केंद्र में होगा।
• <a-image> - एक विमान पर चयनित छवि प्रदर्शित करता है (<a-plane>)।
• <a-link> एक टैग के समान है, केवल एक 3D दृश्य के लिए।
• <a-sky> - मंच के चारों ओर एक विशाल सिलेंडर जो आपको 360 फ़ोटो प्रदर्शित करने की अनुमति देता है। या आप बस इसे कुछ रंग से भर सकते हैं।
• <a-sound> - एक दिए गए स्थान में एक ध्वनि स्रोत बनाता है।
• <a-text> - सपाट पाठ खींचता है।
• <a-video> - प्लेन पर वीडियो चलाता है।

मैं यह भी ध्यान देना चाहूंगा कि हम DOM तत्वों के साथ काम करते हैं, और इसलिए हम मानक DOM API का उपयोग कर सकते हैं, जिसमें querySelector, getElementById, appendChild, आदि शामिल हैं।

ए-फ्रेम ईसीएस का उपयोग करता है

ECS (इकाई घटक प्रणाली) - आवेदन और खेल डिजाइन पैटर्न। यह सिर्फ दूसरे खंड में व्यापक था। जैसा कि नाम से ही स्पष्ट है कि एक पैटर्न की तीन बुनियादी अवधारणाएं हैं- इकाई, घटक, प्रणाली। शास्त्रीय रूप में, वे निम्नानुसार परस्पर जुड़े हुए हैं: हमारे पास कुछ कंटेनर ऑब्जेक्ट (इकाई) है जिसमें हम घटकों को जोड़ सकते हैं। आमतौर पर, एक घटक तर्क के एक अलग हिस्से के लिए जिम्मेदार होता है। उदाहरण के लिए, हमारे पास एक प्लेयर ऑब्जेक्ट है, इसमें एक स्वास्थ्य घटक है। इस घटक में खिलाड़ी (वस्तु) के स्वास्थ्य के पुनःपूर्ति या हानि से जुड़े सभी तर्क शामिल होंगे। और सिस्टम, बदले में, कुछ घटकों द्वारा संयुक्त संस्थाओं के एक सेट का प्रबंधन करने के लिए आवश्यक हैं। आमतौर पर, एक घटक एक ही नाम की प्रणाली के भीतर एक इकाई को पंजीकृत कर सकता है।

ए-फ़्रेम में, यह पैटर्न बहुत सरल और सुरुचिपूर्ण ढंग से लागू किया जाता है - विशेषताओं की सहायता से। किसी भी ए-फ़्रेम तत्व - <-a-scene>, <a-box>, <a-sphere>, आदि का उपयोग संस्थाओं के रूप में किया जाता है। लेकिन, निश्चित रूप से, <-a- एंटिटी> तत्व अलग होता है। उनका नाम खुद के लिए बोलता है। अन्य सभी तत्व अनिवार्य रूप से घटकों के लिए आवरण होते हैं और सुविधा के लिए बनाए जाते हैं, क्योंकि किसी भी तत्व को <-a- इकाई> का उपयोग करके भी बनाया जा सकता है। उदाहरण के लिए <-box> :

 <a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity> 

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

ए-फ्रेम में किसी भी घटक को एक विशेष डिजाइन के माध्यम से विश्व स्तर पर पंजीकृत होना चाहिए:

 AFRAME.registerComponent('hello-world', { init: function () { console.log('Hello, World!'); } }); 

फिर इस घटक को दृश्य, या किसी अन्य तत्व में जोड़ा जा सकता है।

 <a-entity hello-world></a-entity> 

चूंकि हमने अपने घटक के लिए एक init कॉलबैक जोड़ा है, जैसे ही तत्व को DOM में जोड़ा जाता है, यह कॉलबैक काम करेगा और हम कंसोल में अपना संदेश देखेंगे। ए-फ़्रेम घटकों में अन्य जीवनचक्र कॉलबैक हैं। आइए उन पर अधिक विस्तार से ध्यान दें:

• अद्यतन - इनिट के रूप में आरंभीकरण के दौरान दोनों को कहा जाता है, और इस घटक की किसी भी संपत्ति को अपडेट करते समय।
• निकालें - एक घटक या इकाई को हटाने के बाद कहा जाता है। अर्थात्, यदि आप DOM से <-a-एंटिटी> हटाते हैं, तो इसके सभी पुर्ज़े कॉल हटाए जाएंगे।
• टिक - हर बार दृश्य को प्रस्तुत करने से पहले। रेंडर लूप के अंदर requestAnimaitonFrame का उपयोग करता है
• एक दृश्य प्रस्तुत करने के बाद हर बार टॉक कहा जाता है।
• खेल - जब दृश्य को फिर से शुरू किया जाता है तो प्रत्येक को बुलाया जाता है। अनिवार्य रूप से दृश्य के बाद। खेलना ();
• ठहराव - हर बार जब एक दृश्य प्रस्तुत करना बंद कर दिया जाता है। आवश्यक रूप से दृश्य के बाद। ठहराव ();
• updateSchema - स्कीमा को अपडेट करने के बाद हर बार कॉल किया जाता है।

ए-फ्रेम में एक और महत्वपूर्ण घटक अवधारणा सर्किट्री है। आरेख घटक के गुणों का वर्णन करता है। इसे निम्नानुसार परिभाषित किया गया है:

 AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} } } 

इस स्थिति में, हमारे मेरे घटक में दो गुण होंगे, arrayProperty और integerProperty । उन्हें घटक को पास करने के लिए, आपको संबंधित विशेषता का मूल्य निर्धारित करना होगा।

 <a-entity my-component="arrayProperty: 1,2,3; integerProperty: 7"></a-entity> 

आप इन गुणों को डेटा प्रॉपर्टी के माध्यम से घटक के अंदर प्राप्त कर सकते हैं।

 AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} }, init: function () { console.log(this.data); } } 

इकाई से एक घटक के गुणों को प्राप्त करने के लिए जिसमें इसे जोड़ा जाता है, आप थोड़ा संशोधित getAttribute फ़ंक्शन का उपयोग कर सकते हैं। ए-फ्रेम इकाई तक पहुंचते समय, यह न केवल विशेषता के स्ट्रिंग मान को लौटाएगा, बल्कि ऊपर उल्लिखित डेटा ऑब्जेक्ट।

  console.log(this.el.getAttribute('my-component')); // {arrayProperty: [1,2,3], integerProperty: 7} 

लगभग उसी तरीके से, आप एक घटक के गुणों को बदल सकते हैं:

 this.el.setAttribute('my-component',{arrayProperty: [], integerProperty: 5}) 

अब बात करते हैं सिस्टम की। ए-फ्रेम में सिस्टम उसी तरह पंजीकृत हैं जैसे कि घटक:

 AFRAME.registerSystem('my-system', { schema: {}, init: function () { console.log('Hello, System!'); }, }); 

घटक के साथ-साथ, सिस्टम में एक सर्किट और कॉलबैक है। केवल सिस्टम में उनमें से केवल 5 हैं: init, play, pause, tick, tock । इकाई के घटक के रूप में सिस्टम को जोड़ने की आवश्यकता नहीं है। यह स्वचालित रूप से दृश्य में जुड़ जाएगा।

 this.el.sceneEl.systems['my-system']; 

यदि घटक का सिस्टम के समान नाम है, तो सिस्टम इस सिस्टम पर उपलब्ध होगा।

 AFRAME.registerSystem('enemy', { schema: {}, init: function () {}, }); AFRAME.registerComponent('enemy', { schema: {}, init: function () { const enemySystem = this.system; }, }); 

आमतौर पर, संबंधित घटकों के साथ संस्थाओं को इकट्ठा करने और प्रबंधित करने के लिए सिस्टम की आवश्यकता होती है। यहां, सिद्धांत में, तर्क होना चाहिए जो संस्थाओं के संग्रह से संबंधित है। उदाहरण के लिए, खेल में दुश्मनों की उपस्थिति को नियंत्रित करें।

A- फ्रेम में संचार ब्राउज़र की घटनाओं के माध्यम से होता है

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

 this.el.emit('start-game', {level: 1}, false); 

आप इस घटना के लिए सदस्यता ले सकते हैं जिस तरह से हम addEventListener का उपयोग करके परिचित हैं :

 const someEntity = document.getElementById('someEntity'); someEntity.addEventListener('start-game', () => {...}); 

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

 this.el.sceneEl.addEventListener('start-game', () => {...}); 

निष्कर्ष में

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