Btukfyl

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.

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.