在THREE.js中获取鼠标相对于3D空间的坐标

时间:2012-06-03 22:46:03

标签: three.js

过去3周我一直在努力解决这个问题。如果有人能帮助我,我会非常感激。

我正在开发一款类似于几何战争的游戏,我在屏幕中间有一个三角形可以移动。

问题是我需要三角形旋转并面向鼠标光标的方向。我不需要担心z轴per-say因为我总是将相机放在固定位置(z = 500)而我将场景视为“2D场景” - 所有动作都发生在z上= 0飞机。

计算三角形和鼠标之间的角度是基本的:

targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)

这是网格。

问题是mouseCoords是标准的Dom窗口格式,而三角形的位置是Three.js格式。

问:我如何转换鼠标坐标以表示三角形为z = 0平面上的坐标?

我尝试了很多方法,包括光线交叉,但没有任何作用;(

谢谢大家的帮助,非常感谢你们提供了一个惊人的框架!!!!

2 个答案:

答案 0 :(得分:0)

我实际上没有看到问题。使用带有z坐标的THREE.vector3,然后使用类似triangle.rotate(THREE.vector3(targetAngle,0,0)或其他东西

答案 1 :(得分:-4)

我的博客应该回答你的问题。它演示了选取框选择和光线交叉。我怀疑你的交集不起作用,因为你的画布在DOM中的CSS偏移。

http://blog.tempt3d.com/

如果您需要三角形来查看特定的内容,您应该只需使用三角形的“lookAt”方法。

让它看一下相机,例如: triangleMesh.lookAt(camera.position);