Three.js globe experiencing issues with splines arc functionality

I have been experimenting with mapping arcs around a three.js globe, following some examples. I am close to getting it to work but I am struggling with the calculations and the resulting projection appears to be incorrect. If anyone could review my code and point out where I might be going wrong, that would be really helpful. Thank you.

import oHoverable from 'o-hoverable';
import d3 from 'd3';
import oHeader from 'o-header';
import THREE from 'three.js';


// var OrbitControls = require('three-orbit-controls')(THREE);
// console.log("orbitControls=",OrbitControls);



oHoverable.init(); // makes hover effects work on touch devices

document.addEventListener('DOMContentLoaded', function () {
  oHoverable.init(); // makes hover effects work on touch devices

  var dataset = spreadsheet.data;
  console.log(dataset);

    ...

The data sample being used is as follows and is loaded elsewhere: ftlabel,imfcode,lat,lng Afghanistan,512,33,66 Albania,914,41,20 Algeria,612,28,3 Angola,614,-12.5,18.5 Argentina,213,-34,-64 Armenia,911,40,45 Aruba,314,12.5,-69.97 Australia,193,-25,135 Austria,122,47.33,13.33 Azerbaijan,912,40.5,47.5 Bahamas,313,24,-76 Bahrain,419,26,50.5 Bangladesh,513,24,90 Barbados,316,13.17,-59.53 Belarus,913,53,28 Belgium,124,50.83,4 Belize,339,17.25,-88.75 Benin,638,9.5,2.25 Bermuda,319,32.33,-64.75 Bolivia,218,-17,-65 Bosnia and Herzegovina,963,44.25,17.83 Brazil,223,-10,-55 Brunei,516,4.5,114.67 Bulgaria,918,43,25 Burkina Faso,748,13,-2 ... Cote d'Ivoire,662,8,-5 Croatia,960,45.17,15.5 Cuba,928,22,-79.5

Answer №1

The math calculations have been optimized, but the main issue was passing the longitude and latitude values in the wrong order to the function. After correcting this, the code is now functional and appears as follows:

import oHoverable from 'o-hoverable';
import d3 from 'd3';
import oHeader from 'o-header';
import THREE from 'three.js';

oHoverable.init(); // enables hover effects on touch devices

document.addEventListener('DOMContentLoaded', function () {
  oHoverable.init(); // enables hover effects on touch devices

  var dataset = spreadsheet.data;
  
  var startLat = 38;
  var startLon = -100;
  var endLon = 0;
  var endLat = 0;
  var posX = 200;
  var posY = 600;
  var posZ = 1800;
  var width = document.getElementById('main').getBoundingClientRect().width;
  var height = 600;

  ...

  render();

  function render() {
    ...
  }

});

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 perplexing simplicity of closure

Currently, I am endeavoring to enhance my knowledge of JavaScript closures. Let's consider the following two scenarios in Node.js: function A(){ console.log(data); //this will result in a null pointer } module.exports = function(data){ re ...

What is the best way to insert a string into a function using PHP in this scenario?

I'm currently working on enhancing a plugin called buddypress first-letter-avatar. It currently assigns avatars based on the username's first letter, but I'd like to customize it further. My goal is to also take into account the user's ...

The callback information is not being properly identified

I need help with deleting an entire row when the Delete button is clicked using jQuery. Here is my current approach: UPDATE: I have made final adjustments to the click function: $(document).on('click', '.delete-assignment',function () ...

Customize Material-UI FAB Hover Color

While working on my project, I encountered an issue with a floating action button that contains an SVG icon nested underneath it. Even though the SVG icon is not in the children prop of the FAB, hovering over the FAB or the SVG icon causes the FAB to chang ...

A guide on dynamically sending data to a PHP script when an input is changed and displaying the results in a

I am trying to implement a feature where the data inputted into a text field is sent to posttothis.php and then the result is displayed in a content div. However, I am encountering difficulties in making it work. testscript.html <html> <head> ...

Unable to call an object that may be 'undefined': Utilizing a function with a return object that includes asynchronous functions as properties

I have a function exported in my adapter.ts file: import type { Adapter } from "@lib/core/adapters"; export default function MyAdapter (): Adapter { return { async createUser (user: User) { ... }, async findUserByEmail (email ...

Leverage OpenID Connect in Azure Active Directory with authentication code flow

Currently, I am developing an authentication system for a NodeJS and Express web application that requires users to be directed to Microsoft SSO. To achieve this, I am utilizing passport-azure-ad and OpenID Connect. My main query is - Is it mandatory to ...

Generated Form Data Automatically

Seeking advice on achieving a specific functionality in ASP.NET Web Form that is similar to the AutocompleteExtender, but requires more flexibility. Here is what I aim to accomplish: There are 2 TextBox fields on the form: CompanyName and CompanyRef (a u ...

Aligning the canvas resolution to match the video resolution for superimposition purposes

Within a div, I have both a canvas and a video element: <div id="videos"> <canvas id="my-canvas"></canvas> <video id="remote-video" autoplay></video> </div> Below is the css styling for both elements: #my-canv ...

The module 'AppModule' has unexpectedly declared a value of 'Component' that was not anticipated

Recently, I've been working on transitioning my application to the new angular2 webpack rc5 setup. I have successfully generated the app module using ng cli migration. However, I am facing an issue while trying to integrate a component from my own li ...

Ajax disregards the endless scroll material that has been injected into the DOM

I am currently facing an issue with loading posts on a page using foreach and the paginate function in Laravel. I have set up infinite scrolling through the posts, with each post having its own unique form. The first posts that load without JavaScript scro ...

What is the best way to transform an array of lists into a neatly organized state?

I recently received a list of breweries from an API call and I am trying to format it into my React state container. Here is what I have so far: state = { breweries: [ {name: Foo, long: 45, lat: -39.239}, ...

What is the best way to incorporate client and server components in nextJS when params and query parameters are required?

I'm having difficulty understanding the client/server component concept in nextJS 14 (using app router). Below is an example page illustrating how I typically structure it and what components are required: I need to extract the id value from params ...

Send information to a Google form using AJAX requests

I have encountered an issue while attempting to send data via AJAX to a Google form. Despite receiving a success message with a statusCode of 0, the data does not show up in the form: var dat={ "entry.529474552" :"data1", "entry.1066559787": "name1"}; pos ...

Tips for parsing JSON using JavaScript

I am looking to iterate through a JSON object that looks like {"key1":"val1","key2":"val2","key3":"val3"} in a loop. Here is my attempt: var inobj = '[{"key1":"val1","key2":"val2","key3":"val3"}]'; var obj = eval(inobj); for (var i = 0; i ...

How can I display SQL results in a Jade page using Node, Express, and MySQL?

My application built with Node.js and Express is connected to a MySQL database for monitoring purposes. The code structure is as follows: In the Node file: app.get('/banners', function(req,res){ connection.query("SELECT * FROM banner_store_ ...

Error: Attempting to access the 'firstChild' property of a null object when trying to display a street view panorama with Vue.js

Looking to integrate a street view panorama using the Google Maps API in my VueJS project. I followed the documentation provided by Google maps here, and here is the basic template: <div id="map"></div> <div id="pano"></div> Her ...

Pinterest's "Pin it" button causing issues with the 'back' function in Internet Explorer

Recently, I discovered a problem with the "Pin it" button for Pinterest in Internet Explorer (v9 at least). It seems that this button is causing issues with the 'back' functionality in the browser. When right-clicking on it, an entry like '& ...

ReactJS Material-UI Tooltip and Popper overlapping issue

How can I make the MUI tooltip appear beneath the MUI Popper, with the popper overlapping the tooltip? Is there a way to modify the z-index for only a specific portion of the elements without affecting the global styles when using external CSS? Here is a ...

Improving efficiency for handling a vast number of inputs in React applications

Dealing specifically with Material UI, I am faced with the challenge of rendering a large number of inputs (more than 100) while effectively managing global state. Performance issues arise when using the Material UI <TextField /> component, with noti ...