aframe
Primitive
Suche…
Einführung
Primitive sind nur <a-entity> unter der Haube. Dies bedeutet, dass Grundelemente dieselbe API wie Elemente zum Positionieren, Drehen, Skalieren und Anfügen von Komponenten haben. A-Frame bietet eine Handvoll Elemente wie <a-box> oder <a-sky> als Grundelemente bezeichnet werden, die das Entitätskomponentenmuster umschließen, um es für Anfänger attraktiv zu machen. . Entwickler können auch ihre eigenen Grundelemente erstellen.
Bemerkungen
Unter der Haube
Primitive fungieren als Convenience-Schicht (dh syntaktischer Zucker) in erster Linie für Neuankömmlinge. Denken Sie im Moment daran, dass Primitive <a-entity> s unter der Haube sind:
- Einen semantischen Namen haben (zB
<a-box>) - Sie haben ein voreingestelltes Bündel von Komponenten mit Standardwerten
- Zuordnung oder Proxy-HTML-Attribute zu [Komponente] [Komponente] -Daten
Primitive ähneln Prefabs in Unity . Einige Literaturangaben zum Entity-Component-System-Muster beziehen sich auf Assemblagen . Sie abstrahieren die Kern-Entitätskomponenten-API wie folgt:
- Stellen Sie nützliche Komponenten zusammen mit den vorgeschriebenen Standardwerten vor
- Als Abkürzung für komplexe, aber häufig vorkommende Entitäten dienen (z. B.
<a-sky>) - Bieten Sie eine vertraute Benutzeroberfläche für Anfänger, da A-Frame HTML in eine neue Richtung lenkt
Unter der Haube dieses <a-box> -Primitiv:
<a-box color="red" width="3"></a-box>
stellt dieses Entitätskomponentenformular dar:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> die Eigenschaft geometry.primitive standardmäßig auf box . Und die primitive bildet das HTML - width - Attribut auf die zugrunde liegende geometry.width Eigenschaft sowie das HTML - color auf die zugrunde liegende material.color Eigenschaft.
Registrieren eines Primitivs
Wir können unsere eigenen Grundelemente (dh ein Element registrieren) mit AFRAME.registerPrimitive(name, definition) registrieren. definition ist ein JavaScript-Objekt, das diese Eigenschaften definiert:
| Eigentum | Beschreibung |
|---|---|
| defaultComponents | Objekt, das Standardkomponenten des Grundelements angibt. Die Schlüssel sind die Namen der Komponenten und die Werte sind die Standarddaten der Komponenten. |
| Zuordnungen | Objekt, das die Zuordnung zwischen HTML-Attributnamen und Komponenteneigenschaftsnamen angibt. Immer wenn der HTML-Attributname aktualisiert wird, aktualisiert das Grundelement die entsprechende Komponenteneigenschaft. Die Komponenteneigenschaft wird mit der Punktsyntax ${componentName}.${propertyName} . |
Im Folgenden finden Sie die Registrierung von A-Frame für das <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'
}
}));
Welche wir dann benutzen können
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
stellt dieses Entitätskomponentenformular dar:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>