|
|
@@ -0,0 +1,224 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="description" content="">
|
|
|
+ <meta name="author" content="">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
+ <title>Potree Viewer</title>
|
|
|
+
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
|
|
|
+ <script src="../../libs/spectrum/spectrum.js"></script>
|
|
|
+ <script src="../../libs/jquery-ui/jquery-ui.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/i18next/i18next.js"></script>
|
|
|
+ <script src="../../libs/jstree/jstree.js"></script>
|
|
|
+ <script src="../../build/potree/potree.js"></script>
|
|
|
+ <script src="../../libs/plasio/js/laslaz.js"></script>
|
|
|
+
|
|
|
+ <!-- <script src="../../libs/stats.js/stats.js"></script> -->
|
|
|
+ <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
|
|
|
+ <div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="potree_sidebar_container"> </div>
|
|
|
+ </div>
|
|
|
+ <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=4578048f6e03386759d5609401e738d3"></script> -->
|
|
|
+ <script type="module">
|
|
|
+
|
|
|
+ import * as THREE from "../libs/three.js/build/three.module.js";
|
|
|
+ import browser from '../src/custom/utils/browser.js' //这里必须加.js
|
|
|
+ window.THREE = THREE
|
|
|
+ var changeLog = ()=>{
|
|
|
+
|
|
|
+ var textarea = document.createElement('textarea');
|
|
|
+ textarea.id = "consoleLog";
|
|
|
+
|
|
|
+ textarea.style.width = '160px';
|
|
|
+ textarea.style.height = '200px'
|
|
|
+ textarea.style.position = 'fixed'
|
|
|
+ textarea.style.left = 0
|
|
|
+ textarea.style.bottom = '50px'
|
|
|
+ textarea.style['z-index'] = 9999;
|
|
|
+ textarea.style.color = 'black';
|
|
|
+ textarea.style.opacity = 0.9;
|
|
|
+ textarea.style['font-size'] = '12px';
|
|
|
+ textarea.style['backgroundColor'] = '#ffffff'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ document.getElementsByTagName("body")[0].appendChild(textarea);
|
|
|
+ var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
|
|
|
+ var exchange = function (o) {
|
|
|
+ console["old" + o] = console[o];
|
|
|
+ console[o] = function () {
|
|
|
+ var args = Array.from(arguments)
|
|
|
+ console["old" + o].apply(this, arguments)
|
|
|
+ var t = document.getElementById("consoleLog").innerHTML;
|
|
|
+
|
|
|
+ var str = ''
|
|
|
+ args.forEach(a=>{
|
|
|
+ str += a + ' '
|
|
|
+ })
|
|
|
+ document.getElementById("consoleLog").innerHTML = str + "\n\n" + t;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ exchange(list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //Potree.browser.isMobile() && changeLog()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var number = browser.urlHasValue('m',true);
|
|
|
+ console.log(number)
|
|
|
+ Potree.start(document.getElementById("potree_render_area"),null, number,{noMap:true});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //let viewer = new Potree.Viewer(document.getElementById("potree_render_area"), null,{noMap:true} );
|
|
|
+ //Potree.config.splatEnableSwapOut = 1
|
|
|
+ let cloudPath = Potree.resourcePath + '/../data/webcloud/'+number+'_adapt/cloud.js'
|
|
|
+ Potree.loadPointCloud(cloudPath, number ,number, 0, e => {
|
|
|
+ let scene = viewer.scene;
|
|
|
+ let pointcloud = e.pointcloud;
|
|
|
+ let config = Potree.config.material
|
|
|
+ let material = pointcloud.material;
|
|
|
+
|
|
|
+
|
|
|
+ pointcloud.dataset_id = 0;//供漫游点找到属于的dataset点云
|
|
|
+ material.minSize = config.minSize
|
|
|
+ material.maxSize = config.maxSize
|
|
|
+ material.pointSizeType = /* Potree.settings.isOfficial ? */ config.pointSizeType /* : 'ADAPTIVE' */ //Potree.PointSizeType[config.pointSizeType]//Potree.PointSizeType.ADAPTIVE;//FIXED
|
|
|
+ pointcloud.changePointSize(config.realPointSize) //material.size = config.pointSize;
|
|
|
+ pointcloud.changePointOpacity(1)
|
|
|
+ material.shape = Potree.PointShape.SQUARE;
|
|
|
+ scene.addPointCloud(pointcloud);
|
|
|
+
|
|
|
+ viewer.scene.axisArrow.visible = true
|
|
|
+ //viewer.background.g = 0.8
|
|
|
+ viewer.updateModelBound()
|
|
|
+ Potree.settings.pointDensity = 'low'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ Potree.pointBudget = Potree.config.maxSplatCount = Potree.browser.isMobile() ? 1200000: 2600000//2560000 //为什么我的手机chrome最多870000，否则显示不出, 去掉swapBuffer后该值上升到1250000. 通过减少WebAssembly的page数量，该值又上升到2560000
|
|
|
+ Potree.settings.maxLRUPoints = Potree.browser.isMobile() ? 5000000 : 10000000
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ viewer.dispatchEvent('allLoaded')
|
|
|
+ //Potree.settings.editType = 'pano'
|
|
|
+
|
|
|
+ //pointcloud.matrixAutoUpdate = true
|
|
|
+ //pointcloud.rotation.x = -Math.PI/2
|
|
|
+ //pointcloud.position.z += 5
|
|
|
+ //pointcloud.updateMatrixWorld()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ viewer.splatMesh = new Potree.Splat({adaptiveSize:browser.urlHasValue('adapt') })
|
|
|
+ //viewer.splatMesh.splatAttrSameMemory = 1
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //setTimeout(()=>{
|
|
|
+ viewer.splatMesh.position.copy(pointcloud.position)
|
|
|
+ viewer.splatMesh.addPointcloud(pointcloud)
|
|
|
+ //viewer.splatMesh.material.uniforms.splatScale.value = 2
|
|
|
+ viewer.splatMesh.rotation.x = -Math.PI/2
|
|
|
+ viewer.splatMesh.position.z += 80
|
|
|
+ //viewer.splatMesh.position.copy(pointcloud.position)
|
|
|
+ //viewer.splatMesh.updateMatrixWorld() //直接渲染splatMesh的话要手动更新
|
|
|
+ //viewer.scene.pointclouds[0].visible = false //这样的话visibleNode会空的
|
|
|
+ //pointcloud.material.opacity = 0
|
|
|
+ //viewer.setControls(viewer.orbitControls)
|
|
|
+ viewer.mainViewport.view.radius = 50
|
|
|
+
|
|
|
+ viewer.objs.add(viewer.splatMesh)
|
|
|
+ viewer.splatMesh.transformCallBack()
|
|
|
+ //viewer.splatMesh.updateSort()
|
|
|
+ //},3000)
|
|
|
+
|
|
|
+ //viewer.splatMesh.switchAttrUpdateType(0)
|
|
|
+
|
|
|
+
|
|
|
+ createBtn()
|
|
|
+ viewer.addEventListener('allLoaded',createBtn)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ $('#mapGaode').hide()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function createBtn(){
|
|
|
+ if(viewer.scene.pointclouds.length != 2)return
|
|
|
+
|
|
|
+ //使splat和原场景点云位置相同
|
|
|
+ let scenePointCloud = viewer.scene.pointclouds.find(e=>!e.isSplat)
|
|
|
+ /*scenePointCloud.matrixWorld.decompose(viewer.splatMesh.position, viewer.splatMesh.quaternion, new THREE.Vector3)
|
|
|
+ viewer.splatMesh.transformCallBack()
|
|
|
+ */
|
|
|
+ //viewer.splatMesh.quaternion.copy( scenePointCloud.orientationUser)
|
|
|
+
|
|
|
+ scenePointCloud.material.pointSizeType = viewer.splatMesh.adaptiveSize ? 2 : 1
|
|
|
+ scenePointCloud.changePointSize(0.13)
|
|
|
+ let btn = $('<input type="button" value="开启3dgs" style="position: absolute; right: 20%; bottom: 20px; z-index: 10000; font-size: 1em; color: rgb(0, 0, 0); width: 100px; background: rgba(255, 255, 255, 0.8);">')
|
|
|
+ $('#potree_render_area').append(btn)
|
|
|
+
|
|
|
+ let state
|
|
|
+ let deal = ()=>{
|
|
|
+ btn.val(state?'关闭3dgs':'开启3dgs')
|
|
|
+ Potree.visibleNodes.length = 0
|
|
|
+ viewer.scene.pointclouds.forEach(e=>{
|
|
|
+ let visi = !e.isSplat == !state
|
|
|
+ Potree.Utils.updateVisible(e, 'datasetSelection', visi)
|
|
|
+ })
|
|
|
+ Potree.Utils.updateVisible(viewer.splatMesh, 'datasetSelection', state)
|
|
|
+ }
|
|
|
+ btn.on('click',(e)=>{
|
|
|
+ state = !state
|
|
|
+ deal()
|
|
|
+ })
|
|
|
+ deal()
|
|
|
+ }
|
|
|
+
|
|
|
+ //放到线上了 https://www.4dmodel.com/test/potree_bak/examples/3dgsUseCloud.html?m=0
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
xzw