UI widgets for A-Frame.

Works with HTC VIVE and Oculus touch in a WebVR enabled browser.
Installation
Include component script into your project along with A-Frame.
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/ui-widgets.min.js"></script>
</head>
<a-scene>
<a-entity hand-controls="left"></a-entity>
<a-entity hand-controls="right"></a-entity>
<a-entity ui-button></a-entity>
</a-scene>
Usage
Button
<a-entity ui-button></a-entity>
Events
Event | Description |
---|
buttondown | Emitted when button is pushed down. |
buttonup | Emitted when button is released. |
pressed | Emitted when button has been has been pushed down and released. |
Toggle switch
<a-entity ui-toggle></a-entity>
Properties
Property | Description | Default Value |
---|
value | sets toggle position. | 0 |
Events
Event | Description |
---|
change | Emitted when switch has been toggled. |
Slider
<a-entity ui-slider></a-entity>
Properties
Property | Description |
---|
min | sets minimum value |
max | sets maximum value |
value | sets value |
Change
Event | Description |
---|
change | Emitted when slider has been moved. |
Rotary Knob
<a-entity ui-rotary></a-entity>
Events
Event | Description |
---|
change | Emitted when rotary has been turned. |
npm
Install via npm:
npm install aframe-ui-widgets
Then require and use.
require('aframe');
require('aframe-ui-widgets');