Generating a 3D path using latitude and longitude coordinates in Three.js

Looking to create a pipe-like structure based on geographic coordinates, the data is in JSON format with latitude and longitude values. Here's an example of how it looks:

[
{
    "LATITUDE": "55.10185525",
    "LONGITUDE": "-76.4629527"
},
{
    "LATITUDE": "55.10181625",
    "LONGITUDE": "-76.4629827"
},
{
    "LATITUDE": "55.10185525",
    "LONGITUDE": "-76.4329527"
},
{
    "LATITUDE": "55.10181625",
    "LONGITUDE": "-76.4629827"
},
{
    "LATITUDE": "56.10185525",
    "LONGITUDE": "-77.4629527"
}

I initially tried converting these coordinates into Three.js Vector3 using this method:

function convertLatLonToVec3(lat,lon) {
lat =  lat * Math.PI / 180.0;
lon = -lon * Math.PI / 180.0;
return new THREE.Vector3( 
    Math.cos(lat) * Math.cos(lon),
    Math.sin(lat),
    Math.cos(lat) * Math.sin(lon));

This method did not work effectively for me. Are there any alternative ways to implement latitude and longitude on a 3D plane?

Answer №1

Check out Proj4js for projecting points onto a coordinate reference system.

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

Combining JavaScript files into a single JavaScript file with Angular

For my Angular 8 project, I have successfully imported Bootstrap CSS files into my styles.css file using the following code: /* You can add global styles to this file, and also import other style files */ @import "~bootstrap/dist/css/bootstrap.min.css"; @ ...

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

Remove a row from a Jquery Jtable

I am running into difficulties when trying to delete rows, and I suspect that the issue might be related to the post[id] not being properly sent. Although the delete message appears, the row is not actually deleted. Below is the snippet of my code: JAVASC ...

How to get the clean URL in AngularJS without any parameters using $location

One issue I'm facing is related to the URL structure of my application. It currently looks like this: "http://host:port/mySystem?x.system" The addition of x.system in the URL was necessary due to a legacy application requirement, but now I need the U ...

Unable to retrieve data from JSON file using Ajax request

Trying to populate an HTML table with data from an external JSON file is proving to be a challenge. Despite making an AJAX request using pure JavaScript, nothing happens when the "Test" button is clicked. Take a look at the JSON data: { "row":[ { ...

Animating progress bars using React Native

I've been working on implementing a progress bar for my react-native project that can be used in multiple instances. Here's the code I currently have: The progress bar tsx: import React, { useEffect } from 'react' import { Animated, St ...

Tips on finding the most budget-friendly item in a Vue array

I'm working with an array called item.warehouse_positions that contains various prices and IDs. I want to display only one item.id with the lowest price. How can I achieve this? <div v-for='(item, index) in item.warehouse_positions' :key= ...

Bulma Steps failing to advance to the next step despite clicking submit

I am currently working on implementing Buefy Steps in a Vue project. The Buefy steps are functioning correctly, but I am facing an issue where the 'Submit' button does not progress to the next step (e.g., from "Account" to "Profile"). App.vue: & ...

Error when using jQuery AJAX to parse JSONP callback

Take a look at this code snippet: $(function () { $.ajax({ type: "GET", url: "http://mosaicco.force.com/siteforce/activeretailaccounts", dataType: "jsonp", crossDomain: true, jsonp: "callback", error: f ...

Using Three.js to apply a texture to a ShapeGeometry

I'm facing an issue with applying a texture on a ShapeGeometry. Here's a bit of background about the problem at hand. My goal is to render an SVG path with a texture using Three.js. I've successfully rendered the path itself, but the troubl ...

I am unsuccessful in transferring the "side-panel content" to the side panel located on the main menu page

I am facing an issue where I want to pass My left and right Panel to the main menu page (dashboard), but it is not working as expected. The problem arises because the first page that needs to be declared is the login page (/ root) in my case. If I pass it ...

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

Dead keyup event using jQuery live in SignalR invocation

I am working on a sample chat application using SignalR, but I'm facing an issue with my keyup event not functioning properly. Below is the code snippet: // Keyup event for text box $(".ChatText").on('keyup', function () { if($(".ChatTe ...

Tips on using the Unix "paste" command in Node.js without the need to load entire files into memory

Implementing the basic Unix paste command in Python is straightforward, as shown in the following snippet (which currently processes two files, unlike Unix paste that can handle multiple files): def pasteFiles(file1, file2): with open(file1) as f1: w ...

VueJS Hotel Reservation Datepicker: Trouble retrieving selected check-in date using event listener

I am new to VueJS and currently working on integrating the vue-hotel-datepicker into my project. I am having trouble figuring out how to utilize the checkInChanged event listener. This is the code snippet from my template: <datepicker :startDate ...

Sending a reference to the event object within a JavaScript function

There are times when we need to use the event object in JavaScript. Below is an example of how we can pass the event: function test(e){ console.log(e); e.preventDefault(); console.log("You are not going to redirect"); } HTML <a href="www. ...

Replacing all backslashes with forward slashes cannot be done using just one quotation mark; the process involves changing each ""

Struggling to switch all backward slashes with forward slashes " from \ to / . Experimented with numerous possibilities but without success. var a = 'images\1572714983295\10423479\401891269961412\82824649\n.jpg'; ...

a user-friendly database solution for storing data in HTML 5 and Google Drive

Greetings, I am currently faced with the following dilemma: As I work on my angular 2 application, I find myself needing to save certain data. Personally, I have a preference for saving data in JSON format. Here is the scenario: Imagine a todo list where ...

Obtain a numerical output from a selection of numbers

I am facing a simple problem that I can't solve due to my lack of knowledge and have not been able to find any solution online. What I want to achieve is: Create a "value 1" from an array of integers. Generate a random "value 2". Check if the rando ...

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...