aframe
Primitives
Sök…
Introduktion
Primitiva är bara <a-entity> under huven. Detta innebär att primitiv har samma API som enheter som positionering, rotering, skalning och fästning av komponenter. A-Frame tillhandahåller en handfull element som <a-box> eller <a-sky> kallade primitiva som lindar entitet-komponentmönstret för att göra det tilltalande för nybörjare. . Utvecklare kan skapa sina egna primitiv också.
Anmärkningar
Under huven
Primitiva fungerar som ett bekvämhetslager (dvs. syntaktiskt socker) främst för nykomlingar. Kom ihåg för närvarande att primitiva är <a-entity> s under huven att:
- Har ett semantiskt namn (t.ex.
<a-box>) - Har ett förinställt paket med komponenter med standardvärden
- Karta eller proxy-HTML-attribut till [komponent] [komponent] -data
Primitiva liknar prefaberna i Unity . Viss litteratur om enhetens komponent-systemmönster hänvisar till dem som sammansättningar . De abstraherar kärnenhetens komponent-API till:
- Komponera användbara komponenter tillsammans med föreskrivna standardvärden
- Verka som en kortfattning för komplexa men vanliga typer av enheter (t.ex.
<a-sky>) - Ge ett välkänt gränssnitt för nybörjare eftersom A-Frame tar HTML i en ny riktning
Under huven, denna <a-box> primitiva:
<a-box color="red" width="3"></a-box>
representerar denna enhet-komponentform:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> standard för egenskapen geometry.primitive till box . Och det primitiva mappar HTML width attribut till den underliggande geometry.width egendom samt HTML color attribut till underliggande material.color egendom.
Registrera en primitiv
Vi kan registrera våra egna primitiv (dvs. registrera ett element) med AFRAME.registerPrimitive(name, definition) . definition är ett JavaScript-objekt som definierar dessa egenskaper:
| Fast egendom | Beskrivning |
|---|---|
| defaultComponents | Objekt som specificerar standardkomponenterna för den primitiva. Knapparna är komponenternas namn och värdena är komponenternas standarddata. |
| mappningar | Objekt som specificerar mappning mellan HTML-attributnamn och komponentegenskapsnamn. Närhelst HTML-attributnamnet uppdateras uppdaterar primitiven motsvarande komponentegenskap. Komponentegenskapen definieras med en punktsyntax ${componentName}.${propertyName} . |
Nedan är till exempel A-Frame registrering för <a-box> primitiv:
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'
}
}));
Som vi kan använda då
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
representerar denna enhet-komponentform:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>