CODEWITHSUNDEEP
javascripthtmldom-events
Crocsx
Crocsx

Reputation: 73

Move the mouse infinitely

I'm trying to do a game with Babylon, and I have a little problem with the camera.

Basically, I want (like in all FPS) the camera to be infinitely moving and not stopping when the mouse reaches the edge of the page. I tried something like this:

window.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
window.mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
if(mouse.x>0 || mouse.x<0){
    scene.cameras[0].rotation = scene.cameras[0].rotation.add( new BABYLON.Vector3(0,(mouse.x)/100,0));
    window.mouse.x = 0;
}
else if(mouse.y>0 || mouse.y<0){
    scene.cameras[0].rotation = scene.cameras[0].rotation.add( new BABYLON.Vector3(0,(mouse.y)/100,0));
    window.mouse.y = 0;
}

But it doesn't work well. Because the cursor still on the left side or the right one.

My question is:

Is it possible to fix the cursor on the center of the page, and just get the mouse movement, so I just have to care about this movement?

Upvotes: 3

Views: 1866

Answers (1)

Kos
Kos

Reputation: 72241

You aren't able to move my cursor (imagine how annoying would it make the internet :)) but for games you should be able to leverage the full-screen mode. Note that it's (still) experimental at this stage.

Pointer lock (formerly called mouse lock) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.

This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.

Upvotes: 7

Related Questions