aframe => अवयव

परिचय

इकाई-घटक-प्रणाली पैटर्न में, एक घटक डेटा का पुन: प्रयोज्य और मॉड्यूलर हिस्सा है जिसे हम उपस्थिति, व्यवहार और / या कार्यक्षमता को जोड़ने के लिए एक इकाई में प्लग करते हैं।

ए-फ़्रेम में, घटक उन इकाइयों को संशोधित करते हैं जो दृश्य में 3 डी ऑब्जेक्ट हैं। हम जटिल वस्तुओं के निर्माण के लिए घटकों को एक साथ मिलाते हैं और बनाते हैं। वे हमें मॉड्यूल में तीन.js और जावास्क्रिप्ट कोड को इनकैप्सुलेट करते हैं जिन्हें हम HTML से घोषित रूप से उपयोग कर सकते हैं। घटक लगभग CSS के अनुरूप हैं।

टिप्पणियों

परिभाषा जीवनचक्र हैंडलर विधियाँ

स्कीमा शरीर रचना होने के साथ, जीवनचक्र विधियां शरीर विज्ञान हैं; स्कीमा डेटा के आकार को परिभाषित करता है, जीवनचक्र हैंडलर विधियां इकाई को संशोधित करने के लिए डेटा का उपयोग करती हैं। हैंडलर आमतौर पर एंटिटी एपीआई के साथ बातचीत करेंगे।

विधियों का अवलोकन

तरीका	विवरण
इस में	घटक के आरंभ होने पर एक बार कॉल किया जाता है। प्रारंभिक अवस्था और तात्कालिक चर सेट करने के लिए उपयोग किया जाता है।
अपडेट करें	जब घटक को आरंभीकृत किया जाता है और जब भी घटक के किसी भी गुण को अपडेट किया जाता है (उदाहरण के लिए, setAttribute के माध्यम से) दोनों को कॉल किया जाता है। इकाई को संशोधित करने के लिए उपयोग किया जाता है।
हटाना	जब घटक को इकाई से हटा दिया जाता है (जैसे, removeAttribute के माध्यम से) या जब इकाई दृश्य से अलग हो जाती है। इकाई में पिछले सभी संशोधनों को पूर्ववत करने के लिए उपयोग किया जाता है।
टिकटिक	प्रत्येक रेंडर लूप या सीन के टिक पर कॉल किया जाता है। निरंतर परिवर्तन या जाँच के लिए उपयोग किया जाता है।
खेल	जब भी दृश्य या इकाई किसी भी पृष्ठभूमि या गतिशील व्यवहार को जोड़ने के लिए खेलता है। घटक आरंभ होने पर एक बार भी बुलाया जाता है। व्यवहार शुरू करने या फिर से शुरू करने के लिए उपयोग किया जाता है।
ठहराव	जब भी दृश्य या इकाई किसी भी पृष्ठभूमि या गतिशील व्यवहार को हटाने के लिए रुकती है। यह भी कहा जाता है कि जब घटक को इकाई से हटा दिया जाता है या जब इकाई को दृश्य से अलग कर दिया जाता है। व्यवहार को विराम देने के लिए उपयोग किया जाता है।
updateSchema	जब भी घटक के किसी भी गुण को अद्यतन किया जाता है, तब कॉल किया जाता है। स्कीमा को गतिशील रूप से संशोधित करने के लिए इस्तेमाल किया जा सकता है।

घटक प्रोटोटाइप गुण

तरीकों के भीतर, हम के माध्यम से घटक प्रोटोटाइप की पहुंच है this :

संपत्ति	विवरण
this.data	स्कीमा डिफ़ॉल्ट मान, मिश्रण और इकाई की विशेषताओं से गणना की गई घटक घटक गुण।
this.el	HTML तत्व के रूप में [निकाय] [इकाई] का संदर्भ।
this.el.sceneEl	HTML तत्व के रूप में [दृश्य] [दृश्य] का संदर्भ।
this.id	यदि घटक में [कई उदाहरण] [एकाधिक] हो सकते हैं, तो घटक के व्यक्तिगत उदाहरण की आईडी (जैसे, `sound__foo` से `foo` )।

विधि

।इस में ()

.init () को घटक के जीवनचक्र की शुरुआत में एक बार कहा जाता है। एक इकाई घटक के init हैंडलर को कॉल कर सकती है:

