We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

How to limit the camera panning

Home Forums General Questions How to limit the camera panning

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #55846
    David Yanez
    Customer

    Wow, thanks
    kdv77kdv! This is exactly what I was looking for. How do you set the camera view offset?

    #55850
    kdv
    Participant
    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);
    }
    #59601
    saalemv3d
    Participant

    Hi,
    Good solution but did you check it on the Firefox browser? It is not working.

    #59602
    kdv
    Participant

    it’s the problem of FireFox. It can’t read event.which and event.button 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

    #59657
    saalemv3d
    Participant

    Great :good: , it works now.

    Thanks

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.