update

src/custom/objects/Magnifier.js

@@ -7,7 +7,7 @@ import Viewport from '../viewer/Viewport.js'
 import {ExtendView} from "../../viewer/ExtendView.js"; 
 const texLoader = new THREE.TextureLoader() 
 const circleGeo = new THREE.CircleGeometry(1.45,100);
-const sphereGeo = new THREE.SphereBufferGeometry(0.018,10,10);
+const sphereGeo = new THREE.SphereBufferGeometry(0.008,8,8);
  
  
 const magDisMin = 1;//相机离目标位置的距离的分界线，当离得远时要缩小fov以使看到的视野固定（望远镜效果）
@@ -15,7 +15,7 @@ const magDisMax = 20
 /* const radius_ = 0.2; //当相机离目标位置的距离>magDistance_时，希望看到的视野的半径
 const maxFov = THREE.Math.radToDeg(Math.atan(radius_ / magDisMin )) * 2//提前计算出当相机离目标位置的距离<magDisMin时的fov，均使用=magDisMin时的fov。只要保证该fov大于主相机的fov就会有放大效果 
  */
-let w = 250/1.43;
+let w = 230/1.43;
 let maxPX = 1366*1024 //ipad pro.  大于这个分辨率的就直接用devicePixelRatio， 如macbook也是
 const width2dPX = Math.round(window.devicePixelRatio >= 2 ? ( window.screen.width * window.screen.height >= maxPX ? window.devicePixelRatio/1.2 : window.devicePixelRatio/1.5)*w : w)  //触屏或高分辨率的可能要放大些。但在手机上不能太大
 //console.log('width2dPX', width2dPX)
