Grabbing an entity doesn't work with Vive controllers if nested inside an <a-entity>

Hi wmurphyrd! Thank you very much for this super component and super powerful repository. The time it’s saving us is beyond comprehension.

This is my current setup:

 <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
  <script src="./build/client/aframe-particle-system-component.min.js"></script>
  <script src="./build/client/tempjs/threejs/SPE.js"></script>
  <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
  <!-- Physics System -->
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/super-hands@2.1.0/dist/super-hands.min.js"></script>

  <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>

I’ve been banging my head for this problem for almost 2 days, and finally found the problem (Or where it’s happening). Whenever I nest an element with the grabbed component it stops working. I can move it around with the cursor, but no luck with the Vive controllers.

Example (Something quick and dirty):

This works:

 <a-scene>
 <a-sphere hoverable grabbable stretchable draggable dropppable 
          material="color: #e53935;" position="0 1 0" 
          radius="0.125" id="js-electron" particle-charge="electron"></a-sphere>
 </a-scene>
 

This doesn’t work:

 <a-scene>
 <a-entity>
 <a-sphere hoverable grabbable stretchable draggable dropppable 
          material="color: #e53935;" position="0 1 0" 
          radius="0.125" id="js-electron" particle-charge="electron"></a-sphere>
 </a-entity>
 </a-scene>

I even tried this:

 <a-scene>
 <a-entity hoverable grabbable stretchable draggable dropppable>
 <a-sphere hoverable grabbable stretchable draggable dropppable 
          material="color: #e53935;" position="0 1 0" 
          radius="0.125" id="js-electron" particle-charge="electron"></a-sphere>
 </a-entity>
 </a-scene>

Where do you think the problem is lying?

Again, thanks a lot for everything!

[wmurphyrd]

So, the sphere-collider isn’t checking for collisions on the entity you want to pick up.

Try giving it a selector for the entities you want to interact with using the objects property of progressive-controls. This will also improve performance as you can see from above the collider is doing a lot of math to check collisions with everything in that list instead of just the interactable stuff

<a-entity progressive-controls="objects: [grabbable], [hoverable]"></a-entity>

This will target any entities which have grabbable or hoverable components. You can use any CSS selector so you could give the entities a class and select by that instead.

Also note: sphere-collider requires that the entity you want to target has a mesh (e.g. geometry or a model) in order to calculate the bounding sphere.

[superjose]

@wmurphyrd I know this is closed. Just to let you know that I created the question here: https://stackoverflow.com/questions/47544726/non-overlappable-sphere-with-super-hands-and-aframe-physics-system-using-a-frame

Thank you very much for the badass component and great support 😊