Solution 1 :

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);; // Original entity (camera).
   e.detail.body.el; // Other entity, which the camera touched.; // Stats about the collision (CANNON.ContactEquation).; // Normal (direction) of the collision (CANNON.Vec3).

Check it out below:

<script src=""></script>
<script src=""></script>
<script src="[email protected]/dist/aframe-extras.js"></script>
<script src=""></script>

  AFRAME.registerComponent('foo', {
    init: function() {
      this.el.addEventListener('collide', function(e) {
        console.log('Player has collided with ', e.detail.body.el);
<a-scene physics="debug: true">
  <a-entity id="rig" movement-controls kinematic-body foo>
    <a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
  <a-box static-body position="0 0 -3" color="#4CC3D9" width="8" height="5" depth="0.5"></a-box>
  <a-sphere dynamic-body position="0 1 -2" color="#4CC3D9"></a-sphere>
  <a-box scale="20 0.01 20" static-body></a-box>

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

Problem :

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:

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">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=""></script>
    <script src="//"></script>
    <title>Aframe Physics Demo</title>

    <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-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>



Comment posted by EM_Dev

Thanks for the prompt reply. It seems that whenever I add a new static-body to my more complex scene, I am getting “ghost collisions” and running into invisible objects. these invisible objects change location as I change the camera start location. Any idea what may be happening happening?

Comment posted by Piotr Adam Milewski

are the bodies complex models ? does collision meshes show up on debug mode, or are you bouncing off ‘nothing’ ?

Comment posted by EM_Dev

It seemed to be a problem with nesting the camera entity within a position entity. Collision works properly when I remove the outer entity the camera is nested within, however the y-axis position will not stay at 1.6 and falls to the static plane position once the camera entity is no longer nested. Weird issues I am having.

Comment posted by like here

Is having a rig with

Comment posted by Piotr Adam Milewski

@RodrigoDeAlmeidaSiqueira I’ve added a snippet.