upside down ThreeJS webgl globe

Question

I am working with the THREE.js WebGL globe and want to remove the constraint that prevents you from rotating the globe upside down: North pole being down and vice-versa.

Here's my current experiment: https://mgiraldo.github.io/edda-globe

I tried modifying the onMouseMove function (which is where I think the problem lies) but my geometry math is limited. The function:

  function onMouseMove(event) {
    if (event.type!="touchmove") {
        mouse.x = - event.clientX;
        mouse.y = event.clientY;
    } else {
        mouse.x = - event.touches[0].clientX;
        mouse.y = event.touches[0].clientY;
    }

    var zoomDamp = distance/1000;

    target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp;
    target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp;

    target.y = target.y > PI_HALF ? PI_HALF : target.y;
    target.y = target.y < - PI_HALF ? - PI_HALF : target.y;
  }

I think the problem lies precisely on these lines:

    target.y = target.y > PI_HALF ? PI_HALF : target.y;
    target.y = target.y < - PI_HALF ? - PI_HALF : target.y;

The complete code is here: https://github.com/mgiraldo/edda-globe/blob/gh-pages/globe/globe.js#L321-338

EDIT: created a Codepen for easy testing. onMouseMove in lines 318-334.

Answer 1

It looks like you already found the solution? This is working for me, maybe you want to go with a value around 1 instead of Pi/2 to limit the rotation more

target.y = target.y > 1 ? 1 : target.y;
target.y = target.y < - 1 ? - 1 : target.y;