Transferring shapes from a two-dimensional equirectangular view to surfaces in A-Frame

Currently, my goal is to create a hotspot editor for 360-degree images using A-Frame.

The concept behind this project involves allowing users to draw on an equirectangular panorama and then having the tool convert those drawings into planes using THREE.ShapeGeometry.

Although I have been able to retrieve the X/Y coordinates for each node of the shapes from a JavaScript vector editor and render the planes in A-Frame, I am struggling with aligning them correctly on top of the skybox.

I understand that implementing some form of equirectangular projection is necessary, but I am unsure about how to proceed within this particular framework.

If anyone has any suggestions or ideas to share, I would greatly appreciate it!

Feel free to check out this screenshot of the vector editor for reference

javascriptthree.jsaframe

Answer №1

If you're looking to visualize planar geometries in a 3D space, consider utilizing spherical polar coordinates. These coordinates are similar to latitude and longitude but with a different range of values. Instead of -180 to 180 in the west to east direction and -90 to 90 in the south to north direction, theta represents latitude from 0 pointing straight up to 180 pointing straight down, while phi runs from 0 to 360 rotating around the Y axis.

By mapping these angles to x, y, z coordinates on a sphere or equirectangular projection with a texture, you can use the U and V axes to correlate them to horizontal and vertical positions. This will allow you to locate the vertices of your selection on the equirectangular plane in spherical polar coordinates and then convert them to cartesian coordinates on the surface of a sphere.

After determining the coordinates, you may want to project those points radially onto a plane that is tangential to the sphere's surface. The challenge here lies in choosing the correct normal vector for the plane and deciding its distance from the sphere's center.

One approach could be selecting a point within the defined shape to act as the tangential point on the sphere's surface and adjusting the length of the normal so that all projected vertices fit inside the sphere. Analytically, you can find the vertex furthest from the tangential point by considering the largest arc length along a great circle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Swap out a term in a sentence with an interactive span element in real-time

I'm struggling with a seemingly simple task, and I feel quite embarrassed that I can't seem to solve it. My goal is to identify words in a string that begin with '@' or '#' and change their color to blue. The string itself com ...

javascripthtmlcssdynamic

Unable to load JQuery from a div element

My goal is to create a standard .html file containing the navigation, footer, and other elements that will be used across multiple pages for a small site I'm building. I want to keep it simple and avoid using php or other programming languages. I&apo ...

javascriptphpjqueryhtml

There is an issue with the syntax in your for-loop control where a closing parenthesis is missing

When I try to navigate through the arrays from 1 to 4 in the given JSON data, Firebug shows me an error message: SyntaxError: missing ) after for-loop control [Break On This Error] for( x in LGIntake.corpCodeOptions.marketSegment.1){ StartI...aseId=0 ...

javascriptjson

Click on the designated button to initiate a new tab

My goal is to show the content of each button in a specific tab when I click one of the 5 buttons, using vue.js. As a beginner with Vue, I've been struggling with this for the past week. Can someone please assist me? Thank you. ...

javascriptvue.js

Can I find a better approach to optimize this code?

How can I refactor this code to move the entire DB query logic into a separate file and only call the function in this current file? passport.use( new GoogleStrategy({ clientID: googleId, clientSecret: clientSecret, callbackURL: ...

javascriptnode.jsmongodbmongoose-schema

Node React authentication

Struggling with implementing authentication in React Router. I am using componentDidMount to check if the user is logged in by calling an endpoint. If not, it should redirect to login, otherwise proceed to the desired component. However, this setup doesn&a ...

javascriptnode.jsreactjsexpressreact-router

Innovative and interactive animated data display

I've taken inspiration from an example and expanded the code to achieve the following: Dynamic height adjustment Accessibility without JavaScript enabled Is this implementation correct? Can it be expected to function properly on most browsers? You ...

javascriptjquery

interactive vuetify navigation trail elements

Currently working on a vuetify project and I'm facing an issue with implementing breadcrumbs. The problem arises when clicking on a breadcrumb, as it deletes the ones that come after it in the list. I've tried some code snippets but could only ma ...

javascriptvue.jsvuejs2vuetify.jsbreadcrumbs

While the Navbar component functions properly under regular circumstances, it experiences difficulties when used in conjunction with getStaticProps

https://i.stack.imgur.com/zmnYu.pngI have been facing an issue while trying to implement getstaticprops on my page. Whenever I try to include my navbar component, the console throws an error stating that the element type is invalid. Interestingly, I am abl ...

javascriptreactjsnext.js

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

javascriptreactjs

Scrolling a div automatically without affecting its parent element

On a page, I have a scrollable list of items that can be updated with a PUT request. Once the update is successful, another network request is made to fetch the updated list. The goal is to automatically highlight the recently updated item in the list. Al ...

javascripthtmlcssreactjs

Tips for dynamically updating an input within a shadow DOM using code?

Snippet: https://jsfiddle.net/5zrwdjy7/2/ I'm currently working on automating keystrokes with a script within Cypress, however, the target website I am dealing with utilizes web components as inputs. These input elements are nested inside what is kno ...

javascriptjqueryfrontendweb-component

Having trouble loading my script in the frontend plugin?

After much testing, I have discovered that when I place this code before the get_header() function, the script is successfully loaded. However, when I move it after the get_header() function, it no longer works as intended. It's important to note that ...

javascriptjquerywordpress

Limiting the invocation of the listener method in f:ajax depending on the return value of onevent

I am looking to check if the Onevent javascript function returns true or false. My goal is to restrict the listener method call based on the return value of the Javascript function. However, the code snippet provided is causing a syntax error in Firebug. ...

javascriptajaxjsf-2listener

Iterate over the HTML elements within a class and retrieve a specific property in JSON

Currently, I am in the process of developing a straightforward application that involves making an Ajax request to retrieve a Json object and then passing it to an HTML document. Essentially, this application functions as a vending machine where the produc ...

javascriptjqueryhtmljsonajax

The rendering of code is often disrupted when utilizing the keyword const

I've been working my way through the Angular2 tutorial called Tour of Heroes and everything has been going smoothly up until this point. At the link above, I've encountered a problem. The code on the left is what the tutorial recommends, but fo ...

javascriptangulartypescript

How to stop Accordion from automatically collapsing when clicking on AccordionDetails in Material-UI

I am working on a React web project with two identical menus. To achieve this, I created a component for the menu and rendered it twice in the App component. For the menu design, I opted to use the Material UI Accordion. However, I encountered an issue wh ...

javascriptreactjsmaterial-uiaccordion

Activate a particular panel within the leftPanel using PDFNet Webviewer

When using disableElements in the setQuickBarPanelContents() function, I am able to remove 2 of the 3 panels from the leftPanel: setQuickBarPanelContents() { this.instance.disableElements(['notesPanel', 'notesPanelButton', &apos ...

javascriptpdftronpdfnet

javascript update HTML content

Hello, I am trying to call a function called changeDivHTML which passes an image. <a href="javascript:void(0)" onclick="changeDivHTML(<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'>)"> This function ad ...

javascriptinnerhtml

Sharing React components in projects

Two of my upcoming projects will require sharing components such as headers, footers, and inputs. To facilitate this, I have moved these shared components into a separate repository, which has been working well so far. In the common repository, I have set ...

javascriptreactjsnpm