aframe Components A-Frame's component schema property types


Example

Property types primarily define how the schema parses incoming data from the DOM for each property. The parsed data will then be available via the data property on the component's prototype. Below are A-Frame's built-in property types:

Property TypeDescriptionDefault Value
arrayParses comma-separated values to array (i.e., "1, 2, 3" to ['1', '2', '3']).[]
assetFor URLs pointing to general assets. Can parse URL out of a string in the form of url(<url>). If the value is an element ID selector (e.g., #texture), this property type will call getElementById and getAttribute('src') to return a URL. The asset property type may or may not change to handle XHRs or return MediaElements directly (e.g., <img> elements).''
audioSame parsing as the asset property type. Will possibly be used by the A-Frame Inspector to present audio assets.''
booleanParses string to boolean (i.e., "false" to false, everything else truthy).false
colorCurrently doesn't do any parsing. Primarily used by the A-Frame Inspector to present a color picker. Also, it is required to use color type for color animations to work.#FFF
intCalls parseInt (e.g., "124.5" to 124).0
mapSame parsing as the asset property type. Will possibly be used bt the A-Frame Inspector to present texture assets.''
modelSame parsing as the asset property type. Will possibly be used bt the A-Frame Inspector to present model assets.''
numberCalls parseFloat (e.g., '124.5' to '124.5').0
selectorCalls querySelector (e.g., "#box" to <a-entity id="box">).null
selectorAllCalls querySelectorAll and converts NodeList to Array (e.g., ".boxes" to [<a-entity class="boxes", ...]),null
stringDoesn't do any parsing.''
vec2Parses two numbers into an {x, y} object (e.g., 1 -2 to {x: 1, y: -2}.{x: 0, y: 0}
vec3Parses three numbers into an {x, y, z} object (e.g., 1 -2 3 to {x: 1, y: -2, z: 3}.{x: 0, y: 0, z: 0}
vec4Parses four numbers into an {x, y, z, w} object (e.g., 1 -2 3 -4.5 to {x: 1, y: -2, z: 3, w: -4.5}.{x: 0, y: 0, z: 0, w: 0}
Property Type Inference

The schema will try to infer a property type given only a default value:

schema: {default: 10}  // type: "number"
schema: {default: "foo"}  // type: "string"
schema: {default: [1, 2, 3]}  // type: "array"

The schema will set a default value if not provided, given the property type:

schema: {type: 'number'}  // default: 0
schema: {type: 'string'}  // default: ''
schema: {type: 'vec3'}  // default: {x: 0, y: 0, z: 0}
Custom Property Type

We can also define our own property type or parser by providing a parse function in place of a type:

schema: {
  // Parse slash-delimited string to an array 
  // (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
  myProperty: {
    default: [],
    parse: function (value) {
      return value.split('/');
    }
  }
}