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.