颠倒ThreeJS webgl全球

时间:2015-05-10 22:32:51

标签: three.js webgl-globe

我正在使用THREE.js WebGL globe并希望删除阻止您将地球上下颠倒的约束:北极向下,反之亦然。

a screenshot of what i need

这是我目前的实验:https://mgiraldo.github.io/edda-globe

我尝试修改onMouseMove函数(这是我认为问题所在的地方),但我的几何数学是有限的。功能:

  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;
  }

我认为问题恰恰在于以下几点:

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

完整的代码在这里:https://github.com/mgiraldo/edda-globe/blob/gh-pages/globe/globe.js#L321-338

编辑:创建了Codepen for easy testing。第318-334行onMouseMove

1 个答案:

答案 0 :(得分:0)

看起来你已经找到了解决方案?这对我有用,也许你想用1左右的值而不是Pi / 2来限制旋转更多

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