How to limit the camera panning

let width = app.renderer.domElement.width;
let height = app.renderer.domElement.height;
let panLimitX = width / 2;
let panLimitY = height / 2;
let movementX, movementY, offsetX, offsetY, prevX, prevY;
const pixelRatio = app.renderer.getPixelRatio();
const isMobileDevice = v3d.Detector.checkAndroid() || v3d.Detector.checkIOS();
const v3dCanvas = app.controls.domElement;
app.camera.setViewOffset(width, height, 0, 0, width, height);

window.addEventListener('resize', function() {
    width = app.renderer.domElement.width;
    height = app.renderer.domElement.height;
    panLimitX = width / 2;
    panLimitY = height / 2;
}, false);

if (isMobileDevice) {
    v3dCanvas.addEventListener('touchstart', function() {
        if (event.touches.length != 2)
            return;
        prevX = event.touches[0].pageX;
        prevY = event.touches[0].pageY;
    }, false);
    v3dCanvas.addEventListener('touchmove', setCamOffsetMobile,  false);
} else {
    v3dCanvas.addEventListener('mousemove', setCamOffsetDesktop,  false);
}

function setCamOffsetDesktop() {
    if (event.which < 2)
        return;
    setCamOffset(event.movementX, event.movementY);
}

function setCamOffsetMobile() {
    if (event.touches.length != 2)
        return;
    movementX = event.touches[0].pageX - prevX;
    movementY = event.touches[0].pageY - prevY;
    prevX = event.touches[0].pageX;
    prevY = event.touches[0].pageY;
    setCamOffset(movementX, movementY);
}

function setCamOffset(moveX, moveY) {
    offsetX = app.camera.view.offsetX - moveX * pixelRatio;
    offsetY = app.camera.view.offsetY - moveY * pixelRatio;
    offsetX = v3d.Math.clamp(offsetX, -panLimitX, panLimitX);
    offsetY = v3d.Math.clamp(offsetY, -panLimitY, panLimitY);
    app.camera.setViewOffset(width, height, offsetX, offsetY, width, height);
}

it’s the problem of FireFox. It can’t read event.which properly.

Replace if (event.which < 2) with if (event.buttons < 2) and it will work in FireFox too.

P.S. The demo has been updated. Works in the latest FireFox.
https://v3d.net/ajo

Hi kdv,
Have you checked this solution with the taller models, for example, building?
When you zoom in more, the visible part of the model scales (enlarges) too much.

Thanks

• This reply was modified 1 year, 9 months ago by saalemv3d.

In the screenshot, the top part of the model is scaled (bigger than normal) after zoom-in. The main reason to use your solution is to enable a limited pan. So, if we remove the camera view offset code, we lose the limited pan functionality.

Panning.

The camera view offset.

That’s the perspective camera distortion depending on its FOV. When you use panning you really move the camera in the scene’s world space and the distortion is always relative to the center of the screen (the first screenshots). When you use the view offset you move nothing. You see the model as if it’s in the center but with the screen offsets in px. It’s not panning.