graphics - マウスの位置を基準にしてオブジェクトを回転させる

Question

現時点では、マウスの位置と (0, 1) の内積を使用してラジアンを生成し、three.js でオブジェクトを回転させています。

clientX以下のコードは正常に動作しますが、値がその間にあるときにラジアン角度が正から負にスキップするため、オブジェクトが「ジャンプ」します。window.innerWidth / 2

onDocumentMouseMove : function(event) {
    // rotate circle relative to current mouse pos

    var oldPos = new THREE.Vector2(0, 1);


    Template.Main.mouseCurrPos = new THREE.Vector2((event.clientX / window.innerWidth ) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1);


    Template.Main.mouseCurrPos.normalize();
    //Template.Main.projector.unprojectVector(Template.Main.mouseCurrPos, Template.Main.scene);

    var angle = oldPos.dot(Template.Main.mouseCurrPos);
    Template.Main.mousePrevPos.x = event.clientX;
    Template.Main.mousePrevPos.y = event.clientY;


    if (event.clientX < window.innerWidth / 2) {
        Template.Main.circle.rotation.z = -angle;
    }
    else {
        Template.Main.circle.rotation.z = angle;
    }

    console.log(Template.Main.circle.rotation.z);
}

ただし、これを追加して値を oldPos に割り当てると:

    if (event.clientX < window.innerWidth / 2) {
        oldPos = new THREE.Vector2(0, -1);
    }
    else {
        oldPos = new THREE.Vector2(0, 1);
    }

その後、「ジャンプ」が行われますが、マウスがウィンドウの左側にあると、回転の効果が反転します。

つまり、マウスが上に行くと反時計回りに回転し、その逆も同様です。これは望ましくありません。

イライラします。

また、oldPos 条件付き割り当てを保持し、代わりに角度の条件付き否定を除外すると、ジャンプが戻ってきます。

ここでデモを見ることができます: http://theworldmoves.me/rotation-demo/

ヒントをありがとう。