जब घटक HTML फ़ाइल में इकाई पर स्टेटिक रूप से सेट होता है और पेज लोड होता है।
जब घटक संलग्न इकाई पर setAttribute माध्यम से सेट किया जाता setAttribute ।
जब घटक को अनासक्त इकाई पर सेट किया जाता है, और इकाई को फिर appendChild माध्यम से दृश्य से जोड़ा जाता है।

init हैंडलर का उपयोग अक्सर किया जाता है:

प्रारंभिक अवस्था और चर सेट करें
बाँधने की विधियाँ
घटना के श्रोताओं को संलग्न करें

उदाहरण के लिए, एक कर्सर घटक की init राज्य चर, बाइंड विधियों और इवेंट श्रोताओं को जोड़ेगा:

AFRAME.registerComponent('cursor', {
  // ...
  init: function () {
    // Set up initial state and variables.
    this.intersection = null;
    // Bind methods.
    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
    // Attach event listener.
    this.el.addEventListener('raycaster-intersection', this.onIntersection);
  }
  // ...
});

.update (पुरानाडाटा)

.update (oldData) को तब भी कहा जाता है जब घटक के जीवनचक्र की शुरुआत में घटक के गुण बदल जाते हैं। एक इकाई घटक के update हैंडलर को कॉल कर सकती है:

init () बाद init () कहा जाता है, घटक के जीवनचक्र की शुरुआत में।
जब घटक के गुणों को .setAttribute साथ अद्यतन किया .setAttribute ।

update हैंडलर का अक्सर उपयोग किया जाता है:

इस. this.data का उपयोग करके, इकाई में संशोधन करने में अधिकांश काम करें।
जब भी एक या अधिक घटक गुण बदलते हैं, तो इकाई को संशोधित करें।

संस्था के लिए दानेदार संशोधनों [diffing] [diff] वर्तमान डाटासेट (द्वारा किया जा सकता this.data ) पिछले डाटासेट अद्यतन (से पहले साथ oldData )।

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

उदाहरण के लिए, दृश्यमान घटक का update इकाई की दृश्यता निर्धारित करता है।

AFRAME.registerComponent('visible', {
  /**
   * this.el is the entity element.
   * this.el.object3D is the three.js object of the entity.
   * this.data is the component's property or properties.
   */
  update: function (oldData) {
    this.el.object3D.visible = this.data;
  }
  // ...
});

।हटाना ()

जब भी घटक को इकाई से अलग किया जाता है .remove () कहा जाता है। एक इकाई एक घटक को remove हैंडलर को बुला सकती है:

जब घटक को निकाले के माध्यम से removeAttribute ।
जब इकाई को दृश्य से अलग कर दिया जाता है (जैसे, removeChild )।

remove हैंडलर का उपयोग अक्सर किया जाता है:

निकाले गए घटक के सभी संशोधनों को पूर्ववत करें, हटाएं या साफ़ करें।
इवेंट श्रोताओं को अलग करें।

उदाहरण के लिए, जब [प्रकाश घटक] [प्रकाश] को हटा दिया जाता है, तो प्रकाश घटक उस प्रकाश वस्तु को हटा देगा जो उसने पहले इकाई पर स्थापित किया था, इस प्रकार उसे दृश्य से हटा दिया गया।

AFRAME.registerComponent('light', {
  // ...
  remove: function () {
    this.el.removeObject3D('light');
  }
  // ...
});

.tick (समय, समयडेल्टा)

.tick () को दृश्य के रेंडर लूप के प्रत्येक टिक या फ्रेम पर बुलाया जाता है। दृश्य एक घटक के tick हैंडलर को बुलाएगा:

रेंडर लूप के प्रत्येक फ्रेम पर।
प्रति सेकंड 60 से 120 बार के आदेश पर।
यदि इकाई या दृश्य को रोका नहीं गया है (उदाहरण के लिए, निरीक्षक खुला है)।
यदि इकाई अभी भी दृश्य से जुड़ी है।

tick हैंडलर का उपयोग अक्सर किया जाता है:

प्रत्येक फ्रेम या अंतराल पर इकाई को लगातार संशोधित करें।
स्थितियों के लिए मतदान करें।

tick हैंडलर को मिलीसेकंड ( time ) में दृश्य के वैश्विक अपटाइम और अंतिम फ्रेम ( timeDelta ) के बाद मिलीसेकंड में समय अंतर प्रदान किया जाता है। इनका उपयोग प्रक्षेप के लिए या एक निर्धारित अंतराल पर tick हैंडलर के केवल भागों को चलाने के लिए किया जा सकता है।

