Setting the location of html markers using latitude longitude from a json file

Questions
, ,
1

I’ve copied the code from Globe with markers and label: thoughts, ideas, approaches, solutions - Resources - three.js forum (threejs.org) to create my own 3d globe that displays html news widgets, I want to display the news widgets for each region of the world, I already have a json file containing the latitude + longitude of each country, I just need to implement it into my code when setting the position of the markers, I’ve tried using

  fetch('./country_codes.json').then(r => r.json()).then(countryLocations => {
  dummy.position(countryLocations);
});

but I get the console message: ‘Uncaught (in promise) TypeError: dummy.position is not a function’.
I am unsure how to get the code to read the json file and set the latitude and longitude of each marker based on these coordinates, any advice would be appreciated.

here is a link to an editable version of my code: Glitch :･ﾟ✧

Screenshot 2022-12-13 at 14.58.18
Screenshot 2022-12-13 at 14.58.181836×1334 111 KB

2

This is a pretty straight explanation.
.position is a property of Vector3.
If you want to set values to it, use .set() or .copy() (those methods of Vector3), thus, dummy.position.set( x, y, z ); or dummy.position.copy( vector3 );

3

Ok thanks, I set the position to dummy.position.set( 0.6, 1, 0.5 );
but nothing is showing up on the globe?

Screenshot 2022-12-19 at 09.32.49
Screenshot 2022-12-19 at 09.32.491459×776 90.8 KB

4

Could you answer, for yourself in the first place, what are you doing with lines:

for (let i = 0; i < markerCount; i++) {
    fetch('./country_codes.json').then(r => r.json()).then(countryLocations => {
      dummy.position(countryLocations);
    });
    dummy.position.set( 0.6, 1, 0.5 );
...
}

Inside of the for-loop you fetch locations (possibly, of lat and lon, and it’s in an array), setting position with the wrong syntax, then re-setting the position with constant values. Any explanation for that?

5

With the fetch I was trying to set the position of the markers using the json file, I will comment it out since I am not using it

6

Okay, let’s look at this line:

dummy.position.set( 0.6, 1, 0.5 );

You set the same position to all markers.
And highly likely it’s simply inside of the sphere of globe. :thinking:

7

yeah haha didnt realise that until I tried out the code in codepen on your original model which was transparent, anyway its fixed now, all I had to do was use setFromSphericalCoords: dummy.position.setFromSphericalCoords( rad,1.2,0);