Three.js 向鼠标位置旋转框不起作用答案

【问题标题】：Three.js rotate boxes towards mouse position doens't workThree.js 向鼠标位置旋转框不起作用
【发布时间】：2016-03-04 12:23:43
【问题描述】：

我有几个随机生成的框，我想将它们旋转到鼠标位置。我试图获取鼠标位置，然后使用lookAt(mouse3D)将框旋转到鼠标坐标，但它们根本没有改变它们的旋转。我什至不希望它们向 3D 空间内的鼠标位置旋转，而只是向屏幕上的鼠标位置旋转。

目前我得到的鼠标位置是这样的：

function onDocumentMouseMove( event ) {
            mouse3D = new THREE.Vector3(
                 ( event.clientX / window.innerWidth ) * 2 - 1,
                 - ( event.clientY / window.innerHeight ) * 2 + 1,
                 camera.position.z );
}

这是我发现的一个示例，但无法应用于我的问题：http://mrdoob.github.io/three.js/examples/misc_lookat.html

我用我目前的方法创建了 JSFiddle：

https://jsfiddle.net/nrub93m7/

【问题讨论】：

你想要这样的东西吗？ jsfiddle.net/nrub93m7/4。它只是一个快速的小提琴，r74 是场景看起来不同的原因。
@FalkThiele 它非常接近我的想法。在您的示例中，据我所见，它将点沿射线投射到球体中。有没有办法让它看起来只是屏幕上的鼠标位置，即鼠标的 x 和 y 坐标，但相机的 z 轴坐标？
我尝试将var distance 设置为0，但瓷砖不再转动。有什么想法吗？
如果这解决了您的问题，我将清理代码并将其发布为答案：jsfiddle.net/nrub93m7/8
真的很接近，这实际上有很大帮助！剩下的一件事......看看这个截图，箭头指向的瓷砖不应该几乎翻转，因为我对lookAt的理解是平面应该指向3D中的矢量点。 imgur.com/tCqaYtr

标签： javascript three.js

【解决方案1】：

我刚刚将此方法添加到您的 jsfiddle 链接中：

function onDocumentMouseMove( event ) 
{
  mouse3D = new THREE.Vector3( event.clientX, event.clientY, 0);
}

【讨论】：

这会产生一个奇怪的结果，对象会看到球体内的某个点，而不是实际的鼠标位置，你能看看我在主要问题下作为评论给出的解释吗？跨度>
每次鼠标移动都创建一个新的 vec 代价高昂