How to limit camera rotate from drag?

Questions
1

Try to chatting app using babylon Js
I want to limit camera rotation to give feel people talk at front
So I try to limit rotation by those code

at first I put this code in the onSceneReady part

var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
const canvas = scene.getEngine().getRenderingCanvas();
camera.panningSensibility = 15;
camera.lowerRadiusLimit = 200;
camera.upperRadiusLimit = 800;
camera.lowerAlphaLimit = 0;
camera.upperAlphaLimit = Math.PI / 18;
camera.lowerBetaLimit = Math.PI / 3;
camera.upperBetaLimit = Math.PI / 3;

//camera.panningAxis = new BABYLON.Vector3(1, 1, 0);

camera.useAutoRotationBehavior = true;
camera.autoRotationBehavior.idleRotationSpeed = -.1;

scene.onBeforeCameraRenderObservable.add((camera) => {
if (camera.alpha >= camera.upperAlphaLimit
|| camera.alpha <= camera.lowerAlphaLimit) {
camera.autoRotationBehavior.idleRotationSpeed *= -1;
}
});

// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

and also add limitation onReder

const onRender = (scene) => {
let camera = scene.getCameraByName("camera");
if (camera.radius > 70) camera.radius = 20; if (camera.radius < 5) camera.radius = 5

but camera still rotate freely when I dragging

the source code is here

how to I limit ? as like people head ?

2

If the camera alpha is 0 looking straight ahead
try to this

camera.lowerAlphaLimit = Math.PI / 2;
camera.upperAlphaLimit = Math.PI / 2;

will have a radius of 180 degrees from the frontal reference

and this

camera.lowerRadiusLimit = 200;
camera.upperRadiusLimit = 800;

The meaning of this is literally a limit, so the
You shouldn’t try to apply a radius beyond that number in your render, so the
look at the limit in your code

camera.lowerRadiusLimit = 5;
camera.upperRadiusLimit = 20;

And we don’t need to put this in the render, remove it
That’s it.

3

Thanks it worked :slight_smile: :blush:

1 Like