360-test.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="">
  6. <meta name="author" content="">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  8. <title>Potree Viewer</title>
  9. <link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
  10. <link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
  11. <link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
  12. <link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
  13. <link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
  14. </head>
  15. <body>
  16. <script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
  17. <script src="../../libs/spectrum/spectrum.js"></script>
  18. <script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
  19. <script src="../../libs/other/BinaryHeap.js"></script>
  20. <script src="../../libs/tween/tween.min.js"></script>
  21. <script src="../../libs/d3/d3.js"></script>
  22. <script src="../../libs/proj4/proj4.js"></script>
  23. <script src="../../libs/openlayers3/ol.js"></script>
  24. <script src="../../libs/i18next/i18next.js"></script>
  25. <script src="../../libs/jstree/jstree.js"></script>
  26. <script src="../../build/potree/potree.js"></script>
  27. <script src="../../libs/plasio/js/laslaz.js"></script>
  28. <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
  29. <div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
  30. </div>
  31. <div id="potree_sidebar_container"> </div>
  32. </div>
  33. <script type="module">
  34. import * as THREE from "../libs/three.js/build/three.module.js";
  35. window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
  36. viewer.setEDLEnabled(true);
  37. viewer.setFOV(60);
  38. viewer.setPointBudget(2_000_000);
  39. viewer.loadSettingsFromURL();
  40. viewer.setDescription(`Mobile LIDAR with 360 degree image overlays.
  41. Click on a sphere to enter 360 view. Click "unfocus" to leave 360 view. <br>
  42. Point cloud courtesy of <a href="http://www.helimap.com/">Helimap System SA</a>. Images were downsized for this online demo; Original size is 8000x400.`);
  43. viewer.loadGUI(() => {
  44. viewer.setLanguage('en');
  45. $("#menu_appearance").next().show();
  46. viewer.toggleSidebar();
  47. });
  48. // Load and add point cloud to scene
  49. var path = "http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/MLS_drive1/cloud.js"
  50. //var path = 'https://laser.4dkankan.com/data/t-SNZRfWt/data/chunk1/webcloud/cloud.js'
  51. Potree.loadPointCloud(path, "MLS", e => {
  52. let scene = viewer.scene;
  53. let pointcloud = e.pointcloud;
  54. let material = pointcloud.material;
  55. material.size = 0.5;
  56. material.minSize = 2.0;
  57. material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
  58. material.shape = Potree.PointShape.SQUARE;
  59. material.activeAttributeName = "rgba";
  60. scene.addPointCloud(pointcloud);
  61. viewer.scene.view.setView(
  62. [2652381.103, 1249049.447, 411.636],
  63. [2652364.407, 1249077.205, 399.696],
  64. );
  65. //viewer.scene.view.setView(
  66. // pointcloud.position.clone().add(new THREE.Vector3(0,10,3)),
  67. // pointcloud.position.toArray()
  68. //)
  69. run(pointcloud.boundingBox, pointcloud.position);
  70. });
  71. async function run(boundingBox, position){
  72. proj4.defs("EPSG:31468", "+proj=tmerc +lat_0=0 +lon_0=12 +k=1 +x_0=4500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs");
  73. //proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
  74. proj4.defs("pointcloud", viewer.getProjection());
  75. let transform = proj4("WGS84", "pointcloud");
  76. let params = {
  77. transform: transform,
  78. boundingBox,
  79. position
  80. };
  81. // this file contains coordinates, orientation and filenames of the images:
  82. // http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection/coordinates.txt
  83. Potree.Images360Loader.load("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/Drive2_selection", viewer, params).then( images => {
  84. viewer.scene.add360Images(images);
  85. });
  86. viewer.mapView.showSources(false);
  87. }
  88. </script>
  89. </body>
  90. </html>