How to Limit Tilt

I would like to be able to limit the tilt. Using a mouse we can easily and consistently end up “under ground” or get “lost” in the scene by clicking on the globe and moving the mouse to tilt the scene to both extremes (+/- 90 degrees) repeatedly. The severity of the problem caused in the scene depends on the zoom level.

I’ve read through numerous posts regarding this issue, but I haven’t found a method that addresses the problem.

I do see several references to using a constrainedAxis, but I’m not sure how to implement this. The “setReferenceFrame” function in the Sandcastle Camera demo constrains the axis but also locks the scene to a particular position.

It seems that if I could limit the tilt to just less than +/- 90 degrees it might prevent this issue.

Is there a way to do this without having to modify Cesium’s source code?

@Rob

The following community forum post discusses a lot of details related to Camera tilt in CesiumJS. I think reading through this discussion might be a good place for you to start.

Limiting the tilt with the Camera object might be your best bet. The following sandcastle demo shows how this (and a lot of other Camera) functionality can be implemented:

https://sandcastle.cesium.com/index.html#c=7Vpbc9u4Ff4rqPehUiPDulOyHU+9sjzRjC8ZW9lMW3cyNAVJXFOECoKyvTv+7z0AARAUKYm20rfmIRGBA+A7Fxx8OMjKZWjlk2fC0GcUkmc0IJEfL/Bvsq3ycODJ7wENueuHhD0cVE8ewhWMijwSEhiUjMbyU3V5AfWe0i75qboYmRJGQo9cMndBvjJ/4XN/JQY+hNM49LhPQzQNXsf03g0vfDKjlSr68yFECL4nnhvxgOAJ8QKXkUpGTuBCZkmYnLlYClTkcIQmJOJ+6IoVjrWaA5dx+OWGLTxldHFBZoyQqHLYaDi40a2hVhM7jRpqdOr1Oq5Xa2KmN7HSWx7wF+JO/HD21efe/I4GwS7g6/I/V4FmEzebNdTu4gb8Y+NHiDKfgD+TidTkCM0TPGbqa5fPMad30OqGUaVpTYDQUqDeJHrY6tiyDJQ7RjBctbxtNeMV9SSyXebTclUZOwgdHaEBIy4nyHOD4NGFCJxShh4ZfY4I+2uEZoQGaoyQt1etLGnky8m0Oba44V2O0EPAYmoJ7FHKJhEOaDjzeTwhtS0ysMaaSEN6Un9rI78lwfNmTHEePWnVpRm05jUE5hQqIz6HjYiFeOiu/JnLKcOWieA3H8QM9ir/qlAJu+edJix1RzzuhrOAbHFaRk47TaSEZ7AmJItDx8H1E90Y0ZjPobXVsxqJqySbVmNImZRsJ426memloEu5yKxe4CEBQtlSLq1+ixXVT7mO+Fm0TyPCRcYs3KkGSRr2ykn3c/os/JCKYIRuKIfv/8Q+I5MT9HsMKgsHRiCLrYXBL+AUEmF3MtHLmmmsXS0jSWAh0ToU8Wfqi705dYMobQP9A8j1x4izONc6gAhhadSLL/z9y2g8LLW5ywRKVrAoUvr1spHSc4oixR7+v42T92T0/8eJjBPYSncZkrAlVHKydrQAIeGS1uw4Kp0O7vQdx6nJwGj1eq2qiQ7O4DwDsy7Saca6KcLC6zfC3d+WY3rpv5BJAjhZ2XKgyA3ID2WYHMoAOYyXaCqEDVoZHhZpkt8SiIocj4YR4AHbTs5f/KhQsW83o/GPf9qjAkqfzrkBrcLY6KWDNmV+6WyCRdTlcVND1k/9q2oHuY5Sw+8S7dbiVAbmBgoI+kgOiZe6JYnZHMAL8hjPrumEBEA7mP9iZkgP6EXae5zTFaGAhDMO7EWcpXWLlxiNchH5Dm5XIJ2Jyp1+3naWlCMbMqR7bccoLAO7n37bJKIkKTy0qd7X0Y/b34Z3P8bfb9cZYaHc5e23u/fTQd9j04qMiRriPmzuBJY/RUkrFm5Gf/lsNsK9aBWRge8Hw5th68LQOUZ4zEKbIwlfiAXUxi3c3x5dLGNORqlYElMVieZEg1EDJ2Qq9mbFmrWa8sntrk8E6HQKzi/c2HCHCiGxJBFi2Ko1tiBTJWDbMkTuaOJaqV2QEGwbqJppQ9JIt5DCaOhmnguOwtHg7nIHEUyENp6QXyhk0brulvdHvIgD7i8DX6b0Fvob6tblXxKJyhw04t+WEzjDROYYriCer/yIQxeTylYt2VlAHwmcju5jQK782Rz22AwmFkeZDsSVuhsP5nAWyhCZUC9ewKyCHA8DIn7++jqCHHVgySVXZH3dXdAVuefgyBO7ZRhOslfeRHcJOdpiO1usZFaxIEC/srFpyhvKQKpkLkNKORzxV4HHj5aB+woTPhw8Cvc8HJyYXYxSJbMrQsNPWC+EnWAvZ3yVrFTGWxnJvL9UR5GHkq7dLlJyto98gFS3zJMCzca/pzTfYqnETEvCBNNwZ5JEGOt9+uRndrO2pB/CJGPyAmGgU/HDwSAJHCVzDC3oEyD9BD9qyUe6CtzwZbKodKuFC5QIjdyVYBSeD3z+uv06oIQKAz7ZzflT9KOVk/QMbeF+r9Or91vNbsNp9Hr2aeq0e+1Wu97t9vrtXtP0tLotDM2tntN0mu1us9nOnrHiQAkIB8pcEPVIEI0xnCzAoCuF/cXK7VGTsBUFDtzpOn1AX8sKCHU7Tqffb7cboFansdbf6HVxp95r9TodIB0Nx+nb/dWMdDHJKFl/yhSgypShOrkRb5kvoOOw4KUytZlmmGnGV6Ob4fndj5vbm6E1+k3vATGpJFS6YSOfCWh0DhslINGYjunTK624E3FvkzxRuXlbbJtLiRh7uxRzilvAx2O80erjXqOdRnarg51GO41nxfTfRRSLfdHolK8ednfWDkHbmCkETd0Fm+J2RdiVrqttmr+bVnItowbuz7CoLBw7zX5q0TZud7LEO2fQVJfOPiY+LLTxh/m4so2xC9bJCwxUkJ125a5M5rIjON021i7Sqwt6nd8kKLMFsNT0XEp9IYLKAUIxlZo41WCroLoXZHCaoYVnVybaCmAWH2aZUYm2+cSwe73vPp/LxSrlVzNjNi0r2K9Z2poQqMiY0uDRZdckjCv/EqO1J4BQHKdEQtkL2IO0aa1A8jJ4FbUQF3lwpitBCPkwAiQe33A0MgIBVklzrk0dTKOFeA7uDYSL1/iDFeCbsHEqJkLyUWkPePYL1k6E689YZUDqBxD0DG7VyaGW7HtZ5Rcbey8F8lWPEooUP2uVUej61ei0F+z0BakEXPsZqRxMUx7eC6RVCS+BMlMO3wFTFhvd/WGuPexsR5l73dkB8p5wzXPWSoYfhVtQN94OubB4XB52wa6r7b3tCkuNO9X4wJbTFWlRhtknQHS1Z3d0pCWfHdCu4W6MiCxxfBRZtpqyHdt6SWUHOnXOqUt6gnM/mKakUAanVVcoka0ERYWcGiF1zov0JU968J2LhjGjy32yWJYA7c5jBdRnqwpXlD6hCX0OBUUW9Tny4s5mYAVOxBu2mPZnobfo1PvUWONUtj7/TgoWhTzq15hzOKEgnjSrvtT65BWw74GGhifyCVMstZALeS4ov4wUzy9iRimLZoYqaNeULbUh158hk9rXuclruTefRKCy4ZXIHsSfCQnXZ9xQlLeqoFXrVcA0Greb0qWZrXQ9MjcpdMehQrA+fa7vbQd2BWAdvWpew5/WFu1FyhXt7PpqUX1+/XFg7bVhdDG8GY/G/9hSvW/gDVV7ZZ2PFO7l07S+uujnIQhDvb9KFJ7THCFj/aB2cCqtc6YTwt/9xZKCW2MWVDA+4gSmFg/mR4+x90Q49qIoDRqEfrHixty2f8lWqa0amPLBMRIOOEnbxX9lmjEKjjz0kkd1ZsIpKSrKxue5z9Nhb8mP0yNbg9OJv0L+5HPB/+oDN7lRBD3TOAju/T8gAs5Oj0A+NzSgkmyIJAhohdi8cXaVNGKMT4/gs3gkTzISDNEo077M+8mZZCfq054ro0K2hn+WrWRnEFi//ws

