ThreeJS로 3디지구에 포인트 찍고 정보 현시기능 정보
JavaScript ThreeJS로 3디지구에 포인트 찍고 정보 현시기능본문
<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>
!-->
추천
0
0
댓글 0개