Как мне перетащить стрелки часов Три JS на меня sh? - PullRequest
Новая
       11

Как мне перетащить стрелки часов Три JS на меня sh?

0 голосов
/ 13 июля 2020

Я пытаюсь заставить стрелки часов вращаться, перетаскивая Three JS, но у меня много проблем с их правильным вращением. У меня есть модель часов с ручными сетками, которые вращаются по оси Z. Я пробовал несколько алгоритмов, но ничего не добился с ними.

Я хочу спросить, как бы вы решили эту проблему или какой у вас алгоритм, чтобы это работало. Моя последняя ошибка go основана на положении мыши на декартовой плоскости, и рука должна двигаться в направлении движения мыши, но это не работает.

enter image description here

Expected: Click on a hand and drag it around smoothly to set the time

Actual: When the hand is dragged it goes in the right direction but bounces around weirdly.

Here's the code when dragging (onmousemove):

-Clockhand: hand mesh currently selected
-mousecoords: current mouse position in canvas 
-mult: speed multiplier 
-offset: difference between current mouse position and previous update

function RotateHand(clockHand, mousecoords, mult) {
    var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    var mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    var rot = getMouseDegrees(mousecoords.x, mousecoords.y, 1);

    var currRot = THREE.Math.radToDeg(selection.rotation.z);
    var rotStr = Math.atan2(rot.x, rot.y) * mult;
    var finRot = 0;
    if (currRot < 1 && currRot > -90) {
        if (mouseX < offset.x || mouseY > offset.y)
            finRot = THREE.Math.degToRad(rotStr);
        else
            finRot = THREE.Math.degToRad(-rotStr);

    } else if (currRot < -90 && currRot > -180) {
        if (mouseX > offset.x || mouseY > offset.y)
            finRot = THREE.Math.degToRad(rotStr);
        else
            finRot = THREE.Math.degToRad(-rotStr);

    } else if (currRot > -1 && currRot < 90) {
        if (mouseX < offset.x || mouseY < offset.y)
            finRot = THREE.Math.degToRad(rotStr);
        else
            finRot = THREE.Math.degToRad(-rotStr);

    } else if (currRot > 90 && currRot < 180) {
        if (mouseX > offset.x || mouseY < offset.y)
            finRot = THREE.Math.degToRad(rotStr);
        else
            finRot = THREE.Math.degToRad(-rotStr);

    }

    clockHand.rotateZ(finRot);


    return finRot;

}

Я пробовал ff, но я просто не мог заставить их работать в этой ситуации:

...