potree
Version:
WebGL point cloud viewer - WORK IN PROGRESS
149 lines (116 loc) • 4.94 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Potree Viewer</title>
<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../libs/perfect-scrollbar/css/perfect-scrollbar.css">
<link rel="stylesheet" href="../libs/openlayers3/ol.css" type="text/css">
<link rel="stylesheet" href="../libs/spectrum/spectrum.css" type="text/css">
</head>
<body>
<script src="../libs/jquery/jquery-3.1.1.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.js"></script>
<script src="../libs/other/stats.min.js"></script>
<script src="../libs/other/BinaryHeap.js"></script>
<script src="../libs/tween/tween.min.js"></script>
<script src="../libs/d3/d3.js"></script>
<script src="../libs/proj4/proj4.js"></script>
<script src="../libs/openlayers3/ol.js"></script>
<script src="../libs/i18next/i18next.js"></script>
<script src="../build/potree/potree.js"></script>
<!--<script src="../src/viewer/sidebar.js"></script>-->
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<script src="../libs/plasio/js/laslaz.js"></script>
<script src="../libs/plasio/vendor/bluebird.js"></script>
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
<div id="potree_render_area"></div>
<div id="potree_sidebar_container"> </div>
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
viewer.setEDLEnabled(true);
viewer.setFOV(60);
viewer.setPointBudget(1*1000*1000);
viewer.loadSettingsFromURL();
viewer.setBackground("skybox");
viewer.loadGUI(() => {
viewer.setLanguage('en');
$("#menu_annotations").next().show();
viewer.toggleSidebar();
});
viewer.setDescription("");
let sceneSG = new Potree.Scene();
let sceneLion = new Potree.Scene();
viewer.setScene(sceneSG);
// Sorvilier point cloud in scene 1
Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", function(e){
sceneSG.addPointCloud(e.pointcloud);
sceneSG.view.position.set(590030, 231767, 1007);
sceneSG.view.lookAt(new THREE.Vector3(589844, 231376, 710));
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
sceneSG.addAnnotation([589847.17, 231436.78, 892.60], {
"cameraPosition": [590034.03, 231814.02, 961.68],
"cameraTarget": [589847.17, 231436.78, 742.60],
"title": "Sorvilier"
});
sceneSG.addAnnotation([589850.15, 231300.10, 770.94], {
"title": "Trees",
"description": `Point cloud of a small section in Sorvilier, Switzerland. <br>
Courtesy of sigeom.sa`
});
sceneSG.addAnnotation([590043.63, 231490.79, 740.78], {
"title": "About Annotations",
"cameraPosition": [590105.53, 231541.63, 782.05],
"cameraTarget": [590043.63, 231488.79, 740.78],
"description": `<ul><li>Click on the annotation label to move a predefined view.</li>
<li>Click on the icon to execute the specified action.</li>
In this case, the action will bring you to another scene and point cloud.</ul>`,
actions: [{
"icon": Potree.resourcePath + "/icons/goto.svg",
"onclick": function(){
viewer.setScene(sceneLion);
}
}]
});
sceneSG.addAnnotation([589621, 231437, 784], {
"cameraPosition": [589585.81, 231463.63, 804.00],
"cameraTarget": [589625.86, 231439, 775.38],
"title": "About Annotations 2",
"description": `
Suitable annotation positions and views can be obtained by
looking up the current camera position and target in the "Scene" panel,
or by evaluating following lines in your browser's developer console:<br><br>
<code>viewer.scene.view.position</code><br>
<code>viewer.scene.view.getPivot()</code><br>
`
});
});
// Lion point cloud in scene 2
Potree.loadPointCloud("../pointclouds/lion_takanawa/cloud.js", "lion", function(e){
sceneLion.addPointCloud(e.pointcloud);
sceneLion.view.position.set(4.15, -6.12, 8.54);
sceneLion.view.lookAt(new THREE.Vector3(0, -0.098, 4.23));
sceneLion.addAnnotation([0.72, -1, 8], {
"title": "Chinese Guardian Lion",
"actions": [{
"icon": Potree.resourcePath + "/icons/goto.svg",
"onclick": function(){
viewer.setScene(sceneSG);
}
}]
});
});
</script>
</body>
</html>