potree配置 - 悦读

文章目录

一、声明
二、快速使用
三、设置默认摄像头位置和目标位置

一、声明

直接使用docker：参考网址

二、快速使用

Save your pointclouds (.ply, .ptx, .laz, .las) into a folder. Go into that folder, and run:
交互式运行（无法交互）

sudo docker run -it --name=potree_viewer --rm -p 8080:80 -v "$PWD":/shared  jonazpiazu/potree /bin/bash

后台运行

sudo docker run -dit --name=potree_viewer --rm -p 8080:80 -v "$PWD":/shared  jonazpiazu/potree

Then open a web browser to http://localhost:8080/

三、设置默认摄像头位置和目标位置

/var/lib/docker/overlay2/57d692f7067c1a8a7e7f4e84e59c6dbc2081859c10a99129f75d150b93fc114c/merged/usr/local/apache2/htdocs/shared_converted/Area_2_noise.html

参考网址[1], [2]
注：修改之处“注意此处”

<!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="libs/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" 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">
</head>

<body>
	<script src="libs/jquery/jquery-3.1.1.min.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.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="libs/potree/potree.js"></script>
	<script src="libs/plasio/js/laslaz.js"></script>
	
	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
		document.title = "";
		viewer.setEDLEnabled(false);
		viewer.setBackground("gradient"); // ["skybox", "gradient", "black", "white"];
		viewer.setDescription(``);
	
	<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);
		document.title = "";
		viewer.setEDLEnabled(false);
		viewer.setBackground("gradient"); // ["skybox", "gradient", "black", "white"];
		viewer.setDescription(``);
		viewer.loadSettingsFromURL();
		
		viewer.loadGUI(() => {
			viewer.setLanguage('en');
			$("#menu_appearance").next().show();
			$("#menu_tools").next().show();
			$("#menu_scene").next().show();
			viewer.toggleSidebar();
		});
		
		Potree.loadPointCloud("pointclouds/00/cloud.js", "00", e => {
			let pointcloud = e.pointcloud;
			let material = pointcloud.material;
			viewer.scene.addPointCloud(pointcloud);
			material.pointColorType = Potree.PointColorType.RGB; // any Potree.PointColorType.XXXX 
			material.size = 1;
			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
			material.shape = Potree.PointShape.SQUARE;
			// 注意此处
			// viewer.fitToScreen(); 删除这句话			
			viewer.scene.view.position.set(123, 456, 789);
			viewer.scene.view.lookAt(4, 5, 6);
		});
		
	</script>
  </body>
</html>