将形状从平面的equirectangular全景图映射到A帧内的平面

时间:2017-03-18 06:05:23

标签: javascript three.js aframe

我正在尝试在A-Frame中为360个图像构建一个热点编辑器。

这个想法是你可以绘制一个equirectangular全景图,然后这个工具将形状转换为THREE.ShapeGeometry的平面。

我可以从JS矢量编辑器和A-Frame中渲染的平面获得每个形状节点的X / Y坐标。但是,我在将它们正确放置在天空盒上时遇到了问题。

我知道我需要做一些equirectangular投影但不确定如何在这种情况下接近它。

有什么想法吗?

Screenshot of vector editor to show what I mean

1 个答案:

答案 0 :(得分:0)

目前尚不清楚如何在3D空间中显示这些平面几何图形,但以下信息可能对您有所帮助......

使用物理样式spherical polar coordinates - 类似纬度和经度,但不是从西到东从-180到180,从南到北从-90到90,你有类似于从0指向直线的纬度最多180个直指向下,phi从0到360绕Y轴旋转。

从这两个角度你可以映射到球体上的x,y,z(笛卡儿)坐标和带有纹理的equirectangular投影,你有一个U轴水平从0到1,就像0到360 in phi和V轴垂直从0到1运行,在θ中为0到180。

使用该信息,您应该能够在θ和φ球面极坐标的等角矩形平面上识别您选择的顶点,并将它们转换为球体表面上的x,y,z笛卡尔坐标。

你想从那里做什么取决于......我会提出一个建议,但要把它拿走或留下它。

我认为你想要做的是将这些点径向投射到与球体表面相切的平面上,即使用穿过球体中心的法向矢量。我认为,有问题的部分在于决定使用什么样的平面以及距离球体中心的距离。

随机的持续思考让我回想几何和物理课程,并思考像质心在表面上保持恒定密度的事物。

一个更简单的解决方案是,只需单击定义形状内的某个位置即可定义平面应该切向的球体表面上的点,然后将法线的长度从等于半径减小为某种形状足够小于定义形状的投影顶点,以便全部适合球体内部。

要将投影完美地贴合在球体内部的定义形状的平面上,可以通过识别距离切线点最远的定义形状的顶点(沿着径向线的平面法线相交的位置)进行分析。球体的表面)就像great circle上最大的弧长一样。