Three.js Pointerlockcontrols shooting along y-axis

Question

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.

score 1 · Answer 1 · answered Mar 28 '15 at 01:52

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

answered Mar 28 '15 at 01:52

WestLangley

102,557
10
276
276

thanks for your help westlangley. I couldn't get your approach to work, probably because the controls are a child of a child and are not updated (I think). I'm still a bit of a noob and I know I sometimes don't implement things the right way. I came up with a workaround which works. I will post this as an answer. – Maarten Hartman Mar 28 '15 at 14:01
Did you do this: `scene.add( controls.getObject() );` ? – WestLangley Mar 28 '15 at 16:00
right now I do it like this `controls = new THREE.PointerLockControls(this.game.camera.object); new_user.root.add(controls.getObject());` is your suggestion still required then? – Maarten Hartman Mar 29 '15 at 13:33
If you want to do something different than I am suggesting, that is your business. But if you choose to do so, it is difficult for me to help you. – WestLangley Mar 29 '15 at 14:51
I don't mean it like that, I appreciate your help :) do I still need to add the controls.getObject() to the scene if the controls are already added like new_user.root.add(controls.getObject()) ? – Maarten Hartman Mar 29 '15 at 14:54
I do not know what `new_user.root` is because I am not familiar with your code. `controls.getObject()` must be in the scene graph. – WestLangley Mar 29 '15 at 18:57

Maarten Hartman · Accepted Answer · 2015-03-28T14:12:53.373

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.

Three.js Pointerlockcontrols shooting along y-axis

2 Answers2

Linked