В A-Frame / THREE.js есть метод, подобный Camera.ScreenToWorldPoint () из Unity? - PullRequest
Новая
       59

В A-Frame / THREE.js есть метод, подобный Camera.ScreenToWorldPoint () из Unity?

0 голосов
/ 30 августа 2018

Мне известен метод из Unity, который очень полезен для преобразования положения экрана в положение мира: https://docs.unity3d.com/ScriptReference/Camera.ScreenToWorldPoint.html

Я искал нечто подобное в A-Frame / THREE.js, но ничего не нашел.

Существует ли простой способ преобразовать позицию экрана в мировую позицию на плоскости, которая расположена на заданном расстоянии от камеры?

1 Ответ

0 голосов
/ 30 августа 2018

Обычно это делается с помощью Raycaster. Эквивалентная функция с использованием three.js будет написана так: 

function screenToWorldPoint(screenSpaceCoord, target = new THREE.Vector3()) {

  // convert the screen-space coordinates to normalized device coordinates 
  // (x and y ranging from -1 to 1):

  const ndc = new THREE.Vector2()
  ndc.x = 2 * screenSpaceCoord.x / screenWidth - 1;
  ndc.y = 2 * screenSpaceCoord.y / screenHeight - 1;

  // `Raycaster` can be used to convert this into a ray:

  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(ndc, camera);

  // finally, apply the distance:

  return raycaster.ray.at(screenSpaceCoord.z, target);
}

Обратите внимание, что координаты в браузерах обычно измеряются от верхнего / левого угла, где y указывает вниз. В этом случае расчет NDC должен быть: 

ndc.y = 1 - 2 * screenSpaceCoord.y / screenHeight;

Еще одно примечание: вместо использования установленного расстояния в screenSpaceCoord.z вы также можете позволить three.js вычислить пересечение с любым объектом в вашей сцене. Для этого вы можете использовать raycaster.intersectObject() и получить точную глубину для точки пересечения с этим объектом. Смотрите документацию и различные примеры, связанные здесь: https://threejs.org/docs/#api/core/Raycaster

...