在 THREE.js 中获取与 3D 空间相关的鼠标坐标 [英] Getting coordinates of the mouse in relation to 3D space in THREE.js

问题描述

过去 3 周我一直在努力解决这个问题.如果有人能帮助我，我将不胜感激.

I have struggled for the past 3 weeks trying to figure this out. If anyone could help me I would appreciate it so much.

我正在开发一款类似于 Geometry Wars 的游戏，其中我在屏幕中间有一个三角形，您可以四处移动.

I'm developing a game similar to Geometry Wars in where I have a triangle in the middle of the screen which you can move around.

问题是我需要三角形旋转并面向鼠标光标的方向.我不需要担心每个说的 z 轴，因为我总是将相机放在固定位置 (z=500) 并且我将场景视为2D 场景" - 所有动作都发生在 z 上=0 平面.

The problem is I need the triangle to rotate and face toward the direction of the mouse curser. I don't need to worry about the z-axis per-say as I always have the camera in a fixed position (z=500) and I am treating the scene as a "2D scene" - all the action occurs on the z=0 plane.

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

Calculating the angle between the triangle and the mouse is elementary:

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

这是网格.

问题是 mouseCoords 是站立的 Dom 窗口格式，而三角形的位置是 Three.js 格式.

The problem is that the mouseCoords are in standed Dom window format whilst the position of the triangle is in Three.js format.

Q) 我如何将鼠标坐标转换为表示三角形所在 z=0 平面上的坐标?

我尝试了很多方法，包括光线交叉，但没有任何效果;(

I have tryed so many ways including ray intersection but nothing works ;(

感谢大家的帮助，非常感谢你们提供了一个了不起的框架！！！！

Thank you all for your help and thank you so much for an amazing framework!!!!

推荐答案

我实际上没有看到问题.使用 THREE.vector3 和 0 中的 z 坐标.然后使用诸如 triangle.rotate(THREE.vector3(targetAngle,0,0) 之类的东西

I don't actually see the problem. use the THREE.vector3 with the z coord in 0. then use something like triangle.rotate(THREE.vector3(targetAngle,0,0) or something

这篇关于在 THREE.js 中获取与 3D 空间相关的鼠标坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！