aframe-event-set-component
v5.0.0
Published
Set properties in response to events in A-Frame
Downloads
6,578
Readme
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/[email protected]/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-componentThen register and use.
require('aframe');
require('aframe-event-set-component');