I am currently working on a project using Three.js with PointerLockControls. My goal is to implement collision detection for the player in order to enhance the overall experience. To achieve this, I have created a new Physijs cylinder object and passed it along with the camera to PointerLockControls:
var player = new Physijs.CylinderMesh( new THREE.CylinderGeometry( 2, 2, 10, 32) , playerMaterial );
player.position.set(0, 5, 0);
player.addEventListener( 'collision', handleCollision );
scene.add(player);
controls = new PointerLockControls( camera, player );
Within PointerLockControls, I then attach the outer object (yaw rotation handler) to the player object and proceed to move the player object within the virtual world.
velocity.x -= velocity.x * 10 * dt;
velocity.z -= velocity.z * 10 * dt;
velocity.y -= 9.8 * 20 * dt;
if (moveForward) velocity.z -= 180 * dt;
if (moveBackward) velocity.z += 180 * dt;
if (moveLeft) velocity.x -= 180 * dt;
if (moveRight) velocity.x += 180 * dt
player.translateX( velocity.x * dt );
player.translateY( velocity.y * dt );
player.translateZ( velocity.z * dt);
After testing, I discovered that both the player object and the camera tend to phase through the floor, or simply vibrate in a jerky manner when attempting to move them without proper collision detection. This issue has left me questioning my approach. Could it be that by attaching the yawObject to the player object, I may not be utilizing an effective method for handling collision detection?