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 below:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://threejs.org/examples/js/deprecated/Geometry.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.js"></script>
<script src="https://n5ro.github.io/aframe-physics-system/dist/aframe-physics-system.js"></script>
<script>
AFRAME.registerComponent('foo', {
init: function() {
this.el.addEventListener('collide', function(e) {
console.log('Player has collided with ', e.detail.body.el);
});
}
})
</script>
<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-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>
</a-scene>
If the shapes are simple consider using a box collider or a sphere collider. There is a simple example in this SO answer.
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>
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?
are the bodies complex models ? does collision meshes show up on debug mode, or are you bouncing off ‘nothing’ ?
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.
@RodrigoDeAlmeidaSiqueira I’ve added a snippet.
