-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
aucklandLidar.html
88 lines (68 loc) · 3.14 KB
/
aucklandLidar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<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-1.11.4/jquery-ui.css">
<link rel="stylesheet" href="libs/openlayers3/ol.css" type="text/css">
</head>
<body>
<script src="libs/jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="libs/jquery-ui-1.11.4/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/potree/potree.js"></script>
<script src="libs/plasio/js/laslaz.js"></script>
<script src="libs/plasio/vendor/bluebird.js"></script>
<script src="libs/potree/laslaz.js"></script>
<script src="libs/plasio/js/laslaz.js"></script>
<script src="libs/plasio/vendor/bluebird.js"></script>
<script src="libs/potree/laslaz.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_map" class="mapBox" style="position: absolute; left: 50px; top: 50px; width: 400px; height: 400px; display: none">
<div id="potree_map_header" style="position: absolute; width: 100%; height: 25px; top: 0px; background-color: rgba(0,0,0,0.5); z-index: 1000; border-top-left-radius: 3px; border-top-right-radius: 3px;">
</div>
<div id="potree_map_content" class="map" style="position: absolute; z-index: 100; top: 25px; width: 100%; height: calc(100% - 25px); border: 2px solid rgba(0,0,0,0.5); box-sizing: border-box;"></div>
</div>
<!-- HEADING -->
<div id="potree_description" class="potree_info_text"></div>
</div>
<div id="potree_sidebar_container"> </div>
</div>
<script>
var onPointCloudLoaded = function(event){
// do stuff here that should be executed whenever a point cloud has been loaded.
// event.pointcloud returns the point cloud object
console.log("a point cloud has been loaded");
};
viewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
"onPointCloudLoaded": onPointCloudLoaded
});
viewer.setEDLEnabled(false);
viewer.setPointSize(3);
viewer.setMaterial("RGB");
viewer.setFOV(60);
viewer.setPointSizing("Fixed");
viewer.setQuality("Squares");
viewer.setPointBudget(1*1000*1000);
document.title = "Auckland CBD LiDAR";
viewer.setEDLEnabled(true);
viewer.setShowSkybox(true);
viewer.setMaterialID(Potree.PointColorType.RGB);
viewer.setDescription("3D LiDAR point cloud visualization of Auckland New Zealand's Central Business District");
viewer.loadSettingsFromURL();
viewer.addPointCloud("pointclouds/aucklandLidar/cloud.js");
viewer.loadGUI();
</script>
</body>
</html>