itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
141 lines (120 loc) • 5.89 kB
HTML
<html>
<head>
<title>Itowns - multiglobe</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<style type="text/css">
#help {
position: absolute;
top: 0;
width: 100%;
color: white;
font-size: 2em;
text-align: center;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viewerDiv"></div>
<span id="help">Press <em>Space</em> to switch globe</span>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script type="text/javascript">
/* global itowns,document,GuiTools*/
var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 35000000 };
// iTowns namespace defined here
var viewerDiv = document.getElementById('viewerDiv');
// object3ds contains references to the globes' object3d, it is used in the animator
// function to change from one globe to the other
var object3d;
var object3ds = [];
var front = 0;
// Create the first globe
object3d = new itowns.THREE.Object3D();
var view = new itowns.GlobeView(viewerDiv, positionOnGlobe, { noControls: true, object3d });
setupLoadingScreen(viewerDiv, view);
object3ds.push(object3d);
const atmosphere3D = view.getLayerById('atmosphere').object3d;
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
config.source = new itowns.WMTSSource(config.source);
var layer = new itowns.ColorLayer('Ortho', config);
view.addLayer(layer);
});
// Create a second smaller globe
object3d = new itowns.THREE.Object3D();
object3d.scale.divideScalar(3);
object3d.position.y = 10000000;
object3d.updateMatrixWorld();
const globe2 = new itowns.GlobeLayer('globe2', object3d);
object3ds.push(object3d);
// define pole texture
globe2.diffuse = new itowns.THREE.Color(0xd0d5d8);
// add globe2 to the view so it gets updated
itowns.View.prototype.addLayer.call(view, globe2);
itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(osm) {
osm.source = new itowns.TMSSource(osm.source);
var layer = new itowns.ColorLayer(osm.id, osm);
itowns.View.prototype.addLayer.call(view, layer, globe2);
});
// Globe animation
// Exchange postion and scale of globes in a 1 second animation
var t = 0;
function animator (dt, ignore) {
// "dt" is time difference in ms between this animation step and the previous one
// "ignore" is true if this is the first animation step
t = ignore ? 0 : Math.min(1, dt / 1000 + t);
object3ds[front].position.y = itowns.THREE.Math.lerp(front ? 10000000 : -10000000, 0, t);
object3ds[front].scale.setScalar(itowns.THREE.Math.lerp(0.3, 1, t));
object3ds[1 - front].position.y = itowns.THREE.Math.lerp(front ? -10000000 : 10000000, 0, 1 - t);
object3ds[1 - front].scale.setScalar(itowns.THREE.Math.lerp(0.3, 1, 1 - t));
atmosphere3D.position.y = object3ds[0].position.y;
atmosphere3D.scale.copy(object3ds[0].scale);
atmosphere3D.updateMatrixWorld(true);
object3ds[0].updateMatrixWorld(true);
object3ds[1].updateMatrixWorld(true);
if (t < 1) {
// animation is not finished, schedule a new view update
view.notifyChange(view.camera.camera3D);
} else {
// animation is finished, remove the frame requester
view.removeFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator);
}
}
// Swap globe place on 'space' key
function onKeyPress(evt) {
if (evt.keyCode == 32) {
front = 1 - front;
t = 0;
// schedule the animation
view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator);
view.notifyChange(view.camera.camera3D);
}
}
viewerDiv.focus();
viewerDiv.addEventListener('keyup', onKeyPress);
// Zoom on mouse-wheel
var onMouseWheel = function onMouseWheel(event) {
var geo = new itowns.Coordinates('EPSG:4978', view.camera.camera3D.position).as('EPSG:4326');
// WebKit / Opera / Explorer 9
if (event.wheelDelta !== undefined) {
delta = event.wheelDelta;
// Firefox
} else if (event.detail !== undefined) {
delta = -event.detail;
}
if (delta > 0) {
geo.altitude *= 0.9;
} else {
geo.altitude *= 1.1;
}
view.camera.camera3D.position.copy(geo.as('EPSG:4978'));
view.notifyChange(view.camera.camera3D);
};
viewerDiv.addEventListener('DOMMouseScroll', onMouseWheel);
viewerDiv.addEventListener('mousewheel', onMouseWheel);
</script>
</body>
</html>