ArcRotateCamera Mouse Direction Change

Questions
1

Is there a way with ArcRotateCamera to make it so if the mouse is on the top half of the canvas moving the mouse left/right rotates the camera in one direction but if it’s on the bottom half it rotates the camera in the other directions?

3

Yep. Let me get a demo for you real quick!

4

Alright @ambidexterich I’m back! (This was fun to implement)

https://playground.babylonjs.com/#SRZRWV#685

Here is the demo where if your mouse is on the top have it will rotate left/right in one way and if it’s the bottom half if will rotate left and right in the opposite way.

Let’s walk through how we did this! :blush:

First thing to do disable this. (line 15)
//camera.attachControl(canvas, true);
Since we are going to be writing our own input instead. For an ArcRotateCamera, to change the left and right direction we are going to be changing the alpha value. :smiley:

Next we are going to have some onPointerObservable(s) for our mouse input. We will need one for BABYLON.PointerEventTypes.POINTERDOWN, one for POINTERUP, and one for POINTERMOVE.

For the down we will just store the initial x/y position of the mouse using scene.pointerX and scene.pointerY .For the up we will just set that to null. (lines 61-70)

Now for the move part: (line 72-83)

        scene.onPointerObservable.add( (evt) => {
            if(posX != null) {
                const diff = scene.pointerX - posX;
                posX = scene.pointerX;

                if(posY > (window.innerHeight/ 2) ) {
                camera.alpha += diff / turnFactor;
                } else {
                camera.alpha -= diff / turnFactor;
                }
            }
        }, BABYLON.PointerEventTypes.POINTERMOVE);

Here we are getting the difference between the current mouse x position and the previous one. That difference we are going to add to our alpha value. However if our mouse y position is on the bottom half of the canvas (aka < window.innerHeight/ 2) we will subtract this value instead.

And there we have it! Hope this was helpful and let me know if you have any questions about this at all :slight_smile:

5 Likes
5

Thanks for the response!

1 Like