Hey there, I have a little coding challenge that I could use some assistance with. I'm attempting to create a globe using lat and long coordinates but I seem to be stuck on obtaining the geographic coordinates.
Here is the code snippet I've been working on:
// Your JavaScript code goes here
I was wondering if it's possible to achieve this task using ThreeJS and if you happen to know how to go about it?
Thank you so much in advance for any guidance you can provide!
Whenever you click on a spinning globe, the intersections are shown in world coordinates. This means that if you repeatedly click on the same spot while the globe is rotating, you will likely get the same intersection point each time.
However, it's essential to note that these hit points are determined by the sphere's geometry. Therefore, a low-poly sphere may not return a position that corresponds perfectly to a lat/lon position as expected with a flawless sphere.
To achieve more accurate results, there are a few additional steps you can take:
Create a mathematically perfect representation of your globe using a Sphere.
The Raycaster tool is handy for setting up raycasting effortlessly. You can also use Raycaster.ray (Ray) for manual steps.
For instance, apply Ray.intersectSphere on your perfect sphere to determine the precise intersection point.
The reason you were consistently hitting the same point is that the intersection was in world coordinates. To convert to local coordinates, use Object3D.worldToLocal to convert the global hit point into a local one (note that this method changes the Vector3).
Select a point on your globe representing the intersection of the equator and prime meridian (0, 0). If north is +Y, your origin could be defined as
new Vector3( 0, 0, sphere.radius )When calculating longitude, eliminate the Y component from the hit vector (hit.y = 0), set its length to the sphere radius (hit.setLength( sphere.radius )), then utilize Vector3.angleTo to find and convert the angle to degrees. The X component signifies the East/West part of your value.
As for latitude, create a copy of the hit vector minus the Y component. Adjust its length to the sphere's radius and calculate the angle between the two vectors with angleTo. Convert it to degrees, where the Y value determines the North/South aspect of your result.
While normalized vectors can be used for comparisons, visualizing the process with surface points on the sphere seems more straightforward.
In my PHP code, I have the following loop: foreach ($sid as $key => $value) { $sql = " a sql query "; $vehicle->rowQuery($sql); $numRows = $vehicle->rows; while ( $data = $vehicle->result->fetch_assoc()) { $ ...
There are three HTML select tags on my page. I want these three select tags to function as follows: When I change selectA, selectB should automatically update based on the selection in selectA. Similarly, when an option in selectB is created, changing se ...
I attempted to search the JavaScript documentation for MongoDB, but I was unable to find any information at this link: Unfortunately, it seems like there is no documentation available for the datastore items that are returned.... Is there a different sou ...
Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...
I recently incorporated styled components into my React project, but I'm encountering difficulty using multiple props to define styles in my components. Here's the crux of the problem: const sizes = { lg: css` width: 200px; h ...
I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...
In my form, I have two phone number fields - one for mobile phone and the other for home phone. I need to make only one of them mandatory. Can someone please advise me on how to accomplish this? ...
Here is the code snippet I have been working on: ...<script> function adjustElementSize() { var newSize = window.innerWidth - 600; document.getElementById("spin").style.width = newSize + "px"; document.getElementById("spin").style.height = newSize + ...
I have a Cypress command with a parameter that I want to restrict so it only accepts certain values. For example, I want the columnValue to be limited to 'xxx', 'yyy', or 'zzz'. How can I achieve this? Cypress.Commands.add( ...
Is there a way to utilize the ng-hide directive based on the value selected in a dropdown menu? Specifically, I am looking to display #additional-option if option C is chosen from the dropdown list. <div class="form-group"> <label class="co ...
I am facing an issue with a dynamic dropdown field in my update form modal/popup within Laravel 5.2. The dropdown list works only in the first row, and when I add more dropdowns, the lists do not show up because I am unsure how to implement foreach in the ...
I recently integrated the Chonky library into my application to build a file explorer feature. One challenge I am facing is figuring out how to select a file and retrieve its unique ID when the user double clicks on it. const [files, setFiles] ...
file: /config/index.js; var config = { local: { mode: 'local', port: 3000 }, staging: { mode: 'staging', port: 4000 }, production: { mode: 'production', port ...
I'm attempting to create a unique binding handler that applies role-based access to fields on a page. This custom handler uses the values of other observables from the viewModel to enable or disable input controls based on certain conditions. However ...
Let's start by addressing the current state of my project on the /develop branch, which is all in order with passing tests. To improve code readability, I decided to create a branch specifically for cleaning up the imports and implementing aliases in ...
Instead of using erb, I am using haml. So my code looks something like this: $("<%= escape_javascript(render @user) %>").appendTo("#users"); Unfortunately, the code mentioned in is not working for me. Any suggestions or ideas on how to make it w ...
I'm working on a project to showcase solar data in a dynamic way using a gltf imported model in three.js. The goal is to assign different solid colors to various segments of the model and have the ability to toggle these on and off. My main challenge ...
I'm in the process of retrieving the share count for Pinterest and the following code is functioning effectively: var pi_like_count = 0; PIUrl = "https://api.pinterest.com/v1/urls/count.json?url=" + url1 + "&format=jsonp" + '&callback=? ...
Looking to implement portrait and landscape views for tablets using the styles object in Material UI. const tabletStyles = theme => ({ root: { padding: theme.spacing.unit, [theme.breakpoints.up('md')]: { backgroundColor: theme ...
Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...