1

目前我正在使用鼠标位置和 (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/

非常感谢任何提示。

4

1 回答 1

1

为什么使用点积的结果作为角度（弧度）？点积为您提供角度的余弦（乘以向量的大小，但这些是单位向量和归一化向量，所以没关系）。

您可以将角度计算更改为

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

但是，您可能会得到错误的象限，因为可能有两个满足cos(theta) = n的theta值。获取右象限中向量角度（鼠标位置的原点）的常用方法是使用 atan2()：

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

这应该给出鼠标位置向量的角度，从 (1, 0) 逆时针方向移动。一点点实验就可以确定零角在哪里，哪个方向是正旋转。

于 2013-05-30T02:40:34.790 回答