उदाहरण के लिए, ट्रैक किए गए नियंत्रण घटक नियंत्रक के एनिमेशन की प्रगति करेंगे, नियंत्रक की स्थिति और रोटेशन को अपडेट करेंगे, और बटन प्रेस की जांच करेंगे।

AFRAME.registerComponent('tracked-controls', {
  // ...
  tick: function (time, timeDelta) {
    this.updateMeshAnimation();
    this.updatePose();
    this.updateButtons();
  }
  // ...
});

। ठहराव ()

.pause () कहा जाता है जब इकाई या दृश्य रुक जाता है। इकाई घटक के pause हैंडलर को कॉल कर सकती है:

घटक को remove से पहले, remove से पहले हैंडलर कहा जाता है।
जब इकाई को Entity.pause () साथ रोका जाता है।
जब दृश्य को सीन के साथ रोक दिया जाता है। Scene.pause () (जैसे, इंस्पेक्टर खोला जाता है)।

pause हैंडलर अक्सर उपयोग किया जाता है:

ईवेंट श्रोताओं को निकालें।
गतिशील व्यवहार के किसी भी मौके को हटा दें।

उदाहरण के लिए, ध्वनि घटक ध्वनि को रोक देगा और एक घटना श्रोता को हटा देगा जो किसी घटना पर ध्वनि बजाएगा:

AFRAME.registerComponent('sound', {
  // ...
  pause: function () {
    this.pauseSound();
    this.removeEventListener();
  }
  // ...
});

।खेल ()

.play () तब कहा जाता है जब इकाई या दृश्य फिर से शुरू होता है। इकाई एक घटक के play हैंडलर को कॉल कर सकती है:

जब घटक को पहली बार संलग्न किया जाता है, तो update हैंडलर के बाद।
जब इकाई को रोक दिया गया था, लेकिन तब Entity.play () साथ फिर से शुरू किया गया।
जब दृश्य को रोक दिया गया था, लेकिन फिर सीन के साथ फिर से शुरू किया Scene.play () ।

play हैंडलर का अक्सर उपयोग किया जाता है:

इवेंट श्रोताओं को जोड़ें।

उदाहरण के लिए, ध्वनि घटक ध्वनि बजाएगा और घटना श्रोता को अपडेट करेगा जो किसी घटना पर ध्वनि बजाएगा:

AFRAME.registerComponent('sound', {
  // ...
  play: function () {
    if (this.data.autoplay) { this.playSound(); }
    this.updateEventListener();
  }
  // ...
});

.updateSchema (डेटा)

.updateSchema () , यदि परिभाषित किया गया है, तो यह जांचने के लिए कि स्कीमा को डायनामिक रूप से संशोधित करने की आवश्यकता है, हर अपडेट पर कॉल किया जाता है।

updateSchema हैंडलर का अक्सर उपयोग किया जाता है:

आमतौर पर स्कीमा को अद्यतन या विस्तारित करना, आमतौर पर एक संपत्ति के मूल्य पर निर्भर करता है।

उदाहरण के लिए, ज्यामिति घटक जांचता है कि क्या primitive संपत्ति यह निर्धारित करने के लिए बदल गई है कि क्या एक अलग प्रकार की ज्यामिति के लिए स्कीमा को अपडेट करना है:

AFRAME.registerComponent('geometry', {
  // ...
  updateSchema: (newData) {
    if (newData.primitive !== this.data.primitive) {
      this.extendSchema(GEOMETRIES[newData.primitive].schema);
    }
  }
  // ...
});

घटक PROTOTYPE METHODS

.flushToDOM ()

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

document.querySelector('[geometry]').components.geometry.flushToDOM();

एक कस्टम ए-फ़्रेम घटक पंजीकृत करें

AFRAME.registerComponent (नाम, परिभाषा)

ए-फ़्रेम घटक पंजीकृत करें। इससे पहले कि हम उन्हें कहीं भी उपयोग करें, हमें घटकों को पंजीकृत करना चाहिए । HTML फ़ाइल से अर्थ, घटकों को पहले क्रम में आना चाहिए ।

{string} नाम - घटक का नाम। HTML विशेषता नाम के माध्यम से घटक की सार्वजनिक एपीआई को दर्शाया गया है।
{ऑब्जेक्ट} परिभाषा - घटक परिभाषा। स्कीमा और जीवनचक्र हैंडलर विधियाँ शामिल हैं।

अपनी js फ़ाइल में foo में घटक दर्ज करना जैसे foo-Components.js

