aframe
Primitivas
Buscar..
Introducción
Las primitivas son solo <a-entity> bajo el capó. Esto significa que las primitivas tienen la misma API que las entidades, como posicionamiento, rotación, escalado y conexión de componentes. A-Frame proporciona un puñado de elementos como <a-box> o <a-sky> llamados primitivos que envuelven el patrón entidad-componente para que resulte atractivo para los principiantes. . Los desarrolladores también pueden crear sus propios primitivos.
Observaciones
Bajo el capó
Los primitivos actúan como una capa de conveniencia (es decir, azúcar sintáctica) principalmente para los recién llegados. Tenga en cuenta por ahora que las primitivas están <a-entity> s debajo del capó que:
- Tener un nombre semántico (por ejemplo,
<a-box>) - Tener un paquete preestablecido de componentes con valores predeterminados
- Asignar o asignar atributos HTML a los datos de [componente]
Los primitivos son similares a los prefabs en Unity . Algunas publicaciones sobre el patrón entidad-componente-sistema se refieren a ellas como ensamblajes . Se abstrae la API de componente de entidad central para:
- Pre-componer componentes útiles junto con los valores predeterminados prescritos
- Actuar como una forma abreviada de tipos de entidades complejas pero comunes (por ejemplo,
<a-sky>) - Proporciona una interfaz familiar para principiantes, ya que A-Frame lleva el HTML en una nueva dirección
Bajo el capó, este <a-box> primitivo:
<a-box color="red" width="3"></a-box>
representa esta forma entidad-componente:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> defecto la propiedad geometry.primitive to box . Y la primitiva asigna el atributo de width HTML a la propiedad geometry.width subyacente, así como el atributo de color HTML a la propiedad material.color subyacente.
Registro de un primitivo
Podemos registrar nuestras propias primitivas (es decir, registrar un elemento) utilizando AFRAME.registerPrimitive(name, definition) . definition es un objeto de JavaScript que define estas propiedades:
| Propiedad | Descripción |
|---|---|
| defectoComponentes | Objeto que especifica los componentes por defecto de la primitiva. Las claves son los nombres de los componentes y los valores son los datos predeterminados de los componentes. |
| mapeos | Objeto que especifica la asignación entre el nombre de atributo HTML y los nombres de propiedad del componente. Siempre que se actualice el nombre del atributo HTML, la primitiva actualizará la propiedad del componente correspondiente. La propiedad del componente se define mediante una sintaxis de puntos ${componentName}.${propertyName} . |
Por ejemplo, a continuación se muestra el registro de A-Frame para 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'
}
}));
Que podemos usar entonces
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
representa esta forma entidad-componente:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>