aframe
Primitivi
Ricerca…
introduzione
Primitive sono solo <a-entity> s sotto il cofano. Ciò significa che le primitive hanno la stessa API di entità come posizionamento, rotazione, ridimensionamento e collegamento di componenti. A-Frame fornisce una manciata di elementi come <a-box> o <a-sky> chiamati primitive che avvolgono il pattern entità-componente per renderlo attraente per i principianti. . Gli sviluppatori possono anche creare i propri primitivi.
Osservazioni
Sotto il cappuccio
I primitivi agiscono come uno strato di convenienza (cioè zucchero sintattico) principalmente per i nuovi arrivati. Tieni presente, per ora, che i primitivi sono <a-entity> s sotto il cofano che:
- Avere un nome semantico (es.
<a-box>) - Avere un gruppo predefinito di componenti con valori predefiniti
- Attributi HTML mappa o proxy ai dati [componente] [componente]
I primitivi sono simili ai prefabbricati in Unity . Alcune pubblicazioni sul modello di entità-componente-sistema si riferiscono ad esse come assemblaggi . Essi astraggono l'API nucleo-componente principale per:
- Pre-comporre componenti utili insieme ai valori predefiniti prescritti
- Agisci come una scorciatoia per tipi di entità complesse ma comuni (ad es.
<a-sky>) - Fornire un'interfaccia familiare per i principianti poiché A-Frame porta l'HTML in una nuova direzione
Sotto il cofano, questa primitiva <a-box> :
<a-box color="red" width="3"></a-box>
rappresenta questo modulo entità-componente:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> imposta di default la proprietà geometry.primitive su box . E la primitiva associa l'attributo width HTML alla proprietà geometry.width sottostante e all'attributo color HTML alla proprietà material.color sottostante.
Registrazione di un primitivo
Possiamo registrare i nostri primitivi (cioè registrare un elemento) usando AFRAME.registerPrimitive(name, definition) . definition è un oggetto JavaScript che definisce queste proprietà:
| Proprietà | Descrizione |
|---|---|
| defaultComponents | Oggetto che specifica i componenti predefiniti della primitiva. Le chiavi sono i nomi dei componenti e i valori sono i dati predefiniti dei componenti. |
| mappature | Oggetto che specifica il mapping tra il nome dell'attributo HTML e i nomi delle proprietà del componente. Ogni volta che il nome dell'attributo HTML viene aggiornato, la primitiva aggiornerà la proprietà del componente corrispondente. La proprietà del componente viene definita utilizzando una sintassi del punto ${componentName}.${propertyName} . |
Ad esempio, di seguito è riportata la registrazione di A-Frame per la primitiva <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'
}
}));
Che possiamo usare allora
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
rappresenta questo modulo entità-componente:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>