aframe
primitieven
Zoeken…
Invoering
Primitieven zijn gewoon <a-entity> s onder de motorkap. Dit betekent dat primitieven dezelfde API hebben als entiteiten zoals componenten voor positioneren, roteren, schalen en koppelen. A-Frame biedt een handvol elementen zoals <a-box> of <a-sky> genaamd primitieven die het entiteit-componentpatroon omwikkelen om het aantrekkelijk te maken voor beginners. . Ontwikkelaars kunnen ook hun eigen primitieven maken.
Opmerkingen
Onder de motorkap
Primitieven fungeren als een laag voor gemak (dwz syntactische suiker), voornamelijk voor nieuwkomers. Houd in gedachten voor nu dat primitieven zijn <a-entity> is onder de motorkap dat:
- Heb een semantische naam (bijvoorbeeld
<a-box>) - Heb een vooraf ingestelde bundel van componenten met standaardwaarden
- HTML- of HTML-attributen toewijzen aan [component] [component] gegevens
Primitieven zijn vergelijkbaar met prefabs in Unity . Sommige literatuur over het entiteit-component-systeempatroon noemt ze assemblages . Ze abstraheren de kern-entiteit-component API om:
- Stel vooraf nuttige componenten samen met de voorgeschreven standaardwaarden
- Handelen als een steno voor complexe maar veel voorkomende soorten entiteiten (bijvoorbeeld
<a-sky>) - Biedt een vertrouwde interface voor beginners, aangezien A-Frame HTML een nieuwe richting inslaat
Onder de kap, deze <a-box> primitieve:
<a-box color="red" width="3"></a-box>
vertegenwoordigt deze entiteit-component vorm:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> zet de eigenschap geometry.primitive standaard in op box . En de primitieve brengt de HTML width attribuut om de onderliggende geometry.width eigenschap evenals de HTML color attribuut om de onderliggende material.color pand.
Een primitief registreren
We kunnen onze eigen primitieven registreren (dwz een element registreren) met AFRAME.registerPrimitive(name, definition) . definition is een JavaScript-object dat deze eigenschappen definieert:
| Eigendom | Beschrijving |
|---|---|
| defaultComponents | Object dat standaardcomponenten van de primitieve opgeeft. De sleutels zijn de namen van de componenten en de waarden zijn de standaardgegevens van de componenten. |
| mappings | Object dat toewijzing tussen HTML-kenmerknaam en namen van componenteigenschappen opgeeft. Wanneer de HTML-kenmerknaam wordt bijgewerkt, werkt de primitieve de overeenkomstige componenteigenschap bij. De componenteigenschap wordt gedefinieerd met een puntsyntaxis ${componentName}.${propertyName} . |
Hieronder ziet u bijvoorbeeld de registratie van A-Frame voor de primitieve <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'
}
}));
Die we dan kunnen gebruiken
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
vertegenwoordigt deze entiteit-component vorm:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>