Поворот объекта относительно позиции мыши

На данный момент я использую скалярное произведение положения мыши и (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/

Большое спасибо за любые советы.


three.js dot-product geometry graphics
person Alex    schedule 29.05.2013    source источник
comment
Как вы хотите, чтобы мышь влияла на вращение?   -  person Stochastically    schedule 30.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

Почему вы используете результат скалярного произведения как угол (радианы)? Точечное произведение дает вам косинус угла (умноженный на величину векторов, но это единичный вектор и нормализованный вектор, так что это не имеет значения).

Вы можете изменить вычисление угла на

var angle = Math.acos(oldPos.dot(Template.Main.mouseCurrPos));

Однако вы можете получить неправильный квадрант, поскольку могут быть два значения theta, которые удовлетворяют cos (theta) = n. Обычный способ получить угол вектора (начало координат к положению мыши) в правом квадранте - использовать atan2 ():

var angle = Math.atan2(Template.Main.mouseCurrPos.y,
                       Template.Main.mouseCurrPos.x);

Это должно дать угол вектора положения мыши, идущий против часовой стрелки от (1, 0). Немного экспериментируя, можно точно определить, где находится нулевой угол, а в каком направлении - положительное вращение.

person LarsH    schedule 30.05.2013
comment
Прочитав это, я понял, что делал это раньше! atan2 был решением тогда, как и сейчас, спасибо. - person Alex; 30.05.2013
comment
@AlexW: De ja vu ... Иногда такое случается со мной. - person LarsH; 30.05.2013