基于位置的 AR 与 Three.js (+ React) - 相机配置？答案

【问题标题】：Location based AR with Three.js (+ React) - camera configuration?基于位置的 AR 与 Three.js (+ React) - 相机配置？
【发布时间】：2020-05-01 03:50:28
【问题描述】：

我想使用基于位置的标记来增强固定网络摄像头的图像。这将被添加到已经在其他部分使用three.js（通过react-three-fiber）的现有React 应用程序中，因此这些技术将被重用。

虽然计算标记（已知位置）相对于相机（已知位置）的位置很容易，我正在努力配置相机以获得“真实”对象和 AR 标记之间的良好视觉匹配。

我创建了一个 codesandbox with an artificial example 来说明挑战。

这是我配置相机的尝试：

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;

...

关于如何将相机配置为很好地匹配 three.js 框和现实生活对象的任何提示/想法？

【问题讨论】：

您考虑过 AR.js 及其 geoAR 功能吗？
我有。但首先它不完全是用例，其次我想使用 React 和 three.js。 AR.js 中基于位置的 AR 是基于 a-frame。

标签： three.js geolocation augmented-reality react-three-fiber

【解决方案1】：

作为GIS-developer，我可以给这个问题一些提示：

大多数 3D 图形 API（例如 OpenGL / WebGL，Three.js 是其包装器）期望所有坐标都在线性Cartesian 空间中，但这里的输入数据（标记和相机位置）在纬度和经度（度数作为浮点数）。这些是需要首先转换的Spherical 坐标。
因此，要将球面经纬坐标转换为线性空间，我们首先需要确定要在哪个坐标系中工作。存在许多坐标参考系用于各种目的，但为了简单起见，我们将只使用所谓的Web Mercator Projection（由标识符代码EPSG:3857 定义）作为我们的目标参考系统。这会将我们的值从度数转换为米数。
有几种方法可以实现这种转换，例如使用称为 Proj4js 的 JS 库或 Web 映射库的一些辅助函数，例如 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 ] );
然后您可以根据给定的航向和俯仰旋转相机，如果视野正确，相机应该或多或少对齐。

【讨论】：