aframe
संस्थाओं
खोज…
परिचय
ए-फ्रेम <a-entity> तत्व के माध्यम से एक इकाई का प्रतिनिधित्व करता है। जैसा कि इकाई-घटक-प्रणाली पैटर्न में परिभाषित किया गया है, संस्थाएं प्लेसहोल्डर ऑब्जेक्ट्स हैं, जिसमें हम उन्हें उपस्थिति, व्यवहार और कार्यक्षमता प्रदान करने के लिए घटकों में प्लग करते हैं।
वाक्य - विन्यास
-
<a-entity> // Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing: -
<a-entity geometry="primitive: box" material="color: red"> // We can attach components to it to make it render something or do something. To give it shape and appearance, we can attach the geometry and material components: -
<a-entity geometry="primitive: box" material="color: red" light="type: point; intensity: 2.0"> // Or to make it emit light, we can further attach the light component:
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
| अवयव | <a-entity>.components जुड़े घटकों की एक वस्तु है। यह हमें प्रत्येक घटक के डेटा, स्थिति और विधियों सहित इकाई के घटकों तक पहुंच प्रदान करता है। |
| खेल रहा है | चाहे इकाई सक्रिय हो और खेल रही हो। यदि हम इकाई को विराम देते हैं, तो पेप्लेटिंग झूठी हो जाती है। |
| object3D | <a-entity>.object3D इकाई के तीन.जेएस ऑब्जेक्ट 3 डी प्रतिनिधित्व का एक संदर्भ है। अधिक विशेष रूप से, object3D एक THREE.Group ऑब्जेक्ट होगा जिसमें विभिन्न प्रकार के THREE.Object3D s हो सकते हैं जैसे कैमरा, मेज़, लाइट या THREE.Object3D : |
| object3DMap | एक इकाई का object3DMap एक ऐसा ऑब्जेक्ट है जो विभिन्न प्रकार के THREE.Object3Ds (जैसे, कैमरा, मेज़, लाइट्स, साउंड) को एक्सेस देता है जो घटकों ने निर्धारित किया है। |
| sceneEl | एक इकाई में इसके दृश्य तत्व का संदर्भ होता है। |
टिप्पणियों
विधि
addState (StateName)
addState इकाई पर एक स्थिति को आगे बढ़ाएगा । यह स्टेटेड इवेंट का उत्सर्जन करेगा, और हम .is का उपयोग कर अस्तित्व के लिए राज्य की जांच कर सकते हैं:
entity.addEventListener('stateadded', function (evt) {
if (evt.detail.state === 'selected') {
console.log('Entity now selected!');
}
});
entity.addState('selected');
entity.is('selected'); // >> true
उत्सर्जन (नाम, विवरण, बुलबुले)
emit इकाई पर एक कस्टम DOM ईवेंट का उत्सर्जन करता है। उदाहरण के लिए, हम एक एनीमेशन को ट्रिगर करने के लिए एक घटना का उत्सर्जन कर सकते हैं:
<a-entity>
<a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
</a-entity>
entity.emit('rotate');
हम दूसरे तर्क के रूप में ईवेंट विवरण या डेटा भी पास कर सकते हैं:
entity.emit('collide', { target: collidingEntity });
घटना डिफ़ॉल्ट रूप से बबल होगी। हम इसे बुलबुला के लिए गलत पारित करके बुलबुला नहीं बता सकते हैं:
entity.emit('sink', null, false);
FlushToDOM (पुनरावर्ती)
flushToDOM मैन्युअल रूप से किसी इकाई के घटकों के डेटा को क्रमबद्ध करेगा और DOM को अपडेट करेगा।
getAttribute (घटकनाम)
getAttribute पार्स किए गए घटक डेटा (मिश्रण और डिफॉल्ट सहित) को पुनः प्राप्त करता है।
// <a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}
यदि कोई पंजीकृत नाम घटक का नाम नहीं है, तो गेटआर्ट श्रद्धांजलि के रूप में यह सामान्य रूप से व्यवहार करेगा:
// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"
getDOMAttribute (घटकनाम)
getDOMAttribute केवल पार्स किए गए घटक डेटा को पुनः प्राप्त करता है जो कि DOM या setAttribute के माध्यम से स्पष्ट रूप से परिभाषित किया गया है । यदि कंपोनेंटनाम एक पंजीकृत घटक का नाम है, तो getDOMAttribute केवल HTML में परिभाषित घटक डेटा को एक पार्स ऑब्जेक्ट के रूप में वापस करेगा। getDOMAttribute घटकों के लिए getAttribute का आंशिक रूप है क्योंकि लौटे घटक डेटा में लागू मिश्रण या डिफ़ॉल्ट मान शामिल नहीं हैं:
GetAttribute के उपरोक्त उदाहरण के आउटपुट की तुलना करें:
// <a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: "box", width: 3 }
entity.getDOMAttribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined
getObject3D (प्रकार)
getObject3D ऊपर लग रहा है एक बच्चे object3DMap पर प्रकार से संदर्भित THREE.Object3D।
AFRAME.registerComponent('example-mesh', {
init: function () {
var el = this.el;
el.getOrCreateObject3D('mesh', THREE.Mesh);
el.getObject3D('mesh'); // Returns THREE.Mesh that was just created.
}
});
getOrCreateObject3D (प्रकार, कंस्ट्रक्टर)
इकाई एक THREE.Object3D नहीं है प्रकार के तहत पंजीकृत हैं, तो getOrCreateObject3D पारित कर दिया निर्माता का उपयोग कर एक instantiated THREE.Object3D रजिस्टर करेंगे। इकाई प्रकार के तहत पंजीकृत एक THREE.Object3D हैं, तो क्या getOrCreateObject3D getObject3D रूप में कार्य करेगा:
AFRAME.registerComponent('example-geometry', {
update: function () {
var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
mesh.geometry = new THREE.Geometry();
}
});
ठहराव ()
ठहराव () एनिमेशन और घटकों द्वारा परिभाषित किसी भी गतिशील व्यवहार को रोक देगा। जब हम एक इकाई को रोकते हैं, तो यह अपने एनिमेशन को रोक देगा और इसके प्रत्येक घटक पर Component.pause () कॉल करेगा। अवयव ठहराव पर क्या होता है इसे लागू करने का निर्णय लेते हैं, जो अक्सर घटना श्रोताओं को हटा रहा है। जब हम एक इकाई को रोकते हैं, तो एक इकाई अपने बाल संस्थाओं पर रोक () को बुलाएगी।
// <a-entity id="spinning-jumping-ball">
entity.pause();
उदाहरण के लिए, पॉज़ पर लुक-कंट्रोल घटक इनपुट के लिए सुनने वाले ईवेंट हैंडलर को हटा देगा।
खेल ()
नाटक () एनिमेशन और घटकों द्वारा परिभाषित किसी भी गतिशील व्यवहार को शुरू करेगा। जब डोम एक इकाई संलग्न करता है तो इसे स्वचालित रूप से कहा जाता है। जब एक इकाई खेल () , इकाई अपने बच्चे संस्थाओं पर खेलने () को बुलाती है।
entity.pause();
entity.play();
उदाहरण के लिए, खेलने पर ध्वनि घटक ध्वनि बजाना शुरू कर देगा।
setAttribute (घटकनाम, मान, [संपत्तिवैल्यू | क्लोबर])
यदि कोई पंजीकृत नाम घटक का नाम नहीं है या घटक एक एकल-संपत्ति घटक है, तो सेटट्राईटर सामान्य रूप से व्यवहार करता है:
entity.setAttribute('visible', false);
हालांकि अगर componentName एक पंजीकृत घटक का नाम है, यह मूल्य के लिए विशेष पार्स संभाल सकता है। उदाहरण के लिए, स्थिति घटक एक एकल-संपत्ति घटक है, लेकिन इसका गुण प्रकार पार्सर इसे ऑब्जेक्ट लेने की अनुमति देता है:
entity.setAttribute('position', { x: 1, y: 2, z: 3 });
setObject3D (प्रकार, obj)
setObject3D उत्तीर्ण obj को पंजीकृत करेगा, एक THREE.Object3D , इकाई के ऑब्जेक्ट के तहत टाइप करें । ए-फ़्रेम इकाई की जड़ object3D के एक बच्चे के रूप में obj कहते हैं।
AFRAME.registerComponent('example-orthogonal-camera', {
update: function () {
this.el.setObject3D('camera', new THREE.OrthogonalCamera());
}
});
निष्कासन (घटकनाम, गुणनाम)
यदि कंपोनेंट एक पंजीकृत घटक का नाम है, तो DOM से विशेषता को हटाने के साथ, removeAttribute भी निकाय से घटक को अलग कर देगा, घटक के हटाए गए जीवनचक्र की विधि को लागू करेगा।
entity.removeAttribute('goemetry'); // Detach the geometry component.
entity.removeAttribute('sound'); // Detach the sound component.
अगर प्रॉपर्टी दिया जाता है, removeAttribute कि संपत्ति संपत्ति का डिफ़ॉल्ट मान पर प्रॉपर्टी द्वारा निर्दिष्ट की संपत्ति के मूल्य रीसेट हो जाएंगी:
entity.setAttribute('material', 'color', 'blue'); // The color is blue.
entity.removeAttribute('material', 'color'); // Reset the color to the default value, white.
removeObject3D (प्रकार)
removeObject3D इकाई के THREE.Group और इस प्रकार दृश्य से प्रकार द्वारा निर्दिष्ट ऑब्जेक्ट को निकालता है। यह इकाई के ऑब्जेक्ट 3DMap को अपडेट करेगा, नल के प्रकार की कुंजी का मान सेट करता है। इसे आम तौर पर एक घटक से कहा जाता है, अक्सर हटाए गए हैंडलर के भीतर:
AFRAME.registerComponent('example-light', {
update: function () {
this.el.setObject3D('light', new THREE.Light());
// Light is now part of the scene.
// object3DMap.light is now a THREE.Light() object.
},
remove: function () {
this.el.removeObject3D('light');
// Light is now removed from the scene.
// object3DMap.light is now null.
}
});
निष्कासन (राज्यनाम)
निष्कासन इकाई से एक स्थिति पॉप करेगा। यह stateremoved घटना का उत्सर्जन करेगा, और हम .is का उपयोग करते हुए इसके निष्कासन की जाँच कर सकते हैं:
entity.addEventListener('stateremoved', function (evt) {
if (evt.detail.state === 'selected') {
console.log('Entity no longer selected.');
}
});
entity.addState('selected');
entity.is('selected'); // >> true
entity.removeState('selected');
entity.is('selected'); // >> false
आयोजन
| कार्यक्रम नाम | विवरण |
|---|---|
| बच्चे संलग्न | एक बाल संस्था इकाई से जुड़ी हुई थी। |
| बाल-अलग | एक बाल संस्था को इकाई से अलग कर दिया गया था। |
| componentchanged | इकाई के घटकों में से एक को संशोधित किया गया था। |
| componentinit | इकाई के घटकों में से एक को आरंभीकृत किया गया था। |
| componentremoved | इकाई के घटकों में से एक को हटा दिया गया था। |
| लदा हुआ | इकाई ने अपने घटकों को संलग्न और आरंभिक किया है। |
| object3dset | THREE.Object3D को setObject3D (नाम) का उपयोग करके इकाई पर सेट किया गया था। इवेंट विवरण में ऑब्जेक्ट 3DMap पर सेट करने के लिए उपयोग किया गया नाम होगा। |
| ठहराव | इकाई अब निष्क्रिय है और गतिशील व्यवहार के मामले में रुका हुआ है। |
| खेल | इकाई अब सक्रिय है और गतिशील व्यवहार के संदर्भ में खेल रही है। |
| stateadded | इकाई को एक नया राज्य प्राप्त हुआ। |
| stateremoved | इकाई अब एक निश्चित स्थिति नहीं है। |
| schemachanged | एक घटक का स्कीमा बदल दिया गया था। |
घटना की जानकारी
नीचे प्रत्येक घटना के लिए घटना विस्तार शामिल है:
| कार्यक्रम नाम | संपत्ति | विवरण |
|---|---|---|
| बच्चे संलग्न | एल | संलग्न बाल तत्व का संदर्भ। |
| componentchanged | नाम | उस घटक का नाम, जिसका डेटा संशोधित किया गया था। |
| आईडी | उस घटक की आईडी जिसमें उसका डेटा संशोधित था। | |
| नए आंकड़े | घटक का नया डेटा, इसके संशोधित होने के बाद। | |
| oldData | घटक का पिछला डेटा, संशोधित होने से पहले। | |
| componentinitialized | नाम | उस घटक का नाम जिसे आरंभीकृत किया गया था। |
| आईडी | उस घटक की आईडी जिसमें उसका डेटा संशोधित था। | |
| डेटा | घटक डेटा। | |
| componentremoved | नाम | हटाए गए घटक का नाम। |
| आईडी | हटाए गए घटक की आईडी। | |
| stateadded | राज्य | जो राज्य संलग्न था (स्ट्रिंग)। |
| stateremoved | राज्य | वह अवस्था जो अलग हो गई थी (स्ट्रिंग)। |
| schemachanged | अंग | घटक का नाम जिसमें यह स्कीमा था बदल गया है। |
घटक परिवर्तन के लिए सुन रहा है
हम इकाई में परिवर्तन के लिए सुनने के लिए घटक की घटना का उपयोग कर सकते हैं:
entity.addEventListener('componentchanged', function (evt) {
if (evt.detail.name === 'position') {
console.log('Entity has moved from',
evt.detail.oldData, 'to', evt.detail.newData, '!');
}
});
अटैच और डिटैच्ड होने के नाते बाल एलिमेंट्स के लिए सुनना
जब दृश्य संलग्न होता है या किसी इकाई को अलग करता है, तो सुनने के लिए हम बच्चे से जुड़े और बच्चे से अलग होने वाली घटनाओं का उपयोग कर सकते हैं:
entity.addEventListener('child-attached', function (evt) {
if (evt.detail.el.tagName.toLowerCase() === 'a-box') {
console.log('a box element has been attached');
};
});
इकाई मल्टी-प्रॉपर्टी घटक डेटा (setAttribute)
बहु-संपत्ति घटक डेटा को अद्यतन करना
एक बहु संपत्ति घटक के लिए घटक डेटा को अद्यतन करने के लिए, हम componentName के रूप में एक पंजीकृत घटक के नाम गुजरती हैं, और मूल्य के रूप में संपत्तियों की एक वस्तु पारित कर सकते हैं। एक स्ट्रिंग भी स्वीकार्य है (जैसे, प्रकार: स्पॉट; दूरी: 30 ), लेकिन ऑब्जेक्ट ए-फ़्रेम को पार्सिंग में कुछ काम से बचाएगा:
// Only the properties passed in the object will be overwritten.
entity.setAttribute('light', {
type: 'spot',
distance: 30,
intensity: 2.0
});
या एक बहु-संपत्ति घटक के लिए अलग-अलग प्रॉपर्टी अद्यतन करने के लिए, हम componentName, दूसरा तर्क के रूप में एक प्रॉपर्टी का नाम, और तीसरा तर्क के रूप में सेट करने के लिए संपत्ति के मूल्य के रूप में पंजीकृत घटक के नाम से पारित कर सकते हैं:
// All previous properties for the material component (besides the color) will be unaffected.
entity.setAttribute('material', 'color', 'crimson');
ध्यान दें कि सरणी गुण प्रकार विशिष्ट व्यवहार करते हैं:
- ऐरे परस्पर हैं। वे संदर्भ द्वारा असाइन किए गए हैं इसलिए सरणियों में परिवर्तन घटक द्वारा दिखाई देगा।
- सरणी प्रकार के गुणों के अपडेट घटक के अपडेट विधि को ट्रिगर नहीं करेंगे और न ही घटनाओं का उत्सर्जन करेंगे।
बहु-संपत्ति घटक डेटा को अद्यतन करना
यदि सत्य को .setAttribute को तीसरे तर्क के रूप में पारित किया जाता है, तो गैर-निर्दिष्ट गुण रीसेट हो जाएंगे और क्लोब किए जाएंगे:
// All previous properties for the light component will be removed and overwritten.
entity.setAttribute('light', {
type: 'spot',
distance: 30,
intensity: 2.0
}, true);
एक इकाई को पुनः प्राप्त करना
हम बस DOM APIs का उपयोग करके एक इकाई पुनः प्राप्त कर सकते हैं।
<a-entity id="mario"></a-entity>
var el = document.querySelector('#mario');
इकाई घटकों को पुनः प्राप्त करना
उदाहरण के लिए, यदि हम किसी इकाई के तीन.जेएस कैमरा ऑब्जेक्ट या मटेरियल ऑब्जेक्ट को हथियाना चाहते हैं, तो हम उसके घटकों में पहुँच सकते हैं
var camera = document.querySelector('a-entity[camera]').components.camera.camera;
var material = document.querySelector('a-entity[material]').components.material.material;
या यदि कोई घटक API को उजागर करता है, तो हम उसके तरीके कह सकते हैं:
document.querySelector('a-entity[sound]').components.sound.pause();