ThreeJS로 3디지구에 포인트 찍고 정보 현시기능

[code]  

<script src="//unpkg.com/d3-array"></script>
  <script src="//unpkg.com/d3-scale"></script>

  <script src="//unpkg.com/three"></script>
  <script src="//unpkg.com/globe.gl"></script>
  <!--<script src="../../dist/globe.gl.js"></script>-->

<rssapp-ticker id="WnIWA7UzVTCyLaaW"></rssapp-ticker><script src="https://widget.rss.app/v1/ticker.js" type="text/javascript" async></script>

<div id="globeViz"></div>
<script>

  const colorScale = d3.scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);

  const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions

  const elem = document.getElementById('globeViz');
  const moon = Globe()
    .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
    .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
    .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
    .showGraticules(true)
    .showAtmosphere(true) // moon has no atmosphere
    .labelText('label')
    .labelSize(1.7)
    .labelDotRadius(0.4)
    .labelDotOrientation(d => labelsTopOrientation.has(d.label) ? 'top' : 'bottom')
    .labelColor(d => colorScale(d.agency))
    .labelLabel(d =>
                `
        <div><b>${d.label}</b></div>
        <div>${d.agency} - ${d.program} Program</div>
        <div>Landing on <i>${new Date(d.date).toLocaleDateString()}</i></div>
      `)
    .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();  
 

</script>

[/code]

데모링크: shangeMoonLandings (codepen.io)