0

I was testing some coding techniques in three.js, in which I have basic knowledge of, but I had an issue when trying to move forward with a project. I am trying to figure out how to detect collision in first person(keypresses move the camera).

I have a player variable defined as:

var player = { height:1.8, speed:0.1, turnSpeed:Math.PI*0.01 };

and movement within a keypress event as:

if(keyboard[87]){ // W key
    camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[83]){ // S key
    camera.position.x += Math.sin(camera.rotation.y) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[65]){ // A key
    // Redirect motion by 90 degrees
    camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;
}
if(keyboard[68]){ // D key
    camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
}

I then have a crate loaded as so(with a texture, bump, and normal map loaded):

crate = new THREE.Mesh(
    new THREE.BoxGeometry(3,3,3),
    new THREE.MeshPhongMaterial({
       color: 0xffffff,
       map: crateTexture,
       bumpMap: crateBumpMap,
       normalMap: crateNormalMap,           
        })
);

Everything in the program works fine, I just want to know how to detect collision of the camera with a wall. I don't want to have to go to set parameters like:

if(keyboard[68] && !(camera.position.x < crate.position.x + 1.5) && !(camera.position.x > crate.position.x - 1.5) && !(camera.position.z < crate.position.z -1.5) && !(camera.position.z > crate.position.z -1.5)) { // D key
    camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
}

Could some give me a way of detecting collision between an object such as this crate(a boxGeometry) and even other shapes?

Edit: I believe I found a way of manually detecting collision with the camera and a boxGeometry, but so far only on one face and with one movement of direction. This code below detects the right face upon load, when moving forward.

if(camera.position.z > crate.position.z - 1.650 && camera.position.z < 
crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && 
camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 ) canMoveForward = false;
if(!(camera.position.z > crate.position.z - 1.650 && camera.position.z < 
crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && 
camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 )) canMoveForward = true;  

Then I implemented a detection system in the keypress event which allows a 'wall slide' mechanic, in which if I walk forward at an angle, it will keep me from going inside the crate but will move me dependent on my rotation. Here is that code:

if(keyboard[87] ){ // W key
   if(camera.position.z > crate.position.z - 1.650 && camera.position.z < crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 ) {
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
    } else if(canMoveForward == true) {
    camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
}
}

I think after testing, I may find some easier/more general way to implement if statements that detect this collision. But then there is the issue of which way I am moving, which has also become a problem. I have mapped out and how much rotation must be checked for on the single side I have inputted collision on.

I will gladly appreciate input if there is an easier/simpler way of detecting this type of collision. Here's my project so far so you can understand more of the situation.

1 Answer 1

0

How to detect collision in three.js?

If you go to the link the question was closed but they still cover the general ideas of 3d collisions.

3
  • I have seen this page. However, it does not answer my question because the answer would detect collision between two shapes using Rays, but I am asking to find collision between the camera and an object.
    – Malmadork
    Commented Nov 29, 2018 at 13:39
  • Outside of that I haven't seen anything about three.js having colliders. Have you tried looking for another library to use with three.js
    – Joseph
    Commented Nov 29, 2018 at 14:00
  • chandlerprall.github.com/Physijs Try looking here and see if this is closer to what you need
    – Joseph
    Commented Nov 29, 2018 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.