itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
120 lines (94 loc) • 4.45 kB
HTML
<html>
<head>
<title>Itowns - Entwine simple loader</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">
#description {
z-index: 2;
left: 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="description">Specify the URL of a Entwine Point Tree to load:
<input type="text" id="ept_url" />
<button onclick="readEPTURL()">Load</button>
<button onclick="loadGrandLyon()">Load the Grand Lyon
dataset</button>
<div id="share"></div>
</div>
<div id="viewerDiv">
</div>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script type="text/javascript">
var debugGui = new dat.GUI();
var viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';
var view = new itowns.View('EPSG:3946', viewerDiv);
view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
var controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
debugGui.add(controls.options, 'moveSpeed', 1, 10000).name('Movement speed');
var eptLayer, eptSource;
function onLayerReady() {
var camera = view.camera.camera3D;
var lookAt = new itowns.THREE.Vector3();
var size = new itowns.THREE.Vector3();
eptLayer.root.bbox.getSize(size);
eptLayer.root.bbox.getCenter(lookAt);
camera.far = 2.0 * size.length();
var position = eptLayer.root.bbox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));
camera.position.copy(position);
camera.lookAt(lookAt);
controls.options.moveSpeed = size.length();
view.notifyChange(camera);
controls.reset();
}
function readEPTURL() {
var url = document.getElementById('ept_url').value || new URL(location.href).searchParams.get('ept');
if (url) {
loadEPT(url);
document.getElementById('share').innerHTML = '<a href="' +
location.href.replace(location.search, '') +
'?ept=' + url
+ '" target="_blank">Link to share this view</a>';
document.getElementById('ept_url').value = url;
}
}
function loadEPT(url) {
eptSource = new itowns.EntwinePointTileSource({ url });
if (eptLayer) {
view.removeLayer('ept');
view.notifyChange();
}
eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', {
source: eptSource,
crs: view.referenceCrs,
});
view.addLayer(eptLayer).then(onLayerReady);
debug.PotreeDebug.initTools(view, eptLayer, debugGui);
function dblClickHandler(event) {
var pick = view.pickObjectsAt(event, 5, eptLayer);
for (const p of pick) {
console.info('Selected point #' + p.index + ' in position (' +
p.object.position.x + ', ' +
p.object.position.y + ', ' +
p.object.position.z +
') - node ' + p.object.userData.node.id);
}
}
view.domElement.addEventListener('dblclick', dblClickHandler);
}
function loadGrandLyon() {
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
readEPTURL();
}
readEPTURL();
</script>
</body>
</html>