aframe
पुरातन
खोज…
परिचय
प्राइमेटिव्स हूड के तहत बस <a-entity> । इसका मतलब यह है कि आदिम स्थिति, घूमने, स्केलिंग और घटकों को संलग्न करने जैसी संस्थाओं के समान एपीआई है। ए-फ्रेम कुछ मुट्ठी भर तत्व प्रदान करता है जैसे कि <a-box> या <a-sky> जिसे आदिम कहा जाता है जो इसे शुरुआती लोगों के लिए आकर्षक बनाने के लिए इकाई-घटक पैटर्न को लपेटता है। । डेवलपर्स अपनी खुद की आदिम भी बना सकते हैं।
टिप्पणियों
हुड के नीचे
प्राइमिटिव्स मुख्य रूप से नए लोगों के लिए एक सुविधा परत (यानी, सिंथेटिक चीनी) के रूप में कार्य करते हैं। इस बात का ध्यान रखें कि आदिम हैं <a-entity> उस हुड के नीचे हैं:
- एक सिमेंटिक नाम है (उदाहरण के लिए,
<a-box>) - डिफ़ॉल्ट मान के साथ घटकों का एक प्रीसेट बंडल रखें
- नक्शा या प्रॉक्सी HTML [घटक] [घटक] डेटा की विशेषता है
प्रिमिटिव एकता में प्रीफैब के समान हैं। इकाई-घटक-प्रणाली पैटर्न पर कुछ साहित्य उन्हें संयोजन के रूप में संदर्भित करते हैं। वे मुख्य इकाई-घटक API को सार करते हैं:
- उपयोगी घटकों को पूर्व निर्धारित डिफॉल्ट के साथ एक साथ लिखें
- जटिल-लेकिन-सामान्य प्रकार की संस्थाओं के लिए एक आशुलिपि के रूप में कार्य करें (उदाहरण,
<a-sky>) - शुरुआती लोगों के लिए एक परिचित इंटरफ़ेस प्रदान करें क्योंकि ए-फ़्रेम एक नई दिशा में एचटीएमएल लेता है
हुड के तहत, यह <a-box> -बॉक्स <a-box> आदिम:
<a-box color="red" width="3"></a-box>
इस इकाई-घटक फॉर्म का प्रतिनिधित्व करता है:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> चूक geometry.primitive संपत्ति के लिए box । और आदिम एचटीएमएल width विशेषता को अंतर्निहित geometry.width गुण के साथ-साथ अंतर्निहित material.color के एचटीएमएल color विशेषता के लिए मैप करता है। संपत्ति।
एक आदिम का पंजीकरण
हम AFRAME.registerPrimitive(name, definition) का उपयोग करके अपने स्वयं के आदिम (अर्थात एक तत्व को पंजीकृत) पंजीकृत कर AFRAME.registerPrimitive(name, definition) । definition इन गुणों को परिभाषित करने वाली एक जावास्क्रिप्ट वस्तु है:
| संपत्ति | विवरण |
|---|---|
| defaultComponents | आदिम के डिफ़ॉल्ट घटकों को निर्दिष्ट करने वाली वस्तु। कुंजियाँ घटकों के नाम हैं और मान घटक के डिफ़ॉल्ट डेटा हैं। |
| मैपिंग | HTML विशेषता नाम और घटक संपत्ति नामों के बीच मानचित्रण निर्दिष्ट करने वाली वस्तु। जब भी HTML विशेषता नाम अपडेट किया जाता है, तो आदिम संबंधित घटक संपत्ति को अपडेट करेगा। कंपोनेंट प्रॉपर्टी को एक डॉट सिंटैक्स ${componentName}.${propertyName} का उपयोग करके परिभाषित किया जाता है ${componentName}.${propertyName} । |
उदाहरण के लिए, नीचे <a-box> -बॉक्स <a-box> आदिम के लिए ए-फ्रेम का पंजीकरण है:
var extendDeep = AFRAME.utils.extendDeep;
// The mesh mixin provides common material properties for creating mesh-based primitives.
// This makes the material component a default component and maps all the base material properties.
var meshMixin = AFRAME.primitives.getMeshMixin();
AFRAME.registerPrimitive('a-box', extendDeep({}, meshMixin, {
// Preset default components. These components and component properties will be attached to the entity out-of-the-box.
defaultComponents: {
geometry: {primitive: 'box'}
},
// Defined mappings from HTML attributes to component properties (using dots as delimiters).
// If we set `depth="5"` in HTML, then the primitive will automatically set `geometry="depth: 5"`.
mappings: {
depth: 'geometry.depth',
height: 'geometry.height',
width: 'geometry.width'
}
}));
जिसका उपयोग हम तब कर सकते हैं
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
इस इकाई-घटक फॉर्म का प्रतिनिधित्व करता है:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>