Specifically, Camera.constrainedAxis might be what you are looking for. I hope this helps! Let me know if you have any other questions or concerns.

-Sam

Hi Sam. Thanks for responding. However, I already pointed out that I felt there might be a solution related to the constrainedAxis. I also pointed out the Sandcastle Camera demo and specifically the “setReferenceFrame” function.

But I stated that I haven’t figured out a way to utilize the constrainedAxis to solve the issue. I would greatly appreciate a simple code example that limits the tilt to just under +/- 90 degrees but doesn’t lock the scene in a specific position.

Can you provide an example like that?

1 Like

@Rob

I apologize for the repeated information. Since I did not see links to Sandcastle demos or our API, I wanted to make sure that you had the correct resources. I will check in with our development team and get back to you with a more cohesive sandcastle demo ASAP.

-Sam

Thanks, Sam. I’ll be watching for an example/demo. Thanks!

@Rob

I have been thinking about this functionality for the past few hours and I believe that the best solution involves modifying our source code. This issue has come up in numerous other community forum posts (as you mentioned) so a more robust solution may be appropriate.

Do you have any suggestions for how this might be optimally implemented? I think adding an additional function called limitTilt() to the Camera object may make sense.

-Sam

Hi Sam,

I think having a limitTilt function would be a great addition. However, I’m guessing that we’d be looking at weeks to months before the Cesium team would be able to release a new function like that.

