earthjs
Version:
D3 Earth JS using SVG, Canvas & THREE js, build with some plugins.
60 lines (57 loc) • 2.26 kB
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="../css/earthjs.css">
<script type='text/javascript' src="../js/d3.min.js"></script>
<script type='text/javascript' src='../js/three.min.js'></script>
<script type='text/javascript' src="../js/topojson.min.js"></script>
<script type='text/javascript' src='../js/earthjs.js'></script>
</head>
<body>
<div class="input-area">
<input id="frm" type="range" min="1" max="1.5" step="0.01" value="1.5"/><br>
<input id="chn" type="range" min="0.1" max="1.8" step="0.01" value="1.46"/>
</div>
<svg id="earth-js"/>
<canvas id="three-js"></canvas>
<canvas class="ej-canvas"></canvas>
<script>
const {offsetWidth, offsetHeight} = d3.select('body').node();
const g = earthjs({width: offsetWidth, height: offsetHeight, padding:5})
.register(earthjs.plugins.inertiaPlugin())
.register(earthjs.plugins.threejsPlugin())
.register(earthjs.plugins.autorotatePlugin())
.register(earthjs.plugins.oceanThreejs())
.register(earthjs.plugins.graticuleThreejs())
.register(earthjs.plugins.world3dThreejs('../d/world.geometry.json','../globe/gold.jpg'))
.register(earthjs.plugins.worldThreejs('../d/world-110m.json'));
g.world3dThreejs.ready = function(err, json) {
g.world3dThreejs.data({
'United States': json['United States'],
'Canada': json['Canada'],
'Mexico': json['Mexico']
})
}
let c,t,o;
g.ready(function(){
g.create();
c = g.world3dThreejs.data()['United States'].mesh;
t = g.worldThreejs.sphere();
o = g.oceanThreejs.sphere();
c.scale.set(1.46,1.46,1.46);
t.scale.set(1.5,1.5,1.5);
o.material.transparent = true;
})
d3.select('#frm').on('input', function() {
const v = this.value;
console.log('Frame:',v);
t.scale.set(v,v,v);
})
d3.select('#chn').on('input', function() {
const v = this.value;
console.log('US:',v);
c.scale.set(v,v,v);
})
</script>
</body>
</html>