splatter.html 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  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. <style>
  16. #consoleLog{
  17. width: 30%;
  18. height: 130px;
  19. position: absolute;
  20. right: 0px;
  21. bottom: 45px;
  22. z-index: 999999;
  23. color: "321";
  24. opacity: 0.9;
  25. font-size: 10px;
  26. }
  27. #move_Btns{
  28. position: fixed;
  29. bottom: 10px;
  30. width: 60px;
  31. left: 3px;
  32. height: 200px;
  33. z-index: 90;
  34. display: grid;
  35. }
  36. #move_Btns>button{
  37. transform: rotate(90deg);
  38. position: relative;
  39. font-size: 29px;
  40. user-select: none;
  41. }
  42. #move_Btns span{
  43. pointer-events:none;
  44. }
  45. </style>
  46. <body>
  47. <script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
  48. <script src="../../libs/spectrum/spectrum.js"></script>
  49. <script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
  50. <script src="../../libs/other/BinaryHeap.js"></script>
  51. <script src="../../libs/tween/tween.min.js"></script>
  52. <script src="../../libs/d3/d3.js"></script>
  53. <script src="../../libs/proj4/proj4.js"></script>
  54. <script src="../../libs/openlayers3/ol.js"></script>
  55. <script src="../../libs/i18next/i18next.js"></script>
  56. <script src="../../libs/jstree/jstree.js"></script>
  57. <script src="../../build/potree/potree.js"></script>
  58. <script src="../../libs/plasio/js/laslaz.js"></script>
  59. <!-- <script src="../../libs/stats.js/stats.js"></script> -->
  60. <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
  61. <div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
  62. </div>
  63. <div id="potree_sidebar_container"> </div>
  64. </div>
  65. <div id='move_Btns' >
  66. <button name='forward2' > <span><<</span></button>
  67. <button name='forward' > <span><</span></button>
  68. <button name='backward' ><span>></span></button>
  69. <button name='backward2' ><span>>></span></button>
  70. </div>
  71. <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=4578048f6e03386759d5609401e738d3"></script> -->
  72. <script type="module">
  73. import * as THREE from "../libs/three.js/build/three.module.js";
  74. import browser from '../src/custom/utils/browser.js' //这里必须加.js
  75. window.THREE = THREE
  76. Potree.config.view.near = 0.001, Potree.config.view.far = 1e3 //same as splatter
  77. if(browser.isMobile()){
  78. //window.addEventListener("load", ()=>{
  79. var textarea = document.createElement('textarea');
  80. textarea.id = "consoleLog";
  81. document.getElementsByTagName("body")[0].appendChild(textarea);
  82. var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
  83. var exchange = function (o) {
  84. console["old" + o] = console[o];
  85. console[o] = function () {
  86. console["old" + o].apply(this, arguments)
  87. let str = ''
  88. for(let i=0;i<arguments.length;i++){
  89. str += arguments[i] + ' '
  90. }
  91. textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
  92. }
  93. }
  94. for (var i = 0; i < list.length; i++) {
  95. exchange(list[i])
  96. }
  97. //})
  98. {
  99. let btns = document.querySelector('#move_Btns')
  100. Array.from(btns.children).forEach((e,i)=>{
  101. let name = i<2 ? 'FORWARD' : 'BACKWARD'
  102. let f = (ev)=>{
  103. ev.preventDefault()
  104. ev.stopPropagation()
  105. viewer.inputHandler.pressedKeys[viewer.controls.keys['FORWARD'][0]] = 0
  106. viewer.inputHandler.pressedKeys[viewer.controls.keys['BACKWARD'][0]] = 0
  107. }
  108. let pointerdown = (ev)=>{
  109. f(ev)
  110. viewer.inputHandler.pressedKeys[viewer.controls.keys[name][0]] = 1;
  111. (i==1||i==2) && (viewer.inputHandler.pressedKeys[viewer.controls.keys['ALT'][0]] = 1)
  112. //viewer.inputHandler.pressedKeys[viewer.controls.keys['SPACE'][0]] = 1
  113. }
  114. let pointerup = (ev)=>{
  115. f(ev)
  116. viewer.inputHandler.pressedKeys[viewer.controls.keys['ALT'][0]] = 0
  117. //viewer.inputHandler.pressedKeys[viewer.controls.keys['SPACE'][0]] = 0
  118. }
  119. e.addEventListener('pointerdown',pointerdown)
  120. e.addEventListener('pointerup', pointerup)
  121. e.addEventListener('pointerout', pointerup)
  122. })
  123. document.addEventListener('contextmenu', function(e) {
  124. if (e.target.classList.contains('no-context-menu')) {
  125. e.preventDefault();
  126. }
  127. });
  128. }
  129. }
  130. var splatId = browser.urlHasValue('m',true)
  131. var urlAtSplatter = !browser.urlHasValue('urlAtCurrent') ;
  132. //Potree.start(document.getElementById("potree_render_area"),null, null,{noMap:true});
  133. new Potree.Viewer(document.getElementById("potree_render_area") , null, {noMap:true});
  134. viewer.background.set('#000')
  135. Potree.settings.orbitCtlMoveFree = true
  136. if(splatId === ''){
  137. splatId = 'SG-t-jp-zSUztbgFpmt', urlAtSplatter = true
  138. }
  139. let localProfile = {
  140. 'SG-t-WSs5eaQJLoc' :{
  141. view : {"yaw":-1.6062499999999997,"pitch":0.13850996852046182,"position":{"x":-42.06086329177142,"y":3.3968851133538633,"z":-1.9854159672413823}}
  142. }
  143. }[splatId]
  144. let applyConfig = (config)=>{
  145. new Potree.Splatter(viewer,config);
  146. config.view && viewer.mainViewport.view.applyJson(config.view)
  147. let dom = document.querySelector('#mapGaode')
  148. if(dom){
  149. viewer.splatter.logArea = dom
  150. dom.style.height = '43px', dom.style.width = '200px'
  151. dom.style['font-size'] = '14px'
  152. }
  153. }
  154. if(splatId!=''){
  155. let path = browser.urlHasValue('gsPath', true)
  156. if(!path){
  157. if(urlAtSplatter){
  158. path = Potree.resourcePath + '../../../../examples/tomcat/splatter.app/data/' + splatId
  159. }else{
  160. path = Potree.resourcePath + '/../data/splatter/' + splatId
  161. }
  162. }
  163. let dataVersion = path.includes('http') ? Date.now() : 10
  164. let jsonUrl = Potree.Common.joinUrl(path, 'data.json?m='+dataVersion)
  165. Potree.loadFile(jsonUrl,{},(e)=>{
  166. let config = Object.assign( e, localProfile, {
  167. "block": 65536,
  168. "root": {
  169. "radius": browser.urlHasValue('radius', true) || e.radius || (browser.isMobile() ? 0.25 : 0.6),
  170. "size": e.level_0 //8326 //8534
  171. },
  172. "size": e.size || e.files*65536,
  173. path,
  174. dataVersion: 6,
  175. })
  176. applyConfig(config)
  177. let btn1 = document.querySelector('#potree_render_area [value=">>全景"]')
  178. btn1.value = '停lod'
  179. btn1.onclick = ()=>{
  180. btn1.value = btn1.value == '停lod' ? '开lod' : '停lod'
  181. viewer.splatter.renderer.lodder.pauseLod = btn1.value == '停lod' ? 0 : 1
  182. }
  183. let btn2 = document.querySelector('#potree_render_area [value="隐藏点云"]')
  184. btn2.value = '停sort'
  185. btn2.onclick = ()=>{
  186. btn2.value = btn2.value == '停sort' ? '开sort' : '停sort'
  187. viewer.splatter.renderer.lodder.pauseSort = btn2.value == '停sort' ? 0 : 1
  188. }
  189. })
  190. }
  191. Potree.settings.rotAroundPoint = false
  192. viewer.scene.axisArrow.visible = true
  193. //example: https://192.168.0.59:1234/examples/splatter.html?m=rly-jb1
  194. Potree.config.view.fov = 50
  195. Potree.settings.keepMinFov = true
  196. viewer.setFOV(50)//原本70,在手机端比splatter的点多,增大fov会减少点
  197. Potree.settings.intersectWhenHover = false //降cpu
  198. //viewer.scene.axisArrow.visible = true // 会导致效果不对还警告?!!!!
  199. setTimeout(()=>{
  200. //console.log('stop lod and sort! ')
  201. //viewer.splatter.renderer.lodder.pauseLod = 1
  202. //viewer.splatter.renderer.lodder.pauseSort = 1
  203. //viewer.setControls(viewer.orbitControls)
  204. // setInterval(()=>{
  205. // viewer.controls.yawDelta -= 0.002
  206. // },8)
  207. },48200)
  208. </script>
  209. </body>
  210. </html>