Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including aframe-event-set-component with all npm packages installed. Try it out:

var aframeEventSetComponent = require("aframe-event-set-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-event-set-component v5.0.0

Set properties in response to events in A-Frame

aframe-event-set-component

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

Remix an example on Glitch

Try the example on Glitch

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">
PropertyDescriptionDefault Value
_delayDelay before setting (ms).''
_eventEvent name.''
_targetQuery 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');
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free