Seeking a method to create a straight path connecting two points on a sphere using Three.js

My app, a flight tracker, is in need of drawing a line between two points (such as cities) on a sphere (representing the Earth) along its surface (using the great circle route) with Three.js.

I am considering 2 different approaches - (a) creating a Three.js 'Line' by manually calculating and setting a sufficient amount of points, or (b) incorporating the lines into the texture used for the sphere after loading it but before applying it as a texture.

There are potential challenges with both methods (and I am unsure if option b is currently feasible in Three.js) - does anyone have a better solution or opinion on this matter?

Thank you in advance.

Answer №1

A plethora of particles are combined to form a distinctive dotted trail.

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

The dependency path in the package.json file contains all the necessary files

I recently developed a JavaScript package and here is the configuration in my package.json: { "name": "packageName", "version": "1.0.0", "description": "Description of the package", " ...

Utilize external URL in trigger.io's custom UIWebView component

I'm in the process of transitioning my existing backbone application, designed for a native iOS UIWebView, over to trigger.io in order to utilize its image caching and camera access features. The goal is to make this migration quickly and efficiently. ...

Importing a library dynamically in Next.js

I'm currently facing a challenge in dynamically importing a library into one of my next.js projects. The issue arises when I don't receive the default export from the library as expected. Initially, I attempted to import it the next.js way: impo ...

Exploring the method of retrieving nested JSON objects in Angular

When my API sends back a JSON response, my Angular application is able to capture it using an Interface. The structure of the JSON response appears as follows: { "release_date":"2012-03-14", "genre_relation": ...

Ajax modal login feature refuses to close

Struggling to close a modal login box? Everything seems to be functioning correctly with the modal screen and ajax features, but I'm facing issues when it comes to closing the modal form. The code snippet looks like this: HTML: <a href="#" cla ...

Java program to extract substring from related strings

Within my JavaScript code, I am dealing with two string arrays: var names = [name1, name2, name3, name4]; var values = [value1, value2, value3, value4]; To send these array values to the backend, I have created strings as shown below: var nameString = " ...

Is there a way to position my character at the exact center of my mouse click coordinates instead of the top left corner?

In my game, players can click on a 2D HTML5 canvas to set a point for their character to move to. However, I've noticed that when I click, the character appears in the lower right corner of where my mouse is clicked. After some research, I realized th ...

The Facebook API's JavaScript SDK displays the status as 'connected' even after logging out

As I navigate my AngularJS website, I am utilizing the Facebook SDK for JavaScript to facilitate registration forms. After successfully logging in and retrieving the necessary data from my first attempt, I proceeded to register and eventually logged out of ...

Different Methods of Joining Tables in SQLike

Struggling with creating a two-level JOIN in SQLike, currently stuck at the one level JOIN. The source tables are JSONs: var placesJSON=[{"id":"173","name":"England","type":"SUBCTRY"},{"id":"580","name":"Great Britain","type":"CTRY"},{"id":"821","name":" ...

The use of Angular's ng-pattern leads to disruption in the binding process

Here is the form I am working with: <div class="panel-group"> <label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label> <input id="url" size="50" ng-mod ...

Updating JavaScript files generated from TypeScript in IntelliJ; encountering issues with js not being refreshed

Struggling with a puzzling issue in IntelliJ related to the automatic deployment of changes while my server is running (specifically Spring Boot). I've made sure to enable the "Build project automatically" option in my IntelliJ settings. Whenever I ...

Examining the appearance of react-hot-toast using jest testing

As I work on my application, I am facing a challenge in writing a test for the appearance of a react-hot-toast. Whenever a specific button is clicked, this toast pops up on the screen and disappears after a brief moment. Despite being visible both on the s ...

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

Excuse my lack of experience, but I am currently delving into the world of react-redux and trying to grasp the concepts as I progress. Situation: In my main component within a react-redux application, I have the following snippet at the end: function map ...

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

Utilizing the Google Maps API to display markers within a custom-drawn polygon

My goal is to display markers inside a drawn polygon on a Google Map. For example, when a user draws a polygon on the map, I want to show markers that fall within that polygon. Specifically, I am referring to drawing polygons. I have also attached a screen ...

Dealing with file downloads while using JWT-based authentication protocols

Currently, I am developing a web application using Angular that utilizes a JWT token for authentication. This means that every request must contain an "Authentication" header with all the required information. While this method works well for REST calls, ...

The accuracy of raycaster intersection is compromised when vertices are moved

Having trouble with raycaster.intersectObjects() after moving vertices of a geometry. The intersection is only happening with the original area, not the newly modified geometry. Despite the object looking correct in the view, none of the attempted solution ...

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

My code is incomplete and not functioning as expected. $.get("museums.php",function(data,status){ var response=''; //console.log(data); var json = $.parseJSON(data); museums = json.museums; for(let m in museums) { $("#na ...

What are some of the techniques for customizing the DOM generated by material-ui in ReactJS?

Is there a way to style the dynamically created DOM elements from material-ui? I'm currently using GridListTileBar, which generates a DOM structure like this for its title property. <div class="MuiGridListTileBar-title-29" data-reactid=".0.3.0.$3 ...

Troubleshooting JavaScript Object allocation problem

As someone who is not an expert in JavaScript, I have a question that may seem silly. Let's say I have the following snippet of HTML: <div> <script type="text/javascript"> var variable_2 = new SomeObject(); </script ...