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/