使用 Three.js (+ React) 基于位置的 AR - 相机配置？

Question

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

\n\n

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

\n\n

我创建了一个codesandbox，其中包含一个说明挑战的人工示例。

\n\n

这是我配置相机的尝试：

\n\n

const camera = {\n    position: [0, 1.5, 0],\n    fov: 85,\n    near: 0.005,\n    far: 1000\n};\n\nconst bearing = 109;  // degrees\n\n<Canvas camera={camera}>\n    <Scene bearing={bearing}/>\n</Canvas>\n

\n\n

在场景组件中，I\xe2\x80\x99m 根据网络摄像头的方位旋转摄像头，如下所示：

\n\n

...\n\nconst rotation = { x: 0, y: bearing * -1, z: 0 };\ncamera.rotation.x = (rotation.x * Math.PI) / 180;\ncamera.rotation.y = (rotation.y * Math.PI) / 180;\ncamera.rotation.z = (rotation.z * Math.PI) / 180;\n\n...\n

\n\n

关于如何配置相机以实现 Three.js 框和现实生活中的物体的良好匹配，有什么技巧/想法吗？

\n

Answer 1

作为一名GIS开发人员，我可以对这个问题给出一些提示：

• 大多数 3D 图形 API（例如 OpenGL / WebGL，Three.js 是其包装器）期望所有坐标都位于线性笛卡尔空间中，但这里输入数据（标记和相机位置）以纬度和经度（度）给出作为浮点数）。这些是需要首先转换的球坐标。
• 因此，要将球面经纬度坐标转换为线性空间，我们需要首先决定要在哪个坐标系中工作。出于各种目的存在许多坐标参考系，但为了简单起见，我们将仅使用所谓的Web 墨卡托投影（由标识符代码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 ] );
• 然后，您可以根据给定的航向和俯仰旋转相机，如果视野正确，它应该或多或少对齐。