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 13 posts - 16 through 28 (of 28 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);
    }

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #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 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

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #59657
    saalemv3d
    Participant

    Great :good: , it works now.

    Thanks

    #63563
    saalemv3d
    Participant

    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, 6 months ago by saalemv3d.
    #63565
    kdv
    Participant

    What should I see on that screenshot? The code above is not about zooming. It’s about changing the scene camera view offset (pseudo-panning). Remove that code and you’ll still get the same result when zooming too close.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #63567
    saalemv3d
    Participant

    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.

    #63568
    kdv
    Participant

    Once again: it’s not panning. Just compare it with the original panning and you will see the difference.

    In the screenshot, the top part of the model is scaled (bigger than normal) after zoom-in

    Where? The buildings are absolutely parallel to the screenshot’s sides.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #63570
    kdv
    Participant

    Panning.

    The camera view offset.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #63573
    saalemv3d
    Participant

    Thanks for the reply.

    I added the different screenshots with the illustrations over the images.

    #63576
    kdv
    Participant

    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.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #63579
    saalemv3d
    Participant

    Thanks for the explanations.

    I will try to use Blender constraints and will see if I can get what I am looking for.

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