AR на основе определения местоположения с тремя. js (+ React) - конфигурация камеры? - PullRequest
Новая
       59

AR на основе определения местоположения с тремя. js (+ React) - конфигурация камеры?

0 голосов
/ 14 января 2020

Я хочу дополнить изображение стационарной веб-камеры маркерами на основе определения местоположения. Это должно быть добавлено к существующему приложению React, которое уже использует три. js (через response-three-fiber ) в других частях, поэтому эти технологии должны быть повторно использованы.

Хотя довольно просто рассчитать положение маркеров (известные местоположения) относительно камеры (известное местоположение), Я борюсь с конфигурацией камеры , чтобы получить хорошее визуальное соответствие между «реальный» объект и маркер AR.

Я создал кодовую коробку с искусственным примером , иллюстрирующим проблему.

Вот моя попытка настройки камеры: 

const camera = {
    position: [0, 1.5, 0],
    fov: 85,
    near: 0.005,
    far: 1000
};

const bearing = 109;  // degrees

<Canvas camera={camera}>
    <Scene bearing={bearing}/>
</Canvas>

Далее в компоненте сцены я поворачиваю камеру в соответствии с ориентацией веб-камеры следующим образом: 

...

const rotation = { x: 0, y: bearing * -1, z: 0 };
camera.rotation.x = (rotation.x * Math.PI) / 180;
camera.rotation.y = (rotation.y * Math.PI) / 180;
camera.rotation.z = (rotation.z * Math.PI) / 180;

...

Любые советы / мысли о том, как настроить эту камеру для хорошее совпадение из трех. js коробок и реальных объектов?

1 Ответ

2 голосов
/ 17 февраля 2020

Как разработчик GIS , я могу дать несколько советов по этому вопросу:

  • Большинство API-интерфейсов для 3D-графики (таких как OpenGL / WebGL, для которых Three. * 1036) * является оберткой) ожидайте, что все координаты будут в линейном декартовом пространстве, но здесь входные данные (маркеры и положения камеры) приведены в широте и долготе (градусы в виде чисел с плавающей запятой). Это сферические координаты, которые необходимо преобразовать первыми.
  • Итак, чтобы преобразовать наши сферические широтные координаты в линейное пространство, нам нужно сначала решить, в какой системе координат мы хотим работать Многие системы координатных координат существуют для различных целей, но для простоты мы будем просто использовать так называемую Веб-проекцию Меркатора (определенную кодом идентификатора EPSG: 3857 ) в качестве нашей целевая система отсчета. Это преобразует наши значения из градусов в метры.
  • Есть несколько способов добиться этого преобразования, например, с помощью библиотеки JS, известной как Proj4 js или некоторого помощника. функции библиотек веб-картографирования, таких как Leaflet или OpenLayers .
  • Пример: var xy = proj4( "EPSG:4326", "EPSG:3857", [ lon, lat ] );
  • Как только у нас есть координаты в метрах, важно расположить маркеры относительно местоположения камеры. В противном случае мы получили бы очень большие значения координат. Поэтому я советую поместить камеру в начало сцены (0, 0, 0) и расположить маркеры по их дельта-вектору.
  • Пример: var position = new THREE.Vector3( camXY[ 0 ] - markerXY[ 0 ], 0.0, markerXY[ 1 ] - camXY[ 1 ] );
  • Затем можно повернуть камера в соответствии с заданным курсом и шагом, и она должна более или менее выровняться, если поле обзора правильное.
...