splatter.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  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.settings.showStats = true
  77. Potree.config.view.near = 0.001, Potree.config.view.far = 1e3 //same as splatter
  78. let log = browser.isMobile()
  79. if(log){//
  80. //window.addEventListener("load", ()=>{
  81. var textarea = document.createElement('textarea');
  82. textarea.id = "consoleLog";
  83. document.getElementsByTagName("body")[0].appendChild(textarea);
  84. var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
  85. var exchange = function (o) {
  86. console["old" + o] = console[o];
  87. console[o] = function () {
  88. console["old" + o].apply(this, arguments)
  89. let str = ''
  90. for(let i=0;i<arguments.length;i++){
  91. str += arguments[i] + ' '
  92. }
  93. textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
  94. }
  95. }
  96. for (var i = 0; i < list.length; i++) {
  97. exchange(list[i])
  98. }
  99. //})
  100. /*{
  101. let btns = document.querySelector('#move_Btns')
  102. Array.from(btns.children).forEach((e,i)=>{
  103. let name = i<2 ? 'FORWARD' : 'BACKWARD'
  104. let f = (ev)=>{
  105. ev.preventDefault()
  106. ev.stopPropagation()
  107. viewer.inputHandler.pressedKeys[viewer.controls.keys['FORWARD'][0]] = 0
  108. viewer.inputHandler.pressedKeys[viewer.controls.keys['BACKWARD'][0]] = 0
  109. }
  110. let pointerdown = (ev)=>{
  111. f(ev)
  112. viewer.inputHandler.pressedKeys[viewer.controls.keys[name][0]] = 1;
  113. (i==1||i==2) && (viewer.inputHandler.pressedKeys[viewer.controls.keys['ALT'][0]] = 1)
  114. //viewer.inputHandler.pressedKeys[viewer.controls.keys['SPACE'][0]] = 1
  115. }
  116. let pointerup = (ev)=>{
  117. f(ev)
  118. viewer.inputHandler.pressedKeys[viewer.controls.keys['ALT'][0]] = 0
  119. //viewer.inputHandler.pressedKeys[viewer.controls.keys['SPACE'][0]] = 0
  120. }
  121. e.addEventListener('pointerdown',pointerdown)
  122. e.addEventListener('pointerup', pointerup)
  123. e.addEventListener('pointerout', pointerup)
  124. })
  125. }*/
  126. }
  127. var splatId = browser.urlHasValue('m',true)
  128. var urlAtSplatter = !browser.urlHasValue('urlAtCurrent') ;
  129. Potree.settings.firstCtrlRotInvSmooth = true
  130. Potree.settings.rotAroundPoint = false
  131. Potree.settings.noAA = true
  132. //Potree.start(document.getElementById("potree_render_area"),null, null,{noMap:true});
  133. new Potree.Viewer(document.getElementById("potree_render_area") , null, {noMap:true, enableJoy:true});
  134. viewer.background.set('#000')
  135. Potree.settings.orbitCtlMoveFree = true
  136. let dom = document.querySelector('#mapGaode')
  137. if(dom){
  138. //viewer.splatter.logArea = dom
  139. dom.style.height = '134px', dom.style.width = '200px'
  140. dom.style['font-size'] = '14px'
  141. window.logAreaTool = {
  142. area: dom,
  143. list:{},
  144. change(name, text, level=0){
  145. this.list[name] = {text, level}
  146. this.update()
  147. },
  148. remove(name){
  149. delete this.list[name]
  150. this.update()
  151. },
  152. update(){
  153. let text = ''
  154. let objects = Object.values(this.list)
  155. objects.sort((a,b)=>{return b.level - a.level})
  156. for(let i=0, len=objects.length; i<len; i++){
  157. text += objects[i].text + '<br>'
  158. }
  159. this.area.innerHTML = text
  160. }
  161. }
  162. }
  163. if(splatId === ''){
  164. splatId = 'SG-t-jp-zSUztbgFpmt', urlAtSplatter = true
  165. }
  166. let localProfile = {
  167. 'SG-t-WSs5eaQJLoc' :{
  168. //view : {"yaw":-1.6062499999999997,"pitch":0.13850996852046182,"position":{"x":-42.06086329177142,"y":3.3968851133538633,"z":-1.9854159672413823}}
  169. view : {"yaw":-1.6034087578950877,"pitch":0.1454619081473329,"position":{"x":-41.71435321819845,"y":3.2051723875245823,"z":-1.808349204344115}}
  170. }
  171. }[splatId]
  172. let applyConfig = (config)=>{
  173. let splatter = new Potree.Splatter(viewer,config);
  174. splatter.visible = true
  175. config.view && viewer.mainViewport.view.applyJson(config.view)
  176. }
  177. if(splatId!=''){
  178. let path = browser.urlHasValue('gsPath', true)
  179. if(!path){
  180. if(urlAtSplatter){
  181. path = Potree.resourcePath + '../../../../examples/tomcat/splatter.app/data/' + splatId
  182. }else{
  183. path = Potree.resourcePath + '/../data/splatter/' + splatId
  184. }
  185. }
  186. let dataVersion = path.includes('http') ? Date.now() : 10
  187. let jsonUrl = Potree.Common.joinUrl(path, 'data.json?m='+dataVersion)
  188. Potree.loadFile(jsonUrl,{},(e)=>{
  189. let config = Object.assign( e, localProfile, {
  190. "block": 65536,
  191. "root": {
  192. "radius": browser.urlHasValue('radius', true) || e.radius || (browser.isMobile() ? 0.25 : 0.6),
  193. "size": e.level_0 //8326 //8534
  194. },
  195. "size": e.size || e.files*65536,
  196. path,
  197. dataVersion: 6,
  198. })
  199. applyConfig(config)
  200. let btn1 = document.querySelector('#potree_render_area [value=">>全景"]')
  201. btn1.style.right = '27%'
  202. /*btn1.value = '停lod'
  203. btn1.onclick = ()=>{
  204. btn1.value = btn1.value == '停lod' ? '开lod' : '停lod'
  205. viewer.splatter.renderer.lodder.pauseLod = btn1.value == '停lod' ? 0 : 1
  206. }*/
  207. btn1.value = '停碰撞'
  208. btn1.onclick = ()=>{
  209. btn1.value = btn1.value == '停碰撞' ? '开碰撞' : '停碰撞'
  210. window.stopColl = btn1.value == '停碰撞' ? 0 : 1
  211. }
  212. let btn2 = document.querySelector('#potree_render_area [value="隐藏点云"]')
  213. /*btn2.value = '停sort'
  214. btn2.onclick = ()=>{
  215. btn2.value = btn2.value == '停sort' ? '开sort' : '停sort'
  216. viewer.splatter.renderer.lodder.pauseSort = btn2.value == '停sort' ? 0 : 1
  217. }*/
  218. btn2.value = 'switchColl'
  219. btn2.onclick = ()=>{
  220. viewer.collider.toggleMesh()
  221. }
  222. browser.urlHasValue('character') && viewer.setControls(viewer.characterCtrl)
  223. })
  224. }
  225. Potree.settings.dblToFocusPoint = 1
  226. viewer.scene.axisArrow.visible = true
  227. viewer.scene.axisArrow.position.z = 20
  228. //example: https://192.168.0.59:1234/examples/splatter.html?m=rly-jb1
  229. Potree.config.view.fov = 50
  230. Potree.settings.keepMinFov = true
  231. viewer.setFOV(50)//原本70,在手机端比splatter的点多,增大fov会减少点
  232. Potree.settings.intersectWhenHover = false //降cpu
  233. </script>
  234. </body>
  235. </html>