xzw 2 vuotta sitten
vanhempi
commit
5ad89f1057
3 muutettua tiedostoa jossa 102 lisäystä ja 10 poistoa
  1. 84 5
      src/custom/objects/Sprite.js
  2. 17 4
      src/custom/objects/TextSprite.js
  3. 1 1
      src/viewer/EDLRendererNew.js

+ 84 - 5
src/custom/objects/Sprite.js

@@ -23,7 +23,8 @@ export default class Sprite extends THREE.Mesh{
         
         
         let update = (e)=>{
-            this.update(e) 
+            //this.update(e)
+            this.needsUpdate = true
         }
         viewer.mapViewer && viewer.mapViewer.addEventListener("camera_changed",  update) 
         viewer.addEventListener("camera_changed",  update) 
@@ -33,7 +34,8 @@ export default class Sprite extends THREE.Mesh{
          
         
         let applyMatrix = (e)=>{
-            this.applyMatrix(e)
+            if(this.needsUpdate) this.update(e)
+            else this.applyMatrix(e)
         }
         viewer.addEventListener("raycaster", applyMatrix)        //before render
         viewer.addEventListener("render.begin", applyMatrix) //before render  //magnifier时要禁止吗
@@ -76,7 +78,7 @@ export default class Sprite extends THREE.Mesh{
             v = false
         }            
          
-        if(!this.latestRealVisi && v){//变为可见后先update 
+        /* if(!this.latestRealVisi && v){//变为可见后先update 
             this.latestRealVisi = true
             setTimeout(()=>{
                 this.update()
@@ -84,7 +86,7 @@ export default class Sprite extends THREE.Mesh{
             return false
         }
         
-        this.latestRealVisi = v
+        this.latestRealVisi = v */
         return v;
     }
     
@@ -156,6 +158,7 @@ export default class Sprite extends THREE.Mesh{
         if(!matrix){
             this.update(e)
             matrix = this.matrixMap.get(e.viewport);
+            if(!matrix)return                
         }
         
         if(e.viewport == this.useViewport){
@@ -176,4 +179,80 @@ export default class Sprite extends THREE.Mesh{
         this.removeAllListeners()
         this.parent && this.parent.remove(this)
     }
-}
+}
+
+
+
+/* 
+
+    let orient2d
+        
+    if(this.lineDir){
+        this.root.updateMatrix();//先更新,getWorldPosition才能得到正确的
+        this.root.updateMatrixWorld(true)
+        let center = this.root.getWorldPosition(new THREE.Vector3())
+        //由于两个端点容易在屏幕外,所以使用center和center加dir
+        let lineDir = this.lineDir.clone();
+        
+        
+        let r1 = Potree.Utils.getPos2d(center, camera, viewer.renderArea, e.viewport); 
+        if(!r1.trueSide)return  Potree.Utils.updateVisible(this, 'unableCompute', false);// 但这句会使realVisible为false从而无法更新//console.error('!r1.trueSide') //中心点如果在背面直接不渲染了
+            
+        let r2, point2
+        
+        let p2State = '', len=1,  p2StateHistory = []
+        while(p2State != 'got' && p2StateHistory.length<10){ 
+            point2 = center.clone().add(lineDir.multiplyScalar(len));
+             
+            r2 = Potree.Utils.getPos2d(point2, camera, viewer.renderArea, e.viewport);  
+            if(!r2.trueSide){ //很少遇到点2在背面的
+                if(!p2StateHistory.includes('tooLong-reverse')){
+                    p2State = 'tooLong-reverse'  //先尝试反向
+                    len = -len
+                }else{
+                    p2State = 'tooLong'
+                    len = len / 2
+                }
+            }else{
+                let dis = r2.pos.distanceTo(r1.pos)
+                if(dis == 0){
+                    //console.log('dis == 0') 
+                    Potree.Utils.updateVisible(this, 'unableCompute', false)
+                    return
+                    break
+                } 
+                if(dis<10 && !p2StateHistory.includes('tooLong')){//和r1的屏幕距离太近,要加长,否则精度过低
+                    p2State = 'tooShort'
+                    len = 100/dis * len  
+                }else{ 
+                    p2State = 'got'; break;
+                }
+            } 
+            p2StateHistory.push(p2State) 
+        }
+        //console.log(p2StateHistory,len)
+        
+        if(!r2.trueSide){
+            return  Potree.Utils.updateVisible(this, 'unableCompute', false)//, console.log('  !r2.trueSide', )
+        }
+         
+        Potree.Utils.updateVisible(this, 'unableCompute', true)
+        let p1 = r1.pos,  p2 = r2.pos
+        let vec = new THREE.Vector2().subVectors(p1,p2);
+        let angle = -vec.angle() //根据测量线在屏幕上的角度在旋转label,使之和屏幕上的二维线平行。
+        if(p1.x < p2.x) angle += Math.PI  //避免字是倒着的情况
+         
+        orient2d = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1),  angle)
+        //console.log(this.parent.text, THREE.Math.radToDeg(angle), p1.x < p2.x   )
+    }
+
+    let parentQua = this.root.parent.getWorldQuaternion(new THREE.Quaternion)
+    this.root.quaternion.multiplyQuaternions(parentQua.invert(),camera.quaternion)    //乘上parentQua.invert()是为了中和掉父结点的qua,使只剩下camera.quaternion
+
+    if(this.lineDir){ 
+        this.root.quaternion.multiply(orient2d) 
+    }
+
+
+
+ */

+ 17 - 4
src/custom/objects/TextSprite.js

@@ -38,6 +38,7 @@ export class TextSprite extends THREE.Object3D{
 		this.textColor = options.textColor || {r: 0, g: 0, b: 0, a: 1.0};
         this.borderColor = options.borderColor || { r: 0, g: 0, b: 0, a: 0.0 };
 		this.borderRadius = options.borderRadius || 6;
+        this.margin = options.margin
         if(options.text != void 0)this.setText(options.text)
         this.name = options.name 
          
@@ -97,7 +98,7 @@ export class TextSprite extends THREE.Object3D{
         
 		let metrics = context.measureText(this.text );
 		let textWidth = metrics.width;
-		let margin = new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  );
+		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; 
 		context.canvas.width = spriteWidth;
@@ -105,10 +106,22 @@ export class TextSprite extends THREE.Object3D{
 		context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface; 
 
          
-        let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
+        /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
 
         context.textBaseline = "middle"
+         */
+        let expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值  
+         
+        //canvas原点在左上角
+        context.textBaseline = 'alphabetic' //  "middle"  //设置文字基线。当起点y设置为0时,只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半,有的字是不一定显示一半的,尤其汉字),alphabetic时是英文字母的那条基线。
+        
+        let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; // 当前文本字符串在这个字体下用的实际高度
+        
+        //文字y向距离从textBaseline向上算
+        let y = metrics.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 + ')';
@@ -125,12 +138,12 @@ export class TextSprite extends THREE.Object3D{
             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,spriteHeight/2  + diff );
+            context.strokeText(this.text , this.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, spriteHeight/2  + diff );//x,y
+		context.fillText(this.text , this.rectBorderThick + margin.x,  y/* spriteHeight/2  + diff */ );//x,y
 
 		let texture = new THREE.Texture(canvas);
 		texture.minFilter = THREE.LinearFilter;

+ 1 - 1
src/viewer/EDLRendererNew.js

@@ -197,7 +197,7 @@ export class EDLRenderer{//Eye-Dome Lighting 眼罩照明
         
         let target = params.target || null
         
-		const resolution = rtEDL ? new THREE.Vector2(rtEDL.width,rtEDL.height) : params.viewport ? params.viewport.resolution2 : this.viewer.renderer.getSize(new THREE.Vector2()); 
+        const resolution = (rtEDL && Potree.settings.useRTPoint) ? new THREE.Vector2(rtEDL.width,rtEDL.height) : params.viewport ? params.viewport.resolution2 : this.viewer.renderer.getSize(new THREE.Vector2());//突然发现mobile用resolution2点云会放大