Block camera rotation up and down

Hi all
How can I make camera movement like the one below ?

This is my PG: Babylon.js Playground

Hey there! I absolutely LOVE this example demo I’m going to share for camera panning in 3D space. I love it so much that I have it pinned.

https://playground.babylonjs.com/#5QBZT0#9

Now keep in mind it doesn’t have the 3D environment but you can easily add that :wink:

So how does this work exactly. Let’s take a look!

First on mouse down we’re going to get the mouse position in screen space and unproject it onto the ground plane (lines 141-142)

let mouseVec = new BABYLON.Vector3(evt.offsetX, evt.offsetY, 0);
var current = unprojectToPlane(mouseVec, engine.getRenderWidth(), engine.getRenderHeight());

Then we take that position and calculate the deltas on mouse move. From there we move the camera.

var xzDiff = new BABYLON.Vector3(-diff.x, 0, -diff.z);
inertialPanningX = xzDiff.x * (1 - camera.inertia);
inertialPanningY = xzDiff.z * (1 - camera.inertia);

And there we have it. Nothing to it :joy:

1 Like

but I want when the pointer is pulled to the left or right the camera rotates

Hey!
This is really easy to achieve:

    const rotation = camera.rotation.x
    scene.onBeforeRenderObservable.add(() => {
        camera.rotation.x = rotation
    })

https://playground.babylonjs.com/#5GFFV7#1

Does this help?

4 Likes

@roland love this!

I made some modifications my original demo. Granted I’m still playing around with differentiating if the mouse is going to the left or right more vs up and down. But since the demo I originally posted is a ArcRotateCamera vs a FreeCamera I figured I post a solution for that camera type too.

https://playground.babylonjs.com/#5QBZT0#13

For a ArcRotateCamera we’re going to want to play with the alpha value. Take a look at line 155 where I’m taking the difference in the X mouse and applying it to camera alpha instead.

camera.alpha += diff.x * 0.001;

Still needs some working on but you have options now. :slight_smile:

3 Likes

cool @roland this is very helpful, thank you

1 Like

You are welcome! However have a look at @msDestiny14 's code as well. There are hidden gems you could use in the future and I’ve learned some tricks from her code. Thanks goes to @msDestiny14 as well! :blush:

3 Likes

Thanks also for @msDestiny14 you all are great, i learned a lot from you

3 Likes

So I know that there are a couple of great solutions here but I just wanted to provide an additional approach. Depending on how much you want to customize your camera’s movement, it might be better to either use Custom Camera Controls OR manually change the camera’s movements and rotation using scene.onPointerObservable:
Example:

// This will rotate the camera based on Left/Right movements and move forward/backward for Y movements
// This example works with FreeCamera, assuming there are no mouse controls attached
scene.onPointerObservable.add((eventData) => {
	// If, during a move event, the left mouse button is pressed, rotate camera by delta X
	if (eventData.event.buttons & 1 === 1) {
        // Sensibility/Precision of movements
        let angularSensibility = 4000;
        let panningSensibility = 1000;
		// Pointer Event
		let evt = eventData.event;
		// Delta movement of X from PointerEvent
		let offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
		let offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
		camera.cameraRotation.y += offsetX / angularSensibility;
		camera.cameraDirection.z -= offsetY / panningSensibility;
	}
// This function only occurs with pointermove events so that we can ensure 'dragging' is happening
}, BABYLON.PointerEventTypes.POINTERMOVE);
2 Likes