Home › Forums › General Questions › How to limit the camera panning
- This topic has 27 replies, 6 voices, and was last updated 1 year, 7 months ago by saalemv3d.
-
AuthorPosts
-
2022-09-14 at 5:23 pm #55846David YanezCustomer
Wow, thanks
kdv77kdv! This is exactly what I was looking for. How do you set the camera view offset?2022-09-14 at 6:26 pm #55850kdvParticipantlet 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.
2023-01-16 at 10:38 am #59601saalemv3dParticipantHi,
Good solution but did you check it on the Firefox browser? It is not working.2023-01-16 at 10:50 am #59602kdvParticipantit’s the problem of FireFox. It can’t read
event.which
properly.Replace
if (event.which < 2)
withif (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/ajoPuzzles 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.
2023-01-18 at 6:51 am #59657saalemv3dParticipantGreat , it works now.
Thanks
2023-05-08 at 2:20 am #63563saalemv3dParticipantHi 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, 7 months ago by saalemv3d.
2023-05-08 at 2:28 am #63565kdvParticipantWhat 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.
2023-05-08 at 3:25 am #63567saalemv3dParticipantIn 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.
2023-05-08 at 3:37 am #63568kdvParticipantOnce 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.
2023-05-08 at 3:52 am #63570kdvParticipantPanning.
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.
2023-05-08 at 4:21 am #63573saalemv3dParticipantThanks for the reply.
I added the different screenshots with the illustrations over the images.
2023-05-08 at 4:33 am #63576kdvParticipantThat’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.
2023-05-08 at 6:32 am #63579saalemv3dParticipantThanks for the explanations.
I will try to use Blender constraints and will see if I can get what I am looking for.
-
AuthorPosts
- You must be logged in to reply to this topic.