0

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

虽然计算标记（已知位置）相对于相机（已知位置）的位置非常容易，但我正在努力配置相机，以便在“真实”对象和 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;

...

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

4

1 回答 1

4

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

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