Collision with A-Frame objects using JavaScript physics library

Question

So, I have been stumped on this for a while now. I need to be able to have my camera entity collide with shape entities within an A-frame scene stopping the camera from going through them. Essentially I want to create walls using the A-Frame physics engine that can be found here:

https://github.com/donmccurdy/aframe-physics-system

I have searched all over and am unable to find a simple example of how to obtain this function! I have already spent far too much time looking around online.

I have created a simple scene in A-Frame with the basics of Don's physics engine already included. I created this in order to try to test out a single walls function before adding it to my far more complex scene I am working on.

Any help with this would be greatly appreciated!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
    <title>Aframe Physics Demo</title>
</head>

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

        <a-entity id="camera" position="0 1.6 0">
            <!-- Camera Entity -->
            <a-entity id="camera" acceleration="200w" camera look-controls wasd-controls></a-entity>
        </a-entity>

        <a-box static-body position="0 0 -3" color="#4CC3D9" width="8" height="5" depth="0.5"></a-box>

        <a-plane static-body rotation="-90 0 0" position="0 0 -4" width="10" height="10" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>

</html>

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2020-03-04T10:09:47

If you want to use the physics engine to detect collisions with the camera - it needs to be a part of the physics engine. It can't be a static-body because it needs to move around, and it can't be a dynamic-body for it needs to be controlled by the player, and not fall down (gravity) and spin around.

Don McCurdy created a kinematic-body component having the camera / player in mind. It is available as part of the physics extras

So having a camera:

<a-entity camera kinematic-body></a-entity>

You can detect any objects it collides with:

// inside an a-frame component - this is straight from the docs
this.el.addEventListener('collide', function(e) {
   console.log('Player has collided with ', e.detail.body.el);
   e.detail.target.el; // Original entity (camera).
   e.detail.body.el; // Other entity, which the camera touched.
   e.detail.contact; // Stats about the collision (CANNON.ContactEquation).
   e.detail.contact.ni; // Normal (direction) of the collision (CANNON.Vec3).
});

Check it out in this fiddle.

If the shapes are simple consider using a box collider or a sphere collider. There is a simple example in this SO answer.

Collision with A-Frame objects using JavaScript physics library

1 Answers