基于位置的AR.js+Three.js：如何利用OSM数据创建建筑轮廓等标记？

不用从零开发，有现成工具和方法可以用，也能根据需求自己实现核心逻辑：

现成可用的方案 #

• AR.js内置转换能力：AR.js的基于位置模式本身就带了经纬度到Three.js世界坐标的转换功能。比如可以用ARjs.Utils.latLonToWorld这类方法（不同版本可能略有差异），它会以当前设备的GPS位置为原点，把目标经纬度转换成Three.js里的3D坐标，单位是米，和真实世界尺度匹配，直接用来构建建筑轮廓、路径就行。
• 投影库配合转换：如果需要更灵活的控制，用Proj4js这类地理投影库，先把经纬度转成UTM投影的平面坐标（单位米），再以设备当前位置对应的UTM坐标为原点，算出目标点的相对偏移量，直接对应到Three.js的x/z轴（注意调整轴向对应关系，比如Three.js的z轴可能对应地理北向）。

自己实现的核心逻辑（适合定制场景） #

要是不想依赖外部库，核心就是计算两个经纬度的相对位置：

• 把设备当前的GPS坐标（lat0, lon0）设为Three.js世界的原点(0,0,0)。
• 用Haversine公式算出目标点（lat1, lon1）和原点的球面距离（单位米）。
• 计算目标点相对于原点的方位角（从正北顺时针旋转的角度）。
• 把距离和方位角转成Three.js坐标：比如x对应东、z对应北的话，x = 距离 * Math.sin(方位角弧度)，z = 距离 * Math.cos(方位角弧度)，y轴根据建筑高度设置就行。

提醒下，用AR.js内置的方法最省心，它已经帮你处理了设备姿态和坐标系对齐的问题，不用自己折腾这些细节。

内容的提问来源于stack exchange，提问作者simone