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.

Malmadork
  • 237
  • 4
  • 13

1 Answers1

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.

Joseph
  • 16
  • 8
  • 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 Nov 29 '18 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 Nov 29 '18 at 14:00
  • http://chandlerprall.github.com/Physijs/ Try looking here and see if this is closer to what you need – Joseph Nov 29 '18 at 16:52