aframe-event-set-component

An A-Frame component to register event listeners that set properties.

Properties

The event set component can register multiple event handlers that set multiple properties. Use double-underscores (__<EVENT_NAME>) to namespace individual instances of the component. Alternatively, pass the event name via _event.

<a-entity event-set__click="material.color: red; scale: 2 2 2,
          event-set__mouseenter="material.color: blue"
          event-set__1="_event: mouseleave; material.color: red">

Property	Description	Default Value
_delay	Delay before setting (ms).	''
_event	Event name.	''
_target	Query selector if setting property on another entity.	''

_event and _target are prefixed with underscores to avoid name collisions if case another component has event or target properties. Any key-value property pairs provided beyond _event and _target will be what is set once the event is emitted. Remember you can also specify an event name in the HTML attribute in event-set__<EVENT_NAME>.

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-box color="green"
           event-set__click="material.color: red; scale: 2 2 2"
           event-set__mouseenter="material.color: blue"></a-box>
    <a-camera><a-cursor></a-cursor></a-camera>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-event-set-component

Then register and use.

require('aframe');
require('aframe-event-set-component');

aframe-event-set-component