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

Posted 2023-02-27

【中文标题】使用 Three.js 将 3D 对象旋转到鼠标

【英文标题】：Rotate 3D object to mouse with Three.js

【发布时间】：2012-02-20 01:58:27

【问题描述】：

我想在 3D 空间中旋转一个对象，使正面总是看向鼠标。

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) 吗？我正在尝试更多地了解 3D 数学，所以稍微解释一下就好了。

提前致谢。

【问题讨论】：

如何旋转？你有 3 个不同的轴可以旋转？以及您希望鼠标如何控制旋转？

这将视差效果提升到了一个新的水平……让鼠标决定嵌入对象的 3D 内容在鼠标指针上的“外观”。 +1 原创想法。

对于Parallax 伪3D 效果，看看这个example。

【参考方案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);