bill
/
potree-sdk


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!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>