AFRAME.registerComponent('foo', {
  schema: {},
  init: function () {},
  update: function () {},
  tick: function () {},
  remove: function () {},
  pause: function () {},
  play: function () {}
});

अपने दृश्य में फू घटक का उपयोग

<html>
  <head>
    <script src="aframe.min.js"></script>
    <script src="foo-component.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity foo></a-entity>
    </a-scene>
  </body>
</html>

घटक HTML फॉर्म

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

HTML विशेषताएँ घटक नामों का प्रतिनिधित्व करती हैं और उन विशेषताओं का मान घटक डेटा का प्रतिनिधित्व करता है।

एकल-संपत्ति घटक

यदि कोई घटक एकल-गुण वाला घटक है, जिसका अर्थ है कि उसके डेटा में एकल मान है, तो HTML में, घटक मान सामान्य HTML विशेषता की तरह दिखता है:

<!-- `position` is the name of the position component. -->
<!-- `1 2 3` is the data of the position component. -->
<a-entity position="1 2 3"></a-entity>

बहु-संपत्ति घटक

यदि एक घटक एक बहु-संपत्ति घटक है, जिसका अर्थ है कि डेटा कई गुणों और मूल्यों से युक्त होता है, तो HTML में, घटक मूल्य इनलाइन सीएसएस शैलियों जैसा दिखता है:

<!-- `light` is the name of the light component. -->
<!-- The `type` property of the light is set to `point`. -->
<!-- The `color` property of the light is set to `crimson`. -->
<a-entity light="type: point; color: crimson"></a-entity>

जटिल स्कीमा वस्तु को परिभाषित करना

स्कीमा एक ऐसी वस्तु है जो घटक की संपत्ति या गुणों को परिभाषित और वर्णित करती है। स्कीमा की चाबियाँ संपत्ति के नाम हैं, और स्कीमा के मूल्य संपत्ति के प्रकार और मूल्यों को परिभाषित करते हैं (बहु-संपत्ति घटक के मामले में):

अपने घटक में स्कीमा को परिभाषित करना

AFRAME.registerComponent('bar', {
  schema: {
    color: {default: '#FFF'},
    size: {type: 'int', default: 5}
  }
}

परिभाषित स्कीमा चूक को ओवरराइड करें

<a-scene>
  <a-entity bar="color: red; size: 20"></a-entity>
</a-scene>

एकल-संपत्ति योजनाएँ

एक घटक या तो एक एकल-संपत्ति घटक (एक बेनामी मूल्य से युक्त) या एक बहु-संपत्ति घटक (कई नामित मूल्यों से मिलकर) हो सकता है। ए-फ्रेम यह पता लगाएगा कि क्या स्कीमा की संरचना के आधार पर एक घटक एकल-संपत्ति बनाम बहु-संपत्ति है।

किसी एकल-प्रॉपर्टी घटक के स्कीमा में type और / या default कुंजियाँ होती हैं, और स्कीमा के मान ऑब्जेक्ट के बजाय सादे मान होते हैं:

AFRAME.registerComponent('foo', {
  schema: {type: 'int', default: 5}
});

<a-scene>
  <a-entity foo="20"></a-entity>
</a-scene>

ए-फ़्रेम का घटक स्कीमा गुण प्रकार

संपत्ति प्रकार मुख्य रूप से परिभाषित करते हैं कि स्कीमा प्रत्येक संपत्ति के लिए DOM से आने वाले डेटा को कैसे पार्स करता है। पार्स किया गया डेटा तब घटक के प्रोटोटाइप पर data संपत्ति के माध्यम से उपलब्ध होगा। नीचे ए-फ्रेम की निर्मित संपत्ति प्रकार हैं:

संपत्ति के प्रकार	विवरण	डिफ़ॉल्ट मान
सरणी	परस ने अल्पविराम से मानों को सरणी में अलग कर दिया (जैसे, `"1, 2, 3" to ['1', '2', '3'])` ।	[]
संपत्ति	सामान्य संपत्तियों की ओर इशारा करते यूआरएल के लिए। URL को `url(<url>)` के रूप में स्ट्रिंग से बाहर पार्स कर सकते हैं। यदि मान एक तत्व आईडी चयनकर्ता है (उदाहरण के लिए, `#texture` ), तो यह गुण प्रकार URL को वापस करने के लिए `getElementById` और `getAttribute('src')` को कॉल करेगा। `asset` प्रॉपर्टी का प्रकार XHRs को संभालने के लिए बदल सकता है या नहीं कर सकता है या MediaElements को सीधे लौटा सकता है (उदाहरण के लिए, `<img>` एलिमेंट्स)।	''
ऑडियो	`asset` संपत्ति प्रकार के रूप में एक ही पार्सिंग। संभवत: ए-फ़्रेम इंस्पेक्टर द्वारा ऑडियो संपत्ति पेश करने के लिए उपयोग किया जाएगा।	''
बूलियन	पर्स टू बूलियन (यानी, `"false"` से असत्य, बाकी सब सत्य)।	असत्य
रंग	वर्तमान में कोई पार्सिंग नहीं करता है। मुख्य रूप से ए-फ़्रेम इंस्पेक्टर द्वारा रंग बीनने वाले को पेश करने के लिए उपयोग किया जाता है। साथ ही, काम करने के लिए रंग एनिमेशन के लिए रंग प्रकार का उपयोग करना आवश्यक है।	#fff
पूर्णांक	`parseInt` कॉल करता है (उदाहरण के लिए, `"124.5"` से `124` )।	0
नक्शा	`asset` संपत्ति प्रकार के रूप में एक ही पार्सिंग। संभवत: बुनावट परिसंपत्तियों को पेश करने के लिए ए-फ्रेम इंस्पेक्टर का उपयोग किया जाएगा।	''
नमूना	`asset` संपत्ति प्रकार के रूप में एक ही पार्सिंग। संभवतः मॉडल संपत्तियों को प्रस्तुत करने के लिए ए-फ्रेम इंस्पेक्टर का उपयोग किया जाएगा।	''
संख्या	`parseFloat` (उदाहरण के लिए, `'124.5'` से `'124.5'` )	0
चयनकर्ता	`querySelector` (उदाहरण के लिए, `"#box"` से `<a-entity id="box">` `"#box"` `<a-entity id="box">` )।	शून्य
selectorAll	कॉल `querySelectorAll` और रूपांतरित होता `NodeList` को `Array` (जैसे, `".boxes"` करने के लिए [<एक इकाई वर्ग = "बॉक्स", ...]),	शून्य
तार	कोई पार्सिंग नहीं करता है।	''
vec2	दो संख्याओं को एक `{x, y}` ऑब्जेक्ट (जैसे, `1 -2` से `{x: 1, y: -2}` ।	{x: 0, y: 0}
vec3	तीन संख्याओं को `{x, y, z}` ऑब्जेक्ट में (जैसे, `1 -2 3` से `{x: 1, y: -2, z: 3}` ।	{x: 0, y: 0, z: 0}
vec4	चार संख्याओं को `{x, y, z, w}` ऑब्जेक्ट में (उदाहरण के लिए, `1 -2 3 -4.5` से `{x: 1, y: -2, z: 3, w: -4.5}` ।	{x: 0, y: 0, z: 0, w: 0}

संपत्ति प्रकार इंजेक्शन

स्कीमा केवल एक डिफ़ॉल्ट मान दिए गए संपत्ति प्रकार का अनुमान लगाने की कोशिश करेगा:

schema: {default: 10}  // type: "number"
schema: {default: "foo"}  // type: "string"
schema: {default: [1, 2, 3]}  // type: "array"

प्रॉपर्टी के प्रकार को देखते हुए स्कीमा एक डिफ़ॉल्ट मान सेट करेगा यदि नहीं दिया गया है:

schema: {type: 'number'}  // default: 0
schema: {type: 'string'}  // default: ''
schema: {type: 'vec3'}  // default: {x: 0, y: 0, z: 0}

कस्टम संपत्ति प्रकार

हम अपने स्वयं के संपत्ति प्रकार या पार्सर को एक type स्थान पर parse फ़ंक्शन प्रदान करके भी परिभाषित कर सकते हैं:

schema: {
  // Parse slash-delimited string to an array 
  // (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
  myProperty: {
    default: [],
    parse: function (value) {
      return value.split('/');
    }
  }
}

एक घटक के सदस्यों और विधियों तक पहुँचना

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

AFRAME.registerComponent('foo', {
  init: function () {
    this.bar = 'baz';
  },
  qux: function () {
    // ...
  }
});

चलो बार के सदस्य और क्क्स विधि का उपयोग करें:

var fooComponent = document.querySelector('[foo]').components.foo;
console.log(fooComponent.bar);
fooComponent.qux();

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

aframe
अवयव

खोज…