javascriptthree.jspointerlock

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 );
var rotation = new THREE.Euler( 0, 0, 0, "XYZ" );
var cameraDirection = new THREE.Vector3(this.game.usermodel.root.children[0].position.x, this.game.usermodel.root.children[0].rotation._x, this.game.usermodel.root.children[0].position.z);
cameraDirection.copy( direction ).applyEuler( this.game.user.rotation );

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

But my code doesn't take the y-axis into account. The line below holds the pitch rotation:

this.game.usermodel.root.children[0].rotation._x

How can I apply this value so I can shoot along the y-axis (vertically into any direction) as well? Currently the bullet is going along a straight line.

Thanks in advance for your assistance.

Solution

  • 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.