I was really hoping for someone on the team to be able to provide an example approach for accomplishing this with the current code base. I really don’t want to modify the Cesium code since we update Cesium in our projects within days of the Cesium monthly release schedule.

Can someone on the Cesium dev team provide a Sandcastle example of a way to limit the tilt without locking the scene in any other fashion?

Or… if there is another approach to preventing the problems I described from happening that would be terrific as well. The problems being that it’s very easy (even using any of the Sandcastle examples) to tilt the globe and either end up under ground or lost in the scene. Just run any of the demos, zoom so that the entire globe is in view, then begin tilting the globe/scene to both extremes (+/- 90 degees). It won’t take long for you to experience one of the various issues. Do the same thing but zoomed in very close to the surface and you’ll likely experience more of the issues. These are the problems I’m trying to avoid by limiting the tilt.

@Rob

If limiting the camera tilt is being used as a temporary workaround to fixing more fundamental issues, I would prefer that we focus our attention on the underlying bugs. CesiumJS bugs can be submitted here for review.

I believe that this pull request addresses some of the issues that you just brought up. Is this correct? Our team should review this pull request in the near future - I expect it to be part of our upcoming CesiumJS release.

As you know, we always look for community support in the pull request review process. Your support in reviewing this pull request can ensure that these features are implemented in a timely manner.

Given that the Camera sandcastle doesn’t have the functionality that you are looking for, I just wanted to check in with a few more questions. How are you expecting the camera tilt to work? Can you share a .gif of the bug? What camera movement is necessary for your scene?

-Sam

Hi Sam,

I’m not sure that the pull request you referenced addresses any of the issues I described (or the ones described in many other posts about the desire to limit tilt).

I’m on a tight deadline this week, but I’ll try to upload a clip showing the problem soon. However this is such an easy problem to reproduce in any Sandcastle demo, and it’s been reported in numerous posts going back quite a few years.

As for what camera movement is necessary for our scene… We need full/default/standard behavior for the camera. Our projects center around the earth. And panning/zooming/tilting is all expected to occur with the earth as the center point. With that being said you can easily produce the problems I’ve described by simply tilting the camera to the limits (+/- 90 degrees) repeatedly in any of the Sandcastle demos. Sometimes a problem is produce the very first time you tilt. Other times you may have to tilt several times to produce these problems.

@Rob

Thanks for the details on your current project. I understand that you are under tight time constraints. I checked in with a few other developers and we agree that there needs to be an issue open on GitHub for limiting tilt. It would be a great feature to support.

We put together this sandcastle demo that limits camera tilt. It isn’t perfect but maybe it can be used as a starting point.

Let me know what you think. Also, I just added an issue on GitHub that should address this functionality.

Feel free to add any feedback.

-Sam

1 Like

Hi Sam,

Thanks for working on this! I really appreciate it. And I do believe having a method to limit tilt will be a real benefit.

I’d like to emphasize the REASON I’m wanting to limit the tilt (and the reason expressed by many forum posts) is to avoid the problems that can be experienced when tilting the scene. These problems include apparently ending up underground or getting entirely lost in the scene (completely turned around, in black space, don’t know where you are). It’s even possible to sometimes get into a state that Cesium can’t recover from.

I’ve been experimenting with the Sandcastle demo you provided. This does seem to help limit the problems that can be caused by tilting, so it’s a good starting point or temporary improvement. It seems to work better the closer you are to the globe. But as you zoom out from the globe you can still easily get into trouble when tilting the scene.

Here’s a quick video of one problem that is extremely easy to reproduce in the demo you provided:

tilt_issue_1

I’ll try to grab some videos of other issues as well.

But, again, I really appreciate the attention to this issue. It’s a problem we’ve wanted to address for a very long time.

Using the Hello World Sandcastle demo here’s an example of the click/anchor point for the tilt being lost. This happens very frequently.

Notice the cursor did not leave (or even hit the upper edge of) the canvas. However, additional errors/bugs can be encountered if the cursor leaves the canvas during tilt.

I’m holding down the Ctrl Key and right-clicking on the globe. Then moving the mouse forward and backward to tilt the scene… never letting up on the mouse button. But after the second tilt the anchor point is lost and the scene no longer tilts.

tilt_lose_anchor

Using the Hello World Sandcastle demo here are a few examples of the scene panning during tilt. This happens to some degree almost every time you tilt to both ends of the tilt range.

I’m holding down the Ctrl Key and right-clicking on the globe. Then moving the mouse forward and backward to tilt the scene… never letting up on the mouse button. Look at the San Francisco airport as a reference point. After tilting the scene the airport/scene has shifted/panned towards the north. The amount of shift varies potentially based on how fast the scene is tilted… but I’m not sure if the tilt speed is the offending variable.

tilt_scene_pans_1
tilt_scene_pans_2
tilt_scene_pans_3

Using the Hello World Sandcastle demo here’s an example of the globe being completely lost. This happens very regularly when zoomed around the distance shown in the video clip.

I’m holding down the Ctrl Key and right-clicking on the globe. Then moving the mouse forward and backward to tilt the scene… never letting up on the mouse button.

In this case after losing the globe when I tilt if I begin to zoom out I eventually have the globe come back into view.

tilt_globe_lost

@Rob

You are welcome! I am happy to help you out with these issues. Thank you for sending over the screen recordings. After seeing your recordings, it was much easier for me to reproduce these bugs on my local machine. This information will help me pinpoint the key problem as I create a pull request that addresses limiting camera tilt. Please do not hesitate to reach out if you have any other questions or concerns. Also, if you find any more errors related to camera movement I would appreciate it if you shared a sandcastle demo and/or a screen recording of them with me.

-Sam

1 Like

Hello, I’m needing to create a button that will reset the tilt / heading back to the default. I can do this with the built-in camera.flyTo method by providing the orientation object to the method, however all that does for tilt is to rotate the camera down. I need it to replicate the CTR + Drag / Middle Mouse Drag functionality to get it back to pointing down and still be looking at the same relative spot on the map. Chanigng the orientation with flyTo simply points the camera down, but the mouse controls for tilt actually orbit a point on the map and tilt around that point, which is what I want to simulate with a button press for resetting tilt / heading. In the code for the mouse tilt functions there’s a rotateCV function. Is there anything accessible that has similar functionality? rotateCV seems to be a private function to the source code and not static like the camera.flyTo