使用Three.js将3D对象旋转到鼠标位置

Question

我想在三维空间中旋转一个物体，使其正面始终朝向鼠标。

function onMouseMove(event){
             mouse3D = projector.unprojectVector(
                 new THREE.Vector3( event.clientX, event.clientY, 0.5 ), camera );
}

var angle = ??;
box.rotation.y = angle;

首先，反投影是否正确？其次，如何计算角度？只需用tan(mouseX/mouseY)吗？我正在尝试更深入地了解三维数学，所以稍微解释一下会很好。

提前感谢。

- Dominic

---

如何旋转？您有三个不同的轴可以旋转吗？您希望鼠标如何控制旋转？ - hypervisor666

这将视差效果提升到一个新的层次...让鼠标决定嵌入对象的3D内容如何“看”鼠标指针。原创点赞。 - arttronics

对于视差伪3D效果，请查看此示例。 - arttronics

Answer 1

// Direction we are already facing (without rotation)
var forward = new Vector3(0,0,-1);

// Direction we want to be facing (towards mouse pointer)
var target = new Vector3().sub(mouse3D, box.position).normalize();

// Axis and angle of rotation
var axis = new Vector3().cross(forward, target);
var sinAngle = axis.length(); // |u x v| = |u|*|v|*sin(a)
var cosAngle = forward.dot(target); // u . v = |u|*|v|*cos(a)
var angle = Math.atan2(sinAngle, cosAngle); // atan2(sin(a),cos(a)) = a
axis.normalize();

// Overwrite rotation
box.rotation.makeRotationAxis(axis, angle);

或者，您可以使用四元数:

// Overwrite rotation
box.useQuaternion = true;
box.quaternion.setFromAxisAngle(axis, angle);

- Markus Jarderot