Three.js Pointerlockcontrols Shooting Along Y-axis

Currently I am developing a FPS with three.js and pointerlockcontrols. Using the code below I can shoot into any horizontal direction: var direction = new THREE.Vector3( 0, 0, -1 )

Solution 1:

If you are using PointerLockControls and you want to set a raycaster, you can use this pattern:

var direction = new THREE.Vector3();
var raycaster = new THREE.Raycaster(); // create once and reuse
...

controls.getDirection( direction );
raycater.set( controls.getObject().position, direction );

Do not set the camera position or rotation directly if you are using PointerLockControls.

three.js r.71

Solution 2:

Investigating this a bit more, I finally came up with a workaround myself. It might not be the perfect way to do this, but it works.

It now works like this: I'm getting the basic mesh rotation and apply the euler, I then add the pitch rotation. In this way I pass the horizontal and vertical rotation into the raycaster.

var direction = new THREE.Vector3( 0, 0, -1 );

direction.copy( direction ).applyEuler( this.game.user.rotation );
direction.y = this.game.usermodel.root.children[0].rotation._x;

var raycaster = new THREE.Raycaster(this.game.usermodel.root.children[0].position, direction);

Everyone is still welcome to comment on this or come up with a more elegant solution.