Получение координат мыши относительно трехмерного пространства в THREE.js
Я боролся в течение прошлых 3 недель, пытаясь понять это. Если бы кто-нибудь мог мне помочь, я был бы очень признателен.
Я разрабатываю игру, похожую на Geometry Wars, в которой у меня есть треугольник в центре экрана, по которому вы можете перемещаться.
Проблема в том, что мне нужно повернуть треугольник и повернуть его в направлении курсора мыши. Мне не нужно беспокоиться о разрешении оси z, так как камера всегда находится в фиксированном положении (z=500), и я рассматриваю сцену как "2D-сцену" - все действие происходит на z=0 плоскость.
Вычисление угла между треугольником и мышью элементарно:
targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)
где это меш.
Проблема в том, что mouseCoords находятся в стандартном формате окна Dom, а позиция треугольника в формате Three.js.
Q) Как бы я преобразовал координаты мыши, чтобы представить координаты на плоскости z=0, где находится треугольник?
Я пробовал так много способов, включая пересечение лучей, но ничего не работает;(
Спасибо всем за вашу помощь и огромное спасибо за удивительные рамки!!!!
2 ответа
Я на самом деле не вижу проблемы. используйте THREE.vector3 с координатой z в 0. затем используйте что-то вроде triangle.rotate(THREE.vector3(targetAngle,0,0) или что-то в этом роде)
Мой блог должен ответить на ваш вопрос. Это демонстрирует выбор шатра и пересечение лучей. Я подозреваю, что ваше пересечение не работает из-за смещения CSS вашим холстом в DOM.
Если вам нужен треугольник, чтобы взглянуть на что-то конкретное, вы просто должны иметь возможность использовать метод lookAt треугольника.
Например, посмотрите на камеру: triangleMesh.lookAt(camera.position);