itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
104 lines (81 loc) • 4.16 kB
HTML
<html>
<head>
<title>Itowns - LAZ drag and drop</title>
<script type="importmap">
{
"imports": {
"itowns": "../dist/itowns.js",
"debug": "../dist/debug.js",
"dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
"GuiTools": "./jsm/GUI/GuiTools.js",
"LoadingScreen": "./jsm/GUI/LoadingScreen.js",
"itowns_widgets": "../dist/itowns_widgets.js",
"three": "https://unpkg.com/three@0.170.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
}
}
</script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viewerDiv">
<div id="description">Drag and drop a LAS/LAZ file</div>
</div>
<script type="module">
import GuiTools from 'GuiTools';
import setupLoadingScreen from 'LoadingScreen';
import * as THREE from 'three';
import * as itowns from 'itowns';
var viewerDiv = document.getElementById('viewerDiv');
var view = new itowns.View('EPSG:3946', viewerDiv);
view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
var controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
var fileReader = new FileReader();
var stack = [];
function addFiles(event, files) {
event.preventDefault();
for (var i = 0; i < files.length; i++) {
stack.push(files[i]);
}
fileReader.onload = function onload(e) {
var data = e.target.result;
itowns.LASParser.parse(data, {}).then(function _(geometry) {
if (stack.length > 0) {
fileReader.readAsArrayBuffer(stack.shift());
}
var material = new itowns.PointsMaterial();
var points = new THREE.Points(geometry, material);
points.frustumCulled = false;
points.matrixAutoUpdate = false;
points.updateMatrix();
view.scene.add(points);
points.updateMatrixWorld(true);
var lookAt = new THREE.Vector3();
var size = new THREE.Vector3();
geometry.boundingBox.getSize(size);
geometry.boundingBox.getCenter(lookAt);
view.camera3D.far = Math.max(2.0 * size.length(), view.camera3D.far);
var position = geometry.boundingBox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));
view.camera3D.position.copy(position);
view.camera3D.lookAt(lookAt);
controls.options.moveSpeed = size.length();
view.notifyChange(view.camera3D);
controls.reset();
});
};
fileReader.readAsArrayBuffer(stack.shift());
}
document.addEventListener('dragenter', function _(e) { e.preventDefault(); }, false);
document.addEventListener('dragover', function _(e) { e.preventDefault(); }, false);
document.addEventListener('dragleave', function _(e) { e.preventDefault(); }, false);
document.addEventListener('drop', function _(e) { addFiles(e, e.dataTransfer.files); }, false);
document.addEventListener('paste', function _(e) { addFiles(e, e.clipboardData.files); }, false);
window.view = view;
window.itowns = itowns;
window.THREE = THREE;
</script>
</body>
</html>