0
votes

I am trying to detect a collision event between a dynamic body and a static body and using Don Mccurdy's physics system.

The "collide" event is getting successfully invoked on collision but the subsequent function fails with the error "cannot read property 'body' of undefined for e"

My HTML source

 <div ng-app="webVrApp">
   <div ng-controller="trying">

    <a-scene physics="debug: true">

      <a-entity id='ball' position="0 1 -4" material="color:green;" 
       geometry="primitive:sphere; radius: 0.5;" dynamic-body></a-entity>
      <a-plane color='red' static-body rotation="-90 0 0" width="100" 
         height="100"></a-plane>    
      <a-entity camera look-controls position="0 1.5 0">
            <a-cursor></a-cursor>
            <a-entity position="0 0 -3" id="weapon" static-body>
                <a-box color='blue' width='0.25' height='0.5' depth='3' static- 
                body></a-box>
            </a-entity>
      </a-entity>    
    </a-scene>
      </div>
    </div>

and the controller code

app.controller('trying', ['$scope', function($scope){

    var $ = function (sel){document.querySelector(sel)};    
      document.querySelector('#weapon').addEventListener('collide', function(e)     {
        const ball = $("#ball");        
      if(e.detail.body.id === ball.body.id) { //error comes for this line unknown 'body'
            alert("collision happened");
        };
    });
}]);

Here is a codepen for this - codepen

Please help.

1
As far as I can tell from my research so far, body details of the colliding object are not available when I run it from angular controller but it seems to work fine when I use this code in a custom aframe component. @donmccurdyNiraj

1 Answers

0
votes

I'm using aframe-aabb-collider-component to detect colision between two objects, try it. https://www.npmjs.com/package/aframe-aabb-collider-component