A-Frame Super Hands Component

This is the examples page for the super-hands A-Frame component package for super-easy hand controller interactivity in A-Frame WebVR experiences.

Hand controls with physics

Example of super-hands interactivity with roomscale tracked controllers and aframe-physics-system. Also showcases creating a simple custom reaction component.

    AFRAME.registerComponent('color-randomizer', {
      play: function() {
        this.el.addEventListener('drag-drop', function(evt) {
          evt.detail.dropped.setAttribute('material', 'color',
            '#'+(Math.random()*0xFFFFFF<<0).toString(16))
           // notify super-hands that the gesture was accepted
          evt.preventDefault()
        })
      }
    })
    

Credit for random color generator code: Mohsen via StackOverflow

Gaze and laser pointer controls without physics

Laser pointer setup for 3DOF controllers

Mouse cursor based version for desktop

super-hands can also be use with other types of input including 3DOF controllers, mouse, and touch. In these cases, a raycasting can be used intead of collision detection. The confugration below works with the A-Frame raycaster component.

super-hands="colliderEvent: raycaster-intersection;
             colliderEventProperty: els;
             colliderEndEvent: raycaster-intersection-cleared;
             colliderEndEventProperty: clearedEls"

This scene also shows the fallback movement that occurs when physics is not available.

Sticky Grab via Custom Button Mapping

Example of customizing the button event schema options