/aframe-ui-widgets

UI widgets for A-Frame.

Primary LanguageJavaScriptMIT LicenseMIT

UI widgets for A-Frame.

Give it a whirl!

A-Frame UI Widgets

Works with HTC VIVE and Oculus touch in a WebVR enabled browser and desktop with aframe-mouse-cursor-component.

Basic usage

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

  <!-- Include component script into your project along with A-Frame. -->
  <script src="https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/aframe-ui-widgets.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- Adds hand controls -->
    <a-entity hand-controls="left"></a-entity>
    <a-entity hand-controls="right"></a-entity>

    <!-- Can also be controlled used with cursor -->
    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Adds UI button widget -->
    <a-entity id="mybutton" ui-button></a-entity>
  </a-scene>
  <script>
  var mybutton = document.querySelector('#mybutton');
  mybutton.addEventListener('pressed', function () {
    // do stuff here.
  });
  </script>
</body>

Skinnable with custom styles

Using mixins, you can define a UI component styles.

<a-assets>
  <a-mixin id="beveled-square" geometry="primitive: cone; radiusTop: 0.15; radiusBottom: 0.19; height: 0.02; segmentsRadial: 4; segmentsHeight: 1" rotation="0 45 0"></a-mixin>
  <a-mixin id="square" geometry="primitive: box; width: 0.18; height: 0.025; depth: 0.18;" position="0 0.02 0"></a-mixin>
  <a-mixin id="blue" material="color: #1E2768;"></a-mixin>
  <a-mixin id="darkgreen" material="color: #22FF90;"></a-mixin>
  <a-mixin id="yellow" material="color: #FFF88E;"></a-mixin>
  <a-mixin id="offset" position="0 0.01 0"></a-mixin>
</a-assets>

<a-entity id="button" ui-button="base: beveled-square, blue; top: square, darkgreen; pressed: yellow, offset"></a-entity>

UI Components

Button

<a-entity ui-button></a-entity>
Properties
Property Description Default Value
base mixins to use for button base.
top mixins to use for button top.
pressed mixins to use for when button is pressed (added to top).
color default button color #960960
pressedColor default button-pressed color #FC2907
baseColor default button-base color #618EFF
topY default button top height 0.02
pressedY default button pressed height 0.012
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');