oriented_images.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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');"></div>
  30. <div id="potree_sidebar_container"> </div>
  31. </div>
  32. <script type="module">
  33. import * as THREE from "../libs/three.js/build/three.module.js";
  34. window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
  35. viewer.setEDLEnabled(false);
  36. //viewer.setFOV(62.94372232435855);
  37. viewer.setFOV(60);
  38. viewer.setPointBudget(3_000_000);
  39. viewer.setDescription(`
  40. Use Potree.OrientedImageLoader.load(...) to populate the scene with captured images.
  41. Clicking an image will move the scene camera towards the image and overlay it over the point cloud.
  42. You can use the measurement tools while the scene camera is bound to an image. Zoom in and out of the image via the mouse wheel.
  43. Go back to 3D mode by clicking the button on the bottom right.
  44. Point cloud courtesy of <a href="http://www.helimap.ch" target="_blank">Helimap System SA</a>.
  45. `);
  46. viewer.loadGUI(() => {
  47. viewer.setLanguage('en');
  48. $("#menu_tools").next().show();
  49. $("#menu_scene").next().show();
  50. viewer.toggleSidebar();
  51. });
  52. //Potree.loadPointCloud("../pointclouds/C/dev/epalinges/epalinges/als_converted/cloud.js", "epalinges", e => {
  53. Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/epalinges/als_converted/cloud.js", "epalinges", e => {
  54. let scene = viewer.scene;
  55. let pointcloud = e.pointcloud;
  56. let material = pointcloud.material;
  57. material.size = 1;
  58. material.pointSizeType = Potree.PointSizeType.FIXED;
  59. material.shape = Potree.PointShape.SQUARE;
  60. scene.addPointCloud(pointcloud);
  61. scene.view.position.set(2542013.003, 1155469.994, 1233.310);
  62. scene.view.lookAt(2542003.981, 1156007.326, 838.965);
  63. });
  64. </script>
  65. <script type="module">
  66. import * as THREE from "../libs/three.js/build/three.module.js";
  67. const cameraParamsPath = "http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/epalinges/img_selected/IXM35_190522_nodistortion.xml";
  68. const imageParamsPath = "http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/epalinges/img_selected/Calib190522_MN95_NF2_cam_estim.txt";
  69. Potree.OrientedImageLoader.load(cameraParamsPath, imageParamsPath, viewer).then( images => {
  70. viewer.scene.addOrientedImages(images);
  71. });
  72. </script>
  73. </body>
  74. </html>