加个axisViewer

src/custom/modules/panos/Images360.js

@@ -2611,7 +2611,7 @@ Images360.prototype.getNeighbours = function(){ //逐渐自动获取neighbours
                 if(item.item == pano)continue  
                 if(this.isNeighbour(pano,item.item,{dontCompute:true}) || this.neighbourMap[pano.id][item.item.id]!= void 0 && this.neighbourMap[item.item.id][pano.id]!= void 0)continue //为true或两个方向都算了的
                 
-                console.log('check isNeighbour', pano.id, item.item.id)
+                //console.log('check isNeighbour', pano.id, item.item.id)
                  
                 let byCloud = !pano.pointcloud.hasDepthTex
                 let result = this.isNeighbour(pano, item.item,  {onlyUseTex: !byCloud, computeDirFirst:true, computeTwoDir:true})//计算 

src/custom/objects/Sprite.js

@@ -58,7 +58,7 @@ export default class Sprite extends THREE.Mesh{
             viewer.removeEventListener("raycaster", applyMatrix)        //before render
             viewer.removeEventListener("render.begin", applyMatrix)
             viewer.removeEventListener("render.begin2", applyMatrix)
-            this.dispose()
+            
         })
          
     }
@@ -336,6 +336,7 @@ export default class Sprite extends THREE.Mesh{
     dispose(){
         this.removeAllListeners()
         this.parent && this.parent.remove(this)
+        this.dispatchEvent('dispose')
     }
 }
 

src/custom/objects/Tag.js

