Documenting a quick short tutorial on how to add this library to your project and make something pick-upabble

1. add libraries:

    <script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.1.1/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>

1. add physics: add the physics component to your scene note: trying physics="gravity: 0" can sometimes help with debugging some issues, try at your own risk.

`<a-scene physics>`

1. add mixins add these mixins within your <a-assets>

        <a-mixin id="all-interactions"
                 hoverable grabbable stretchable draggable
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 dynamic-body
        ></a-mixin>

        <a-mixin id="grab-move"
                 hoverable grabbable draggable
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 dynamic-body="shape: box; sphereRadius: 0.1"
        ></a-mixin>
        
        <a-mixin id="physics-hands"
                 physics-collider phase-shift
                 collision-filter="collisionForces: false"
                 static-body="shape: sphere; sphereRadius: 0.02"
                 super-hands="colliderEvent: collisions;
                              colliderEventProperty: els;
                              colliderEndEvent: collisions;
                              colliderEndEventProperty: clearedEls;"
        ></a-mixin>

3.5 make it efficient add the following component to your project:

      AFRAME.registerComponent('phase-shift', {
       init: function () {
         var el = this.el
         el.addEventListener('gripdown', function () {
           el.setAttribute('collision-filter', {collisionForces: true})
         })
         el.addEventListener('gripup', function () {
           el.setAttribute('collision-filter', {collisionForces: false})
         })
       }
     });

1. give hands the ability to grab add the physics-hands mixin to your hand entities

        <a-entity id="rhand" mixin="physics-hands"
                hand-controls="hand: right">
      </a-entity>
      <a-entity id="lhand" mixin="physics-hands"
                hand-controls="hand: left">
      </a-entity>

1. make a floor things won’t fall through add static-body component to your ground and whatever surfaces you want to be able to put things on

<a-box static-body width="100" height="0.01" depth="100" visible="false"></a-box>
<!-- if you already have a ground, you should just be able to add static-body to it -->

1. make your thing able to be picked up add the mixin ‘all-interactions’ or ‘grab-move’

      <a-entity class="cube" mixin="cube all-interactions" position="0 0.265 -1" material="color: red"></a-entity>

Might be good to have this somewhere as a helpful starting point. From here, people can start modifying. This is basically what I extrapolated from the working demo I found.

[kylebakerio]

Nice. I imagine using networked-aframe will come up soon, so I’ll probably hear from you again soon. 😉

[rchovatiya88]

Thank so much @kylebakerio and @wmurphyrd - i can confirm this works really well I also documented in the ReadMe of my demo project- https://github.com/rchovatiya88/chessvr