@@ -132,12 +132,12 @@ export default class Magnifier extends THREE.Object3D {//放大镜or望远镜
         this.targetPoint.add(new THREE.Mesh(sphereGeo, new THREE.MeshBasicMaterial({ 
             color:"#ff0000",
             transparent:true,
-            opacity:0.5,  
+            opacity:0.7,  
         })))
         this.targetPoint.add(new THREE.Mesh(sphereGeo, new THREE.MeshBasicMaterial({ 
             color:"#ff0000",
             transparent:true,
-            opacity:0.2, 
+            opacity:0.3, 
             depthTest:false  //被遮挡层
         })))
         

src/custom/objects/Reticule.js

@@ -5,7 +5,7 @@ import math from '../utils/math.js'
 
 
 let texLoader = new THREE.TextureLoader()
-let defaultOpacity =  0.7
+let defaultOpacity =  0.5
 let Buttons = Potree.defines.Buttons
 
 
@@ -98,7 +98,7 @@ export default class Reticule extends THREE.Mesh{
 
 
     move(e){ 
-        if(e.type == "global_mousemove" && (e.isTouch || e.buttons != Buttons.NONE) && this.state != 'crosshair'){
+        if(e.type == "global_mousemove" && (e.isTouch || e.buttons != Buttons.NONE) && !this.state.cross){
             return//按下时不更新，除非拖拽测量
         }
            
@@ -168,8 +168,22 @@ export default class Reticule extends THREE.Mesh{
         }else{
             
             let n = camera.position.distanceTo(this.position)
-            s = 1 + .1 * n;
-            n < 1 && (s -= 1 - n)
+            if( n < 1 ){
+                if(this.state.cross ){   //测量时更精细些
+                     s = 0.7 * n
+                }else{
+                     s = 1.1 * n 
+                }
+            }else{
+                if(this.state.cross ){  
+                     s = 0.4 + 0.3 * n //n乘以的系数越高，其越不近大远小（大小越恒定）
+                }else{
+                     s = 1 + 0.1 * n; 
+                }  
+            }       
+            if(this.state.cross ){  //测量时更精细些
+                s /= viewer.images360.zoomLevel
+            }                                   
         }
         this.scale.set(s, s, s);
         

src/custom/objects/Sprite.js

@@ -157,7 +157,7 @@ export default class Sprite extends THREE.Mesh{
                     
                     let p2State = '', len=1,  p2StateHistory = []
                     while(p2State != 'got' && p2StateHistory.length<10){ 
-                        point2 = center.clone().add(lineDir.multiplyScalar(len));
+                        point2 = center.clone().add(lineDir.clone().multiplyScalar(len));
                          
                         r2 = Potree.Utils.getPos2d(point2, camera, viewer.renderArea, e.viewport);  
                         if(!r2.trueSide){ //很少遇到点2在背面的
@@ -232,7 +232,8 @@ export default class Sprite extends THREE.Mesh{
                         
                         if(index == 1){
                             orient2dAngle -= Math.PI 
-                        }   
+                        } 
+                        //console.log('orient2dAngle measure_point',index, orient2dAngle  )
                     } 
                 }else{
                     Potree.Utils.updateVisible(this, 'unableCompute', false)
@@ -249,6 +250,7 @@ export default class Sprite extends THREE.Mesh{
             this.root.quaternion.multiplyQuaternions(parentQua.invert(),camera.quaternion)    //乘上parentQua.invert()是为了中和掉父结点的qua，使只剩下camera.quaternion
         
             if(orient2dAngle){ 
+                //console.log('orient2dAngle ',this.root.name,orient2dAngle)
                 let qua = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1),  orient2dAngle) 
                 this.root.quaternion.multiply(qua) 
             }

src/custom/objects/TextSprite.js

@@ -50,6 +50,7 @@ export class TextSprite extends THREE.Object3D{
 			this.text = text + '';
 
 			this.updateTexture();
+            this.sprite.waitUpdate() //重新计算各个viewport的matrix 
 		}
 	}
 
@@ -86,60 +87,68 @@ export class TextSprite extends THREE.Object3D{
 	updateTexture(){
 		let canvas = document.createElement('canvas');
 		let context = canvas.getContext('2d');
-		context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface; 
+        const r = window.devicePixelRatio
+		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
        
         //context["font-weight"] = 100; //语法与 CSS font 属性相同。
-		// get size data (height depends only on font size)
-        
-        //this.text = 'f 啊啊啊 jg'
+                                                     
+		 
+        //this.text = '啊啊啊啊啊啊fag'
         
 		let metrics = context.measureText(this.text );
 		let textWidth = metrics.width;
-		let margin = this.margin || new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  );
-		let spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick;
-		let spriteHeight = 2 * margin.y + this.fontsize + 2 * this.rectBorderThick; 
+		let margin = (this.margin ? new THREE.Vector2().copy(this.margin) : new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  )).clone().multiplyScalar(r); 
+		let spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick * r ;
+		let spriteHeight = 2 * margin.y + this.fontsize * r + 2 * this.rectBorderThick * r; 
 		context.canvas.width = spriteWidth;
 		context.canvas.height = spriteHeight;
-		context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface; 
-
+		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
  
-        let expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值  
+        /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
+
+        context.textBaseline = "middle"
+         */
+        let expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) * r  // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值  
          
         //canvas原点在左上角
         context.textBaseline = 'alphabetic' //  "middle"  //设置文字基线。当起点y设置为0时，只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半，有的字是不一定显示一半的，尤其汉字)，alphabetic时是英文字母的那条基线。
         
-        let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; // 当前文本字符串在这个字体下用的实际高度
+        //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; // 当前文本字符串在这个字体下用的实际高度
         
         //文字y向距离从textBaseline向上算
-        let y = metrics.actualBoundingBoxAscent + margin.y + expand 
+        let actualBoundingBoxAscent = metrics.actualBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : metrics.actualBoundingBoxAscent //有的流览器没有。只能大概给一个
+        let y = actualBoundingBoxAscent + margin.y + expand 
         //console.log(this.text, 'y' , y, 'actualBoundingBoxAscent', metrics.actualBoundingBoxAscent,'expand',expand )
-        
+                                  
         
         // border color
         context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' +
             this.borderColor.b + ',' + this.borderColor.a + ')';
-  
-        context.lineWidth = this.rectBorderThick;
+            
+        let rectBorderThick = this.rectBorderThick * r;
+        
+        context.lineWidth = rectBorderThick
 		// background color
 		context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' +
 			this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
-        this.roundRect(context, this.rectBorderThick / 2, this.rectBorderThick / 2,
-            spriteWidth - this.rectBorderThick, spriteHeight - this.rectBorderThick, this.borderRadius);
+        this.roundRect(context, rectBorderThick / 2 , rectBorderThick / 2,
+            spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
         
 		// text color
         if(this.textBorderThick){
             context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' +
                 this.textBorderColor.b + ',' + this.textBorderColor.a + ')';
-            context.lineWidth = this.textBorderThick;
-            context.strokeText(this.text , this.rectBorderThick + margin.x, y /* spriteHeight/2  + expand */ );
+            context.lineWidth = this.textBorderThick * r;
+            context.strokeText(this.text , rectBorderThick + margin.x,  y /* spriteHeight/2  + diff */ );
         }
         
 		context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' +
 			this.textColor.b + ',' + this.textColor.a + ')';
-		context.fillText(this.text , this.rectBorderThick + margin.x, y  /* spriteHeight/2  + expand  */);//x,y
+		context.fillText(this.text , rectBorderThick + margin.x,  y/* spriteHeight/2  + diff */ );//x,y
+ 
 
 		let texture = new THREE.Texture(canvas);
-		texture.minFilter = THREE.LinearFilter; //LinearMipMapLinearFilter会缩放到power of 2
+		texture.minFilter = THREE.LinearFilter;
 		texture.magFilter = THREE.LinearFilter;
 		texture.needsUpdate = true;
         
@@ -147,10 +156,9 @@ export class TextSprite extends THREE.Object3D{
             this.sprite.material.map.dispose()
         }
 		this.sprite.material.map = texture;
-		 
-        
+		  
         
-		this.sprite.scale.set(spriteWidth * 0.01, spriteHeight * 0.01, 1.0);
+		this.sprite.scale.set(spriteWidth * 0.01 / r, spriteHeight * 0.01 / r, 1.0);
 	}
 
 	roundRect(ctx, x, y, w, h, r){

src/custom/objects/tool/Measure.js

@@ -35,6 +35,7 @@ const planeDepthInfo = {
     maxClipFactor:0.1
 }  
  
+const textSizeRatio = math.linearClamp(window.innerWidth * window.innerHeight , 360*720,   1920*1080, 0.75, 1)  //pc字显示大一些
  
 
 const markerSizeInfo = {
@@ -47,7 +48,7 @@ const mainLabelProp = {
     textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
     textBorderColor: {r:255, g: 255, b:255, a: 1.0},
     textBorderThick:3,
-    fontsize: 14, 
+    fontsize: 15 * textSizeRatio,  
     borderRadius : 12, margin:{x:20,y:4},
     renderOrder : 5, pickOrder:5, 
     disToLine:-0.15,
@@ -66,7 +67,7 @@ const mainLabelProp = {
 const subLabelProp = { 
     backgroundColor: {r: 255, g: 255, b: 255, a:config.measure.default.opacity},
     textColor: {r: 0.3, g: 0.3, b:0.3, a: 1.0},
-    fontsize:12, borderRadius : 12,  margin:{x:20,y:4},
+    fontsize:15 * textSizeRatio,   borderRadius : 12,  margin:{x:20,y:4},
     renderOrder : 4, pickOrder:4, 
 }
 
@@ -281,7 +282,7 @@ export class Measure extends ctrlPolygon{
                 /* this.closed || */edgeLabel.setVisible(edgeLabel.shouldVisi)  
                 if(edgeLabel.shouldVisi){
                     this.lineDir = new THREE.Vector3().subVectors(point,nextPoint).normalize() //[point,nextPoint]
-                   
+                    
                     setEdgeLabel(edgeLabel,point,nextPoint,distance)
                     
                 }
@@ -338,6 +339,9 @@ export class Measure extends ctrlPolygon{
 
 
 
+
+
+
     setEdgeLabelPos(label,p1,p2){ //调整label的位置，使倾斜后看起来在线的中心，而不要挡住端点
         let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);  
         
@@ -656,6 +660,11 @@ export class Measure extends ctrlPolygon{
     
     setPosition(index, position) {
         super.setPosition(index, position)
+        
+        //相连的点的箭头也要更新方向 
+        this.markers[(index + this.points.length - 1) % this.points.length].waitUpdate()
+        this.markers[(index + this.points.length + 1) % this.points.length].waitUpdate()
+        
         let event = {
 			type: 'marker_moved',
 			measure:	this,
@@ -663,6 +672,7 @@ export class Measure extends ctrlPolygon{
 			position: position.clone()
 		};
 		this.dispatchEvent(event); 
+         
     }
     
     dispose(){//add
@@ -858,7 +868,7 @@ export class Measure extends ctrlPolygon{
         
         
         const areaLabel = new TextSprite(
-            $.extend(mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel_'} )
+            $.extend({}, mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel', fontsize:16*textSizeRatio} )
         )
         
         areaLabel.addEventListener('mouseover',()=>{

src/custom/objects/tool/MeasuringTool.js

@@ -420,7 +420,7 @@ export class MeasuringTool extends THREE.EventDispatcher{
                      
                     marker.isDragging = true 
                     
-                    console.log('continueDrag' , marker.uuid)
+                    //console.log('continueDrag' , marker.uuid)
                     measure.continueDrag(marker, e)    
                 } 
 				 

src/custom/objects/tool/ctrlPolygon.js

@@ -530,6 +530,7 @@ export class ctrlPolygon extends THREE.Object3D {
     updateMarker(marker, pos){
         marker.position.copy(pos);
         marker.waitUpdate();
+         
     }
     
     

src/viewer/ExtendView.js

@@ -234,21 +234,36 @@ class ExtendView extends View {
         
         this.restrictPos(endPosition)
          
-         
+        if(info.endYaw == void 0){
+                                   
+                                      
+                                                               
+                                             
+            if(info.target ){
+                endTarget = new THREE.Vector3().copy(info.target)  
+                endQuaternion = math.getQuaFromPosAim(endPosition,endTarget) //若为垂直，会自动偏向x负的方向
+           
+                                                 
+            }else if(info.quaternion){
+                endQuaternion = info.quaternion.clone()
+            }   
+            
+            if(endQuaternion && math.closeTo(Math.abs(this.direction.z), 1, 1e-4)){ //在垂直的视角下的quaternion刚开始突变的厉害，这时候可能渐变yaw比较好(如俯视时点击测量线)
+                let a = this.clone();
+                a.quaternion = endQuaternion;
+                info.endYaw = a.yaw; info.endPitch = a.pitch;
+                console.log('turn to yaw')
+            }
+        }
+        
+ 
         if(info.endYaw != void 0) { 
             startPitch = this.pitch
             endPitch = info.endPitch; 
             let a = math.getStandardYaw(this.yaw, info.endYaw )
             startYaw = a[0];   endYaw = a[1];
-		}else if(info.target ){
-			endTarget = new THREE.Vector3().copy(info.target)  
-            endQuaternion = math.getQuaFromPosAim(endPosition,endTarget) //若为垂直，会自动偏向x负的方向
-            dir = new THREE.Vector3().subVectors(endTarget, endPosition).normalize()
-            //console.log(dir, this.direction)   
-		}else if(info.quaternion){
-            endQuaternion = info.quaternion.clone()
-        }
-         
+            console.log('startYaw', startYaw, 'endYaw', endYaw)
+		}  
         if(endQuaternion){ 
             startQuaternion = this.quaternion 
         }

src/viewer/NavigationCube.js

@@ -757,8 +757,8 @@ class NavCubeViewer extends ViewerBase{
     
     updateCamera(){  
         let view = this.listenViewport.view
-        this.view.quaternion = view.quaternion   //this.view.rotation = view.rotation 
-        this.view.yaw = view.yaw
+        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）转动
           
@@ -767,7 +767,7 @@ class NavCubeViewer extends ViewerBase{
     
     applyToMainView(){
         let view = this.listenViewport.view
-        view.quaternion = this.view.quaternion 
+        view.rotation = this.view.rotation 
     }
     
     pushHomeBtn(){