bill
/
potree-sdk


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
							<!DOCTYPE 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/openlayers3/ol.css">
	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
	

	<style>
	
	#potree_toolbar{
		position: absolute; 
		z-index: 10000; 
		left: 100px; 
		top: 0px;
		background: black;
		color: white;
		padding: 0.3em 0.8em;
		font-family: "system-ui";
		border-radius: 0em 0em 0.3em 0.3em;
		display: flex;
	}

	.potree_toolbar_label{
		text-align: center;
		font-size: smaller;
		opacity: 0.9;
	}

	.potree_toolbar_separator{
		background: white;
		padding: 0px;
		margin: 5px 10px;
		width: 1px;
	}
	
	</style>
</head>

<body>
	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
	<script src="../libs/spectrum/spectrum.js"></script>
	<script src="../libs/jquery-ui/jquery-ui.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="../libs/jstree/jstree.js"></script>
	<script src="../build/potree/potree.js"></script>
	<script src="../libs/plasio/js/laslaz.js"></script>
	<script src='../libs/sql.js/sql-wasm.js'></script>
	<script src='../libs/geopackage/geopackage.js'></script>

	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
		<div id="potree_render_area">
			<div id="potree_toolbar"></div>
		</div>
		<div id="potree_sidebar_container"> </div>
	</div>
	
	<script type="module">

	import * as THREE from "../libs/three.js/build/three.module.js";
	
		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
		
		viewer.setEDLEnabled(false);
		viewer.setFOV(60);
		viewer.setPointBudget(1_000_000);
		viewer.loadSettingsFromURL();
		viewer.setBackground("skybox");
		
		viewer.loadGUI(() => {
			viewer.setLanguage('en');
			$("#menu_tools").next().show();
			//$("#menu_scene").next().show();
			//viewer.toggleSidebar();
		});

		const elevationRange = [730, 790];
		
		Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "Sorvilier", e => {
			const scene = viewer.scene;
			const pointcloud = e.pointcloud;
			
			const material = pointcloud.material;
			material.size = 1;
			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
			material.shape = Potree.PointShape.SQUARE;
			material.elevationRange = elevationRange;
			
			scene.addPointCloud(pointcloud);
			
			scene.view.setView(
				[590144.208, 231895.191, 1077.020],
				[589800.000, 231432.852, 756.242],
			);

			//viewer.fitToScreen();
		});

	</script>

	<script type="module">

	import * as THREE from "../libs/three.js/build/three.module.js";
	
	// 1: define html of toolbar first 
	// 2: then populate with content and actions 
	//
	// Following files can be used as references on how to add certain functionality to the toolbar:
	// - sidebar.html
	// - sidebar.js
	// - PropertiesPanel.html and its dependencies (DistancePanel, ProfilePanel, ...)
	// 

	// HTML
	const elToolbar = $("#potree_toolbar");
	elToolbar.html(`
		<span>
			<div class="potree_toolbar_label">
				Attribute
			</div>
			<div>
				<img name="action_elevation" src="${Potree.resourcePath}/icons/profile.svg" class="annotation-action-icon" style="width: 2em; height: auto;"/>
				<img name="action_rgb" src="${Potree.resourcePath}/icons/rgb.svg" class="annotation-action-icon" style="width: 2em; height: auto;"/>
			</div>
		</span>

		<span class="potree_toolbar_separator" />

		<span>
			<div class="potree_toolbar_label">
				Gradient
			</div>
			<div>
				<span name="gradient_schemes"></span>
			</div>
		</span>

		<span class="potree_toolbar_separator" />

		<span>
			<div class="potree_toolbar_label">
				Measure
			</div>
			<div>
				<img name="action_measure_point" src="${Potree.resourcePath}/icons/point.svg" class="annotation-action-icon" style="width: 2em; height: auto;"/>
				<img name="action_measure_distance" src="${Potree.resourcePath}/icons/distance.svg" class="annotation-action-icon" style="width: 2em; height: auto;"/>
				<img name="action_measure_circle" src="${Potree.resourcePath}/icons/circle.svg" class="annotation-action-icon" style="width: 2em; height: auto;"/>
			</div>
		</span>

		<span class="potree_toolbar_separator" />

		<span>
			<div class="potree_toolbar_label" style="width: 12em">
				Material
			</div>
			<div>
				<select id="optMaterial" name="optMaterial"></select>
			</div>
		</span>

		<span class="potree_toolbar_separator" />

		<span>
			<div class="potree_toolbar_label">
				<span data-i18n="appearance.nb_max_pts">Point Budget</span>: 
				<span name="lblPointBudget" style="display: inline-block; width: 4em;"></span>
			</div>
			<div>
				<div id="sldPointBudget"></div>
			</div>
		</span>
	`);

	// CONTENT & ACTIONS

	{ // ATTRIBUTE
		elToolbar.find("img[name=action_elevation]").click( () => {
			viewer.scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "elevation" );
		});

		elToolbar.find("img[name=action_rgb]").click( () => {
			viewer.scene.pointclouds.forEach( pc => pc.material.activeAttributeName = "rgba" );
		});
	}

	{ // GRADIENT
		const schemes = Object.keys(Potree.Gradients).map(name => ({name: name, values: Potree.Gradients[name]}));
		const elGradientSchemes = elToolbar.find("span[name=gradient_schemes]");

		for(const scheme of schemes){
			const elButton = $(`
				<span style=""></span>
			`);

			const svg = Potree.Utils.createSvgGradient(scheme.values);
			svg.setAttributeNS(null, "class", `button-icon`);
			svg.style.height = "2em";
			svg.style.width = "1.3em";

			elButton.append($(svg));

			elButton.click( () => {
				for(const pointcloud of viewer.scene.pointclouds){
					pointcloud.material.activeAttributeName = "elevation";
					pointcloud.material.gradient = Potree.Gradients[scheme.name];
				}
			});

			elGradientSchemes.append(elButton);
		}
	}

	{ // MEASURE
		elToolbar.find("img[name=action_measure_point]").click( () => {
			const measurement = viewer.measuringTool.startInsertion({
				showDistances: false,
				showAngles: false,
				showCoordinates: true,
				showArea: false,
				closed: true,
				maxMarkers: 1,
				name: 'Point'
			});
		});

		elToolbar.find("img[name=action_measure_distance]").click( () => {
			const measurement = viewer.measuringTool.startInsertion({
				showDistances: true,
				showArea: false,
				closed: false,
				name: 'Distance'
			});
		});

		elToolbar.find("img[name=action_measure_circle]").click( () => {
			const measurement = viewer.measuringTool.startInsertion({
				showDistances: false,
				showHeight: false,
				showArea: false,
				showCircle: true,
				showEdges: false,
				closed: false,
				maxMarkers: 3,
				name: 'Circle'
			});
		});
	}

	{ // MATERIAL
		let options = [
			"rgba", 
			"elevation",
			"level of detail",
			"indices",
			// "intensity",
			// "classification",
			// "source id",
		];

		let attributeSelection = elToolbar.find('#optMaterial');
		for(let option of options){
			let elOption = $(`<option>${option}</option>`);
			attributeSelection.append(elOption);
		}

		const updateMaterialSelection = (event, ui) => {
			let selectedValue = attributeSelection.selectmenu().val();

			for(const pointcloud of viewer.scene.pointclouds){
				pointcloud.material.activeAttributeName = selectedValue;
			}
		};

		attributeSelection.selectmenu({change: updateMaterialSelection});
	}

	{ // POINT BUDGET
		elToolbar.find('#sldPointBudget').slider({
			value: viewer.getPointBudget(),
			min: 100_000,
			max: 1_000_000,
			step: 100_000,
			slide: (event, ui) => { viewer.setPointBudget(ui.value); }
		});

		const onBudgetChange = () => {
			let budget = (viewer.getPointBudget() / (1000_000)).toFixed(1) + "M";
			elToolbar.find('span[name=lblPointBudget]').html(budget);
		};

		onBudgetChange();
		viewer.addEventListener("point_budget_changed", onBudgetChange);
	}

	
	</script>
	
  </body>
</html>