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

Mouse cursor based version for desktop

• Grabbed boxes lock position and rotation to controller
• color-randomizer changes the color of entities dropped inside of the color changer box
• Boxes can be stretched with two hands to change size, updating their physics bodies

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

Mouse cursor based version for desktop

• Grabbed entities move by controller position and rotation
• Drag-drop targets and their hovering entity appear in wireframe
• Entities change to spheres upon completing drag-drop interaction via the event-set component listening for the 'drag-drop' event

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.

Quick guide to adding making something grabbable with physics on your site