ArcRotateCamera goes crazy when moved past zero on beta axis

[Sigmus]

Hello everyone,

I'm currently building an object viewer with BJS that utilizes a single ArcRotateCamera. I had to create manual control buttons for the camera, because apparently it can't be expected of the average web user to know how the simple concept of drag and drop works. So, I built 6 button to rotate the camera up, down, left and right and zoom in and out. The beta axis needed some special attention, because the application's state machine can have a state where upperBetaLimit and lowerBetaLimit are null, so the user can rotate past the top / bottom. This works fine with the mouse, but when the button is used and the last rotation modification moves the beta value past zero/360 degrees, the camera's z-axis (which should be fixed and not even modifiable for ArcRotateCamera) flips upside down for a split second before some sort of internal correction seems to turn it back around to normal. But that moment is very irritating and I doubt that my client will approve the app with such an ugly display bug. Any idea what might be causing it and how to get rid of it? I already tried to prevent the beta value from ever reaching exactly zero, because I expected that this was the problem, but as it turned out, that was not it.

Here is the code for the up button:

$('#buttonRotateUp').on('mousedown touchstart', function (e) {
  e.preventDefault();
        
  if (window.camBetaRotationInterval) {
    clearInterval(window.camBetaRotationInterval);
  }
  $('#buttonRotateDown').removeClass('limit-reached');
          
  if (!$(this).hasClass('pressed') && !$(this).hasClass('limit-reached')) {
    $(this).addClass('pressed');
    var rotateStep = 0.15;

    // checking if the limits are not null
    if ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit) {
      $('#buttonRotateUp').addClass('limit-reached');
      scene.activeCamera.beta = scene.activeCamera.upperBetaLimit;
    } else {
      if ((scene.activeCamera.beta + rotateStep) == 0.0) {
        scene.activeCamera.beta += (rotateStep + 0.1);
      } else {
        scene.activeCamera.beta += rotateStep;
      }
    }
    window.camBetaRotationInterval = setInterval(function () {
      var $btn = $('#buttonRotateUp');
      var rotateStep = 0.015;
      if ($btn.hasClass('limit-reached') || ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit)) {
        $btn.addClass('limit-reached');
        scene.activeCamera.beta = scene.activeCamera.upperBetaLimit;
      } else {
        if ((scene.activeCamera.beta + rotateStep) == 0.0) {
          scene.activeCamera.beta += (rotateStep + 0.01);
        } else {
          scene.activeCamera.beta += rotateStep;
        }
      }
    }, 25);
  }
}).on('mouseup touchend', function (e) {
  e.preventDefault();
       
  $(this).removeClass('pressed');
  if (window.camBetaRotationInterval) {
    clearInterval(window.camBetaRotationInterval);
  }
});

 

[GameMonetize]

Hello, this should be done with upper/lower limit. not sure to understand why they could be null 

But if this is a constraint of your code, why not sharing a playground repro so we can discuss with some code?

 

[Sigmus]

Thanks for the reply. Upper and lower limit can be null because I explicitly set them to be null when a certain condition is met. Doing so results in the camera behavior I intended to achieve: Being able to rotate past the default stopping positions of the top-down and bottom-up view. And it works fine as long as I use the mouse for that. When I click the vertical rotation buttons, then the ugly flickering I described occurs.

I was able reproduce it in the playground:
http://www.babylonjs-playground.com/#1AYE5Y#2

As you can see there, the knot rotates around the beta axis. Every time it goes past the 0/360 degree point (which would normally be the top-down-view stopping point if I hadn't removed the limits) the camera has this ugly flicker effect where its view seems to be turned on the head for a split sec. I have no idea how to get rid of that and I definitely need a smooth rotation animation for my current project.

[GameMonetize]

hello it was the combination of using camera collisions and a bug in the upsideDown model

 

should be good now: http://www.babylonjs-playground.com/#1AYE5Y#9 (clear your cache)

[Sigmus]

Thanks a lot for the quick reply and the work you put in this. I saw that the only change in the demo code (except for smooting out the animation as a bonus) was to disable collision. So if I understand you correctly, this means that the bug in the upsideDown model you mentioned was a fix for the actual Babylon engine you just implemented? Very cool. So, which version do I need to make it work? The latest nightly alpha of 3.0? This might be a bit risky, considering that I'm using a stable 2.5 release for my project. Or did you fix it for BJS 2 as well?

[GameMonetize]

I did not fix back but you can trust v3.0 (it is rock solid even for an alpha version)