aframewebvr

AFrame: Problem with physics; dynamic-body & grabbable


The problem:

I want to make a ball the user can throw. With my current implementation, physics work but I cannot lift the ball. However, if I delete the "dynamic-body" I can grab the ball exactly as I am supposed to, and move it around. Heck, I tried changing it to "static-body" and it still works. The problem seems to be whenever I mix grabbable and dynamic-body. I know it should be possible in an older version, as I was using this tutorial: https://www.youtube.com/watch?v=SKYfYd3pk4I

However, he is using progressive-controls which are not available in the newest super-hands package, I don't know if that changes anything. Is there anything I am doing wrong here?


Here are my snippits of code that could affect the result:

My A-Frame packages:

<head>
  <!-- A-Frame -->
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  
  <!-- A-Frame Components -->
  <!-- A-Frame Particle System -->
  <script src="https://unpkg.com/aframe-particle-system-component@1.0.9/dist/aframe-particle-system-component.min.js"></script>
  <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
 
  <!-- A-Frame Event System -->  
  <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script> 

  <!-- A-Frame Extras Add-Ons -->  
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  
  <!-- A-Frame Physics -->  
  <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
 
  <!-- A-Frame Physics Extra Add-On -->  
  <script src="https://unpkg.com/aframe-physics-extras@0.1.2/dist/aframe-physics-extras.min.js"></script>

  <!-- A-Frame Super Hands -->  
  <script src="https://unpkg.com/super-hands@3.0.0/dist/super-hands.min.js"></script> 
  
</head>

My problematic sphere:

<!-- Ball -->                            
              <a-entity 
                id="Ball-2" 
                position="0 0 0">
                <a-sphere 
                  id="Ball-2-collider"
                  grabbable
                  dynamic-body="mass: 0.2; linearDamping: 0.05; angularDamping: 0.3; shape: sphere; 
sphereRadius: 0.125;"
                  class="interactable ball"
                  radius="5"
                  position="0 0.6 3.8"
                  scale="0.02 0.02 0.02">
                  <a-entity
                    id="ball-2-mesh" 
                    position="0 -6 0"
                    rotation="0 0 0"
                    scale="600 600 600"
                    gltf-model="#Ball-glb"
                    color="#FFFFFF">
                  </a-entity>  
                </a-sphere>
              </a-entity> 

My controller-setup:

          <a-entity id="camera-rig" position="0 -1.20 4" rotation="0 150 0">
            <a-camera 
              user-height="1.6"
              active="true">     
              <a-entity 
                cursor="fuse: true; fuseTimeout: 1000" 
                raycaster="objects: .interactable"
                animation__fusing="property: scale; startEvents: fusing; easing: linear; dur: 1000; from: 1 1 1; to: 3 3 3"
                animation__leave="property: scale; startEvents: mouseleave; easing: linear; dur: 1; from: 1 1 1; to: 1 1 1"
                animation__click="property: scale; startEvents: click; easing: linear; dur: 150; from: 3 3 3; to: 1 1 1"
                position="0 0 -1"
                geometry="primitive: sphere; radius: 0.005"
                material="color: #FF00FF; shader: flat; opacity: 0.5">                
              </a-entity>         
            </a-camera>
            
            <a-entity sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: left"></a-entity>
            <a-entity sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: right"></a-entity>  
          </a-entity>    

And finally, the a-scene defining the gravity:

<a-scene embedded antialias="false" physics="gravity: -9.8; debug: true">

Solution

  • Thanks to this: https://github.com/bryik/aframe-ball-throw/blob/master/index.html

    I found the culprit. I needed to add the static-body to my hand-entities, so that collision could be detected. No idea why collision was detected without them before though.

    Modified code:

            <a-entity static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: left"></a-entity>
            <a-entity static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: right"></a-entity>