Non-overlappable sphere with super-hands and aframe-physics-system using A-Frame

Question

I'm trying to recreate an electrical particle (Electrons, Neutrons, Protons) in A-Frame (Science). I'm using <a-sphere> to represent a charged particle, and I'm using super-hands to move it around. I created a custom component that attracts or repel according to charges (Refresher: Opposite charges attract; similar charges repel).

Each sphere is floating (position="0 1 0"), and the user shall grab it and move it close to another sphere to see the attraction or repulsion effect.

So far, the attraction and repelling are working. My only caveat is that the <a-sphere> overlaps whenever I drag it with super-hands to another a-sphere. I know this is the default behavior of all the elements. I've been trying to use aframe-physics-system to prevent elements from overlapping.

Since I need the a-sphereto hover, I add the static-body to them (I've noticed that this doesn't prevent overlapping). Whenever I try to grab them using the HTC Vive controller, it seems that the controller has some sort of collider that interacts with the static-body, pushing it around. If I manage to grab it, it starts spinning the sphere out of control (Probably because it's interacting with the Vive Controller), and it launches it away (Pretty funny, to be honest ????).

I also tried setting the gravity to zero, but this poses a problem: it affects the whole scene (Can't have normal physics afterwards). In addition, whenever the sphere gets hit by another body, it will move indefinitely to the direction the force was applied to.

When I look at the examples from: https://wmurphyrd.github.io/aframe-super-hands-component/examples/physics/

I see that William uses dynamic-body. Unfortunately, that puts them into the ground.

Any ideas on how to tackle this problem? I just want to make the sphere non-overlappable and that the user is allowed to throw it while it's hovering.

Here's the code:

<a-entity progressive-control="objects: [grabbable], [hoverable]">
          <a-entity id="rhand" class="right-controller"></a-entity>
          <a-entity id="lhand" class="left-controller"></a-entity>
 </a-entity>

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

   <a-sphere hoverable grabbable stretchable draggable dropppable  static-body
   material="color: #1976d2;" position="0.5 1 0" 
   radius="0.125" id="js-proton" particle-charge="proton">
</a-sphere>

Here's the result:

W. Murphy W. Murphy · Accepted Answer · 2017-11-29T04:06:25

You can solve the problem of the controller's physics body colliding with things and making them near impossible to grab using collision-filter from aframe-physics-extras:

<a-entity progressive-control="objects: [grabbable], [hoverable]">
          <a-entity id="rhand" class="right-controller" collision-filter="collisionForces: false"></a-entity>
          <a-entity id="lhand" class="left-controller" collision-filter="collisionForces: false"></a-entity>
 </a-entity>

This makes it so the controller's bodies can ghost through other bodies without disturbing them while still allowing for grabbing.

However, I don't think you'll be able to get the complete behavior you want from static-body. It's intended for things like walls and floors that don't respond to physics forces, and the physics engine treats them differently because of this (for example, it never reacts to collisions between two static bodies which is why it doesn't prevent overlapping).

Take a look at sleepy from aframe-physics-extras in combination with zero gravity. It keeps bodies from floating away by applying a strong deceleration to all motion and rotation, but still lets them react to being tossed or colliding with other bodies. There is an example here.

Non-overlappable sphere with super-hands and aframe-physics-system using A-Frame

1 Answers