ThreeJS로 3디지구에 포인트 찍고 정보 현시기능 > 개발자팁

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

1966994471_1693881849.7141.jpg

  
<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>

 

데모링크: shangeMoonLandings (codepen.io)

추천
0

댓글 0개

전체 931
개발자팁 내용 검색 JavaScript에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT