2

私はTHREE.js WebGL 地球儀を扱っていますが、地球儀を上下逆に回転できないようにする制約を取り除きたいと考えています: 北極が下にあり、その逆です。

必要なもののスクリーンショット

これが私の現在の実験です: 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 を作成しました。onMouseMove318-334行目。

4

1 に答える 1