@@ -140,7 +140,7 @@ class Tag extends THREE.Object3D{
     
     dispose(){
         this.parent.remove(this);
-        this.titleLabel.dispatchEvent({type:'dispose'})
+        this.titleLabel.dispose()
         
     } 
     

src/custom/objects/TextSprite.js

@@ -45,7 +45,7 @@ export class TextSprite extends THREE.Object3D{
 		//this.setText(text);
         
         
-        this.addEventListener('dispose', this.dispose.bind(this)) 
+         
 	}
 
 	setText(text){  
@@ -290,8 +290,9 @@ export class TextSprite extends THREE.Object3D{
     dispose(){
         this.sprite.material.uniforms.map.value.dispose()
         this.parent && this.parent.remove(this)
-        this.sprite.dispatchEvent({type:'dispose'})
+        this.sprite.dispose()
         this.removeAllListeners()
+        this.dispatchEvent('dispose')
     }
 
 }

src/custom/objects/tool/AxisViewer.js

@@ -0,0 +1,202 @@
+ 
+import * as THREE from "../../../../libs/three.js/build/three.module.js";
+  
+ 
+import {ViewerBase} from "../../viewer/viewerBase.js" 
+import Viewport from "../../viewer/Viewport.js"
+
+import {ExtendView} from "../../../viewer/ExtendView.js"
+import {LineDraw/* , MeshDraw */} from "../../utils/DrawUtil.js";
+ 
+import {TextSprite} from '../TextSprite.js'
+
+ 
+
+export default class AxisViewer extends ViewerBase{
+    constructor(listenViewport, parentArea, options={}){
+        let domElement = $(`<div name="Axisdom" viewport=${listenViewport.name}></div>`)
+        $(parentArea).append(domElement)
+        
+        
+        let posInfo = Object.assign({
+            //default:
+            right: 0, top:0, width:'100px', height:'100px'
+        },options.domStyle,{
+            position:'absolute'
+        }) 
+        if(options.domStyle){
+            if(options.domStyle.bottom != void 0){
+                delete posInfo.top 
+            }
+            if(options.domStyle.left != void 0){
+                delete posInfo.right 
+            }
+        } 
+        domElement.css(posInfo)
+        
+                    
+        
+        
+        super(domElement[0],{name:'axis', antialias:true } )
+        
+        
+    
+        this.listenViewport = listenViewport
+        
+      
+        this.scene = new THREE.Scene   
+        //this.camera = new THREE.PerspectiveCamera(30, 1,  1, this.radius*3); 
+         
+         
+        let w = 50
+        this.camera = new THREE.OrthographicCamera(-w/2,w/2,w/2,-w/2 , 1, w*4);  
+        this.camera.zoom = 2.7//(domElement.clientWidth || 300) / w * 1.267//zoom越大视野越小
+        this.camera.updateProjectionMatrix() 
+         
+         
+        this.view = new ExtendView(); 
+        this.view.radius = 70
+        this.viewports = [new Viewport( this.view, this.camera, {
+            left:0, bottom:0, width:1, height: 1, name:'axis' 
+        }) ]
+        this.updateScreenSize() 
+        
+        
+        this.createAxis()
+        
+        let updateCamera = e => {
+            if (e.viewport == listenViewport && e.changeInfo.quaternionChanged) {
+                 this.update()
+            } 
+        }  
+        viewer.addEventListener('camera_changed', updateCamera)
+        
+        
+        
+        let repos = ()=>{
+            
+            
+            if(!listenViewport.active || listenViewport.width == 0 || listenViewport.height == 0){
+                return domElement.css('visibility','hidden')
+            }
+            domElement.css('visibility','visible')
+            
+            let props = [['left','right', 'width'],['bottom','top', 'height']]
+             
+            let set = (prop)=>{ 
+                let str
+                let name = posInfo[prop[1]] != void 0 ? prop[1] : prop[0]
+                let percent = posInfo[prop[1]] != void 0  ?  (1-listenViewport[prop[0]] - listenViewport[prop[2]]) : listenViewport[prop[0]] 
+                if(posInfo[name] == 0 || posInfo[name].includes('%')){
+                    str = (parseFloat(posInfo[name]) + percent * 100) + '%'
+                }else{//px
+                    str = 'calc('+(percent * 100) + '% + ' + posInfo[name] + ')'
+                }  
+                domElement.css(name, str)
+            }
+             
+            set(props[0])
+            set(props[1])
+            
+        } 
+              
+        this.listenViewport.addEventListener('resize',repos)
+        
+        this.addEventListener('dispose',()=>{
+            viewer.removeEventListener('camera_changed', updateCamera)
+            viewer.removeEventListener('resize', repos) 
+        })
+        
+        repos()
+        this.update()
+    }
+    
+    createAxis(){
+        let axis = new THREE.Object3D
+         
+        
+        ;['x','y','z'].forEach((axisText)=>{
+            let color = new THREE.Color().set(Potree.config.axis[axisText].color)
+            let group = new THREE.Object3D
+            let line = LineDraw.createLine([new THREE.Vector3, new THREE.Vector3(0,0,7)],{color})
+         
+            let label = this.createLabel(axisText, color)  
+                label.position.set(0,0,11 /*  + this.renderArea.clientWidth/200 */);
+                
+            if(axisText == 'y'){
+                group.rotation.x = -Math.PI / 2
+            }else if(axisText == 'x'){
+                group.rotation.y = Math.PI / 2
+            } 
+            
+            group.add(line) 
+            group.add(label)
+            axis.add(group)
+        }) 
+        
+        
+        
+        this.axis = axis;
+        this.scene.add(this.axis)
+    }
+    
+    createLabel(text, color){
+        let fontsize = this.renderArea.clientWidth / 5    //20//Math.round( Potree.math.linearClamp(this.renderArea.clientWidth, [80,500],[12,50])) 
+        let s = 3100 / this.renderArea.clientWidth
+        
+        console.log('fontsize',fontsize)
+        let label = new TextSprite({   
+            backgroundColor: {r: 0, g: 0, b: 0, a:0},
+            textColor: {r: color.r * 255, g: color.g*255, b: color.b*255, a:1},
+            fontsize, 
+            //useDepth : true ,
+            renderOrder : 5,// pickOrder:5,
+            fontWeight:'Lighter',
+            text, name:'axis' ,
+            viewports: this.viewports
+        })
+        
+        label.scale.set(s,s,s)
+        return label
+    }  
+
+    
+    update(){
+        
+        this.updateCamera()
+        this.render()
+    } 
+    
+    
+    updateCamera(){  
+        let view = this.listenViewport.view
+        this.view.yaw = view.yaw  
+        this.view.pitch = view.pitch   
+        var dir = view.direction;  //相机朝向
+        this.view.position.copy(dir.multiplyScalar(this.view.radius).negate())  //相机绕着指南针中心（000）转动
+        this.view.applyToCamera(this.camera) 
+    }   
+        
+        
+    render(){
+        viewer.dispatchEvent({type:"render.begin", viewport:this.viewports[0]}) //update sprite
+        this.renderer.render(this.scene, this.camera)
+    }
+        
+    dispose(){
+        this.axis.traverse((child)=>{
+            if(child instanceof TextSprite){
+                child.dispose()
+            }else if(child instanceof THREE.LineSegments){
+                child.material.dispose();
+                child.geometry.dispose()
+            }
+        })
+        super.dispose()
+    }
+}
+        
+        
+        
+        
+        

src/custom/objects/tool/Compass.js

@@ -109,7 +109,7 @@ class Compass extends THREE.EventDispatcher{
         this.createCompass()
           
         viewer.addEventListener('camera_changed', e => {
-            if (e.viewport == this.viewport && (e.changeInfo.positionChanged || e.changeInfo.quaternionChanged)) {
+            if (e.viewport == this.viewport && (e.changeInfo.quaternionChanged /* || e.changeInfo.quaternionChanged */)) {
                  this.update()
             } 
         })

src/custom/objects/tool/Measure.js

@@ -833,7 +833,7 @@ export class Measure extends ctrlPolygon{
     dispose(){//add
         var labels = this.edgeLabels.concat(this.coordinateLabels)
         this.areaLabel && labels.push(this.areaLabel)
-        labels.forEach(e=>e.dispatchEvent({type:'dispose'}))
+        labels.forEach(e=>e.dispose())
         super.dispose()
     }
     

src/custom/objects/tool/ctrlPolygon.js

@@ -621,7 +621,7 @@ export class ctrlPolygon extends THREE.Object3D {
         const marker = this.markers[index]
 		//this.remove(marker); 
         this.markers.splice(index, 1);   
-        marker.dispatchEvent({type:'dispose'})
+        marker.dispose()
         
         
 		let edgeIndex = index           //(index === 0) ? 0 : (index - 1);
@@ -629,7 +629,7 @@ export class ctrlPolygon extends THREE.Object3D {
         if(edge){
             this.remove(edge);
             this.edges.splice(edgeIndex, 1);
-            edge.dispatchEvent({type:'dispose'})
+            edge.geometry.dispose()
         }
         this.point2dInfo && this.point2dInfo.points2d.splice(index, 1); //add
 
@@ -793,7 +793,8 @@ export class ctrlPolygon extends THREE.Object3D {
     
     dispose(){//add 
         this.parent.remove(this)
-        this.markers.concat(this.edges).forEach(e=>e.dispatchEvent({type:'dispose'})) 
+        this.markers.forEach(e=>e.dispose())  
+        this.edges.forEach(e=>e.geometry.dispose())
     }
     
     

src/custom/settings.js

@@ -459,7 +459,7 @@ let settings = {//设置   可修改
     pointEnableRT:false,//点云模式时是否绘制到rtEDL。如果不需要遮挡效果就不需绘制
     cloudSameMat:true,  //因为点云个数较多，就使用相同的材质，可见降低绘制速度（要保证所有点云的maxNodelevel一样，且要算出 material.spacing的平均值）
     
-    showCompass : isTest,
+    showCompass : false,
     showAxis : isTest,
     // testCube : true,
     // moveToCenter:true, //针对数据集间隔很远的场景  dis>5000 容易抖动

src/custom/utils/SplitScreen4Views.js

@@ -4,6 +4,9 @@ import * as THREE from "../../../libs/three.js/build/three.module.js";
 import SplitScreen from "./SplitScreen.js";
 
 
+import AxisViewer from "../objects/tool/AxisViewer.js";
+ 
+
 const viewportProps = [
     {
         left:0.5,
@@ -161,9 +164,16 @@ SplitScreen4Views.split = function(o={}){
         }) 
         viewer.dealBeforeRender = false           
     }    
-    viewports.forEach(viewport=>{viewport.beforeRender = beforeRender})
-     
+    viewports.forEach(viewport=>{
+        viewport.beforeRender = beforeRender
+        viewport.axis = new AxisViewer(viewport, viewer.renderArea,{domStyle:{
+            bottom: viewport.name == 'MainView' ? '2px' : '-25px',
+            right: (viewport.name == 'right' || viewport.name == 'back') ? '-25px' : viewport.name == 'MainView'?'20px':'5px',
+            width:'80px',height:'80px'}
+        })
+    })
      
+      
      
     this.enableMap(false)
     this.enableFloorplan(false)
@@ -184,6 +194,9 @@ SplitScreen4Views.split = function(o={}){
 
 
 SplitScreen4Views.recover = function(){
+    
+    viewer.viewports.forEach(e=>e.axis.dispose())
+    
     this.unSplit()
     viewer.mapViewer.viewports[0].beforeRender = null; 
     /* const {width, height} = viewer.renderer.getSize(new THREE.Vector2());

src/custom/viewer/ViewerNew.js

@@ -3,6 +3,9 @@ import * as THREE from "../../../libs/three.js/build/three.module.js";
 import {ClipTask, ClipMethod, CameraMode, LengthUnits, ElevationGradientRepeat} from "../../defines.js";
 import {TagTool} from "../objects/tool/TagTool.js"; 
 import Compass from "../objects/tool/Compass.js";
+import AxisViewer from "../objects/tool/AxisViewer.js";
+ 
+
 import {ExtendScene} from '../../viewer/ExtendScene.js' 
 import {transitions, easing, lerp} from '../utils/transitions.js' 
 import {Renderer} from "../../PotreeRendererNew.js"; 
@@ -457,6 +460,11 @@ export class Viewer extends ViewerBase{
                 this.viewports = [this.mainViewport]
                 
                 Potree.settings.showCompass && (this.compass = new Compass(Potree.settings.compassDom, this.mainViewport));
+                
+                 
+                //this.axis = new AxisViewer(this.mainViewport, this.renderArea )
+                
+                 
                 this.magnifier = new Magnifier(this);
                 this.reticule = new Reticule(this) 
                 this.scene.scene.add(this.magnifier) 

src/custom/viewer/viewerBase.js

@@ -307,4 +307,17 @@ export class ViewerBase extends THREE.EventDispatcher{
 		};
 	}
     
+    
+    
+    dispose(scene=this.scene){
+         
+        scene.clear();
+        this.renderer.dispose()
+        this.renderer.forceContextLoss()
+        let gl = this.renderer.getContext();
+        gl.getExtension("WEBGL_lose_context") && gl.getExtension("WEBGL_lose_context").loseContext()
+        this.renderArea.removeChild(this.renderer.domElement)
+        this.dispatchEvent('dispose') 
+    }
+    
 }