Mapping shapes from a flat equirectangular panorama to planes within A-Frame

Question

I'm trying to build a hotspot editor for 360 images within A-Frame.

The idea is that you could draw on an equirectangular panorama and then this tool would convert the shapes into planes with THREE.ShapeGeometry.

I can get X/Y coordinates for each shape's nodes from a JS vector editor and the planes rendered in A-Frame. However, I'm having problems getting them positioned correctly atop the skybox.

I know I need to do some kind of equirectangular projection but am unsure how to approach that in this context.

Any ideas?

Screenshot of vector editor to show what I mean

Answer 1

It’s not clear how you want to display those planar geometries in 3D space but perhaps the following information can help you some of the way...

Using the physics style spherical polar coordinates - like latitude and longitude but instead of running from -180 to 180 in west to east and -90 to 90 in south to north you have theta analogous to latitude running from 0 pointing straight up to 180 pointing straight down and phi running from 0 to 360 rotating around the Y axis.

From those two angles you can map to x,y,z (cartesian) coordinates on a sphere and in the equirectangular projection with a texture, you have a U axis running from 0 to 1 horizontally which is like 0 to 360 in phi and V axis running from 0 to 1 vertically which is like 0 to 180 in theta.

With that information you should be able to identify the vertices of your selection on the equirectangular plane in theta and phi spherical polar coordinates and so translate them to x,y,z cartesian coordinates on the surface of a sphere.

What you want to do from there depends... I'll make a suggestion but take it or leave it as you please.

I think what you want to do from there is to project those points radially onto a plane that is tangential to the surface of the sphere, i.e. with a normal vector that goes through the centre of the sphere. The problematic part, I think, comes in deciding what plane normal to use and at what distance from the centre of the sphere to place it.

Random continued musing makes me think back to geometry and physics lessons and thinking of things like centre of mass given constant density across the surface.

A simpler solution could be to just click somewhere within the defined shape to define the point on the surface of the sphere to which the plane should be tangential and then reduce the length of the normal from being equal to the radius to being something enough less than that for the projected vertices of the defined shape to all fit inside the sphere.

To fit the projection onto the plane of the defined shape perfectly just inside the sphere, that can be done analytically by identifying the vertex of the defined shape that is furthest from the tangential point (where the plane normal along a radial line intersects the surface of the sphere) which would be something like the largest arc length along a great circle.