2

What I am asking is similar to Can I serve RSS in JSON? but I am not sure he is trying to achieve the same thing as me. I want to create a globe news app where a user can hover over different countries on a 3D globe and they can see the top news stories from the country that day, I am using three js’ globe gl for the 3D globe and the country labels, I have found some good news widgets I want to embed under each country label: https://rss.app/feed/GtCHIcNstmLwXE13 but data for the countries is in a json file and I am not sure if I can put an rss embed link into a json file, is this possible? Here is an editable example of what I have made so far: https://codepen.io/forerunrun/pen/YzayQbg ${d.agency} - ${d.program} Program Landing on ${new Date(d.date).toLocaleDateString()}. `) .onLabelClick(d => window.open(d.url, '_blank')) (elem);

         fetch('https://shange-             fagan.github.io/globe.news/moon_landings.json') // make the             request to fetch             https://raw.githubusercontent.com/eesur/country-codes-lat-long/e20f140202afbb65addc13cad120302db26f119a/country-codes-lat-long-alpha3.json

        //              fetch('https://raw.githubusercontent.com/eesur/country-codes-lat-long/e20f140202afbb65addc13cad120302db26f119a/country-codes-lat-long-alpha3.json')
              .then(r => r.json()) //then get the returned json request header if and when the request value returns true
           .then(landingSites => { // then use the request result as a callback
            console.log(landingSites)
              //              moon.labelsData(landingSites.ref_country_codes);
             moon.labelsData(landingSites);
            console.log(moon.labelLabel)

             // custom globe material
              const globeMaterial = moon.globeMaterial();
             globeMaterial.bumpScale = 10;
new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-water.png', texture => {
  globeMaterial.specularMap = texture;
  globeMaterial.specular = new THREE.Color('grey');
  globeMaterial.shininess = 15;
});

setTimeout(() => { // wait for scene to be populated (asynchronously)
  const directionalLight = moon.scene().children.find(obj3d => obj3d.type === 'DirectionalLight');
  directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
});
  
         }); 

        //moon.controls().autoRotate = false;
         //moon.controls().autoRotateSpeed = 0.85;

          //const animate = () => {
              //requestAnimationFrame(animate);
      //moon.rotation.y += 0.01;
          //}

          //animate(); 

ignore the current labels on the 3D globe they are just locations of different moon landing sites as I used the https://globe.gl/example/moon-landing-sites/index.html Example as the basic structure for my project

Any advice would be greatly appreciated.

Edit: here is a link to the live example and repo on github incase you can’t see all the files being used I.e json files- in the code pen example: repo: https://github.com/Shange-Fagan/globe.news GitHub pages live example: https://shange-fagan.github.io/globe.news/

LJᛃ
  • 7,655
  • 2
  • 24
  • 35
shange
  • 77
  • 7

0 Answers0