How in three.js to make it so that it does not go through objects on the stage?

Question

three.js

Hello everyone
There is something based on the example of this section
https://threejs.org/examples/#misc_controls_pointerlock
here you can walk in the first person, but how to make it so that it stumbles upon these cubes and it was not possible for the camera to go through them, and on the edges of the floor mesh so that the object camera stops, can anyone help?

Answer 1

Because the geometry of objects is simple and understandable - cubes - then I would just analyze the coordinates. Namely, after completing the next step in line 375, I would add

if ( checkCollision() )	{
  controls.getObject().translateX( -velocity.x * delta );
  controls.getObject().translateY( -velocity.y * delta );
  controls.getObject().translateZ( -velocity.z * delta );
}

those. if a collision is detected, a step back would be rolled back. Collision detection function:

function checkCollision()	{
  var collision = false;
  for ( boх in objects )	{  //  Перебираем все кубики.
    // Если оказались ближе 10 к центру кубика, значит мы оказались у него внутри, т.к. кубы там размером 20х20.
    collision |= ( 
      ( Math.abs( box.postion.x - controls.getObject().position.x) < 10 ) &
      ( Math.abs( box.postion.y - controls.getObject().position.y) < 10 ) &
      ( Math.abs( box.postion.z - controls.getObject().position.z) < 10 )
     );
  }
  return collision;	
}

Didn't check the code. With the detection of the boundaries of the world, about the same. I think you can do it.
If the objects are of an arbitrary but convex shape, then I would cast two rays (raycast) in diametrically opposite directions from the point of the first person. Then he analyzed the objects that they crossed. If the same object crossed both beams, then we ended up inside it.
With non-convex bodies it is more difficult, I don’t want to think.