Explorar el Código

全景图的触控缩放

xzw hace 3 años
padre
commit
fc60187fed

+ 20 - 9
src/modules/Images360/Images360.js

@@ -107,18 +107,29 @@ export class Images360 extends EventDispatcher{
 
         let scroll = (e)=>{ 
             if(e.hoverViewport != viewer.mainViewport)return
-            let zoom;
-            if(Potree.settings.displayMode == 'showPanos' && Potree.settings.zoom.enabled){
+            
+            /* if(Potree.settings.displayMode == 'showPanos' && Potree.settings.zoom.enabled){
+                
+            } */
+        }
+        
+        viewer.fpControls.on('dollyStopCauseUnable',(e)=>{ 
+            if(/* e.hoverViewport != viewer.mainViewport ||  */!Potree.settings.zoom.enabled)return 
+            
+            if(e.scale != void 0){//触屏
+                this.zoomBy(e.scale, e.pointer)
+            }else{//滚轮
+                let zoom;
                 if(e.delta > 0){
                     zoom = 1 + this.scrollZoomSpeed 
                 }else{
                     zoom = 1 - this.scrollZoomSpeed
                 }
-                e.delta != 0 && this.zoomBy(zoom, e.pointer)
-            }
-        }
-        viewer.addEventListener('global_mousewheel', scroll);
-
+                e.delta != 0 && this.zoomBy(zoom)
+            } 
+        })  
+        
+        
 
         let click = (e) => {//不用"mouseup" 是因为 mouseup有drag object时也会触发
             if(Potree.settings.unableNavigate || this.flying  || e.button != THREE.MOUSE.LEFT || e.hoverViewport != viewer.mainViewport )return //
@@ -1223,9 +1234,9 @@ export class Images360 extends EventDispatcher{
             //定点缩放:使当前鼠标所在的位置缩放后不变
             let view = viewer.scene.view 
             let originDir = viewer.scene.view.direction;
-            let oldPointerDir = viewer.inputHandler.getMouseDirection().direction
+            let oldPointerDir = viewer.inputHandler.getMouseDirection(pointer).direction
             viewer.setFOV(Potree.config.view.fov * (1 / this.zoomLevel)) 
-            let newPointerDir = viewer.inputHandler.getMouseDirection().direction
+            let newPointerDir = viewer.inputHandler.getMouseDirection(pointer).direction
               
             view.direction = oldPointerDir; //获取一下鼠标所在位置的yaw 和 pitch
             let oldPitch = view.pitch, oldYaw = view.yaw;

+ 52 - 13
src/navigation/FirstPersonControls.js

@@ -82,11 +82,17 @@ export class FirstPersonControls extends EventDispatcher {
             let camera = viewport.camera 
             let mode 
             if(e.isTouch){
-                mode = e.touches.length == 1 ? (!e.drag.dragViewport || e.drag.dragViewport.name == 'MainView') ? 'rotate' : 'pan'  : 'scale'
+                if(e.touches.length == 1){
+                    mode = (!e.drag.dragViewport || e.drag.dragViewport.name == 'MainView') ? 'rotate' : 'pan' 
+                }else if(e.touches.length == 2){
+                    mode = 'scale'
+                }else{
+                    mode = (!e.drag.dragViewport || e.drag.dragViewport.name == 'MainView') ? 'pan' : 'scale' 
+                } 
             }else{
                 mode = e.buttons === Buttons.LEFT && (!e.drag.dragViewport || e.drag.dragViewport.name == 'MainView') ? 'rotate' : 'pan'
             }
-            console.log('mode  ',mode )
+            //console.log('mode  ', mode )
             let moveSpeed = this.currentViewport.getMoveSpeed();
             if (e.drag.startHandled === undefined) {///???????
 				e.drag.startHandled = true;
@@ -126,7 +132,7 @@ export class FirstPersonControls extends EventDispatcher {
                 } 
                 
                 
-                console.log('rotate:', this.pitchDelta, e.pointer.toArray(), this.pointerDragStart.toArray())
+                //console.log('rotate:', this.pitchDelta, e.pointer.toArray(), this.pointerDragStart.toArray())
                 
                 
                 this.pointerDragStart.copy(e.pointer)
@@ -171,7 +177,7 @@ export class FirstPersonControls extends EventDispatcher {
                     
                 }else{  
                     if(e.drag.intersectStart){//如果拖拽着点云 
-                        console.log('pan 1') 
+                        
                         if(e.drag.z == void 0){//拖拽开始
                             let pointerStartPos2d = e.drag.intersectStart.location.clone().project(camera);//识别到的点云点的位置
                             e.drag.z = pointerStartPos2d.z //记录z,保持拖拽物体到屏幕距离不变,所以z深度不变
@@ -196,9 +202,14 @@ export class FirstPersonControls extends EventDispatcher {
                       
                         camera.projectionMatrixInverse = _projectionMatrixInverse
                         this.translationWorldDelta.copy(moveVec.negate())  //这里没法用add,原因未知,会跳动
-                          
+                        //console.log('pan 1', this.translationWorldDelta.clone())   
+                        //四指松开剩三指时会偏移一下,暂不知道哪里的问题,或许跟开头防止点云吸附有关?
+                        
+                        
+                        
+                        
                     }else{ //如果鼠标没有找到和点云的交点,就假设移动整个模型(也可以去扩大范围寻找最近点云)
-                        console.log('pan 2')  
+                         
                         /* let center = viewer.scene.pointclouds[0].position;
                         let radius = camera.position.distanceTo(center);
                         let ratio = radius * Math.tan(THREE.Math.degToRad(camera.fov)/2) / 1000 */
@@ -215,7 +226,7 @@ export class FirstPersonControls extends EventDispatcher {
                         let ratio = speed  * Math.tan(fov/2) 
                         this.translationDelta.x -= e.drag.pointerDelta.x  * ratio
                         this.translationDelta.z -= e.drag.pointerDelta.y  * ratio 
-                         
+                         //console.log('pan2', e.drag.pointerDelta)
                     }
                 } 
                 
@@ -250,6 +261,7 @@ export class FirstPersonControls extends EventDispatcher {
         let dolly = (e={})=>{
                        
             if(this.currentViewport.unableChangePos){//全景时 
+                this.emit('dollyStopCauseUnable',e)
                 return 
             }
             
@@ -346,21 +358,48 @@ export class FirstPersonControls extends EventDispatcher {
 		this.viewer.addEventListener('global_mousewheel', scroll);
 		this.viewer.addEventListener('global_dblclick', dblclick);
         
+        
+        
+        let prepareScale = (e)=>{//触屏的scale
+            this.dollyStart.subVectors(e.touches[0].pointer, e.touches[1].pointer);
+        }
+        let prepareRotate = (e)=>{ 
+            this.pointerDragStart = e.pointer.clone() 
+        }
+        let preparePan = (e)=>{//触屏的pan点云    还是会偏移
+            
+            var pos2d = {
+                onlyGetIntersect : true,
+                clientX : e.touches[0].touch.pageX,
+                clientY : e.touches[0].touch.pageY,
+            } 
+             
+            var intersect = this.viewer.inputHandler.onMouseMove(pos2d) 
+            e.drag.intersectStart = intersect
+            e.drag.z = void 0  //清空
+            e.drag.end.copy(e.pointer)  
+            console.log('preparePan '   )
+        }
+        
         this.viewer.addEventListener('startDragging', (e)=>{
             this.setCurrentViewport(e)
-            this.pointerDragStart = e.pointer.clone()
+            prepareRotate(e)
         })
         this.viewer.addEventListener('global_touchstart', (e)=>{
             if(e.touches.length==2){//只监听开头两个指头
-                this.dollyStart.subVectors(e.touches[0].pointer, e.touches[1].pointer);
+                prepareScale(e)
             }
         })
         this.viewer.addEventListener('global_touchend', (e)=>{
-            if(e.touches.length==1){//停止scale,开始rotate
-                this.pointerDragStart = e.pointer.clone()  
+            
+            if(e.touches.length==2){//停止平移,开始scale
+                prepareScale(e)
+            }else if(e.touches.length==1){//停止scale,开始rotate
+                prepareRotate(e)
                 //this.pointerDragStart = null
-                console.log('只剩一个', e.pointer.toArray())
-                
+                //console.log('只剩一个', e.pointer.toArray())
+            }else if(e.touches.length>=3){//重新准备下平移(因为抬起的指头可能包含平移使用的数据),否则抬起时漂移
+                preparePan(e)
             }
         })
        

+ 13 - 9
src/navigation/InputHandler.js

@@ -166,11 +166,13 @@ export class InputHandler extends EventDispatcher {
 			let rect = this.domElement.getBoundingClientRect();
 			let x = e.touches[0].pageX;
 			let y = e.touches[0].pageY;
-            console.log('onTouchMove touches.length === 1')
-            this.dealPointerMove(x, y, e, true)
+ 
+            this.dealPointerMove(x, y, e, true) //究竟多指要不要也执行dealPointerMove
             
-		}else{
+		}else{ 
             this.updateTouchesInfo(e)
+            this.drag.pointerDelta.subVectors(this.pointer,  this.drag.end)
+            this.drag.end.copy(this.pointer)
         }
         
         
@@ -220,7 +222,7 @@ export class InputHandler extends EventDispatcher {
                 type: 'global_' + e.type, 
             }
         ));  
-        console.log('touchend length '+e.touches.length, this.touches.length)
+        //console.log('touchend length '+e.touches.length, this.touches.length)
 	}
 
 
@@ -617,15 +619,17 @@ export class InputHandler extends EventDispatcher {
         }
     }
 
-
-    onMouseMove (e) {
-        this.dealPointerMove(e.clientX, e.clientY, e )
+    
+    
+    onMouseMove (e) { 
+        return this.dealPointerMove(e.clientX, e.clientY, e )
     }
 
     dealPointerMove(x, y, e, isTouch){ 
         if(isTouch){
             var  {  camera, viewport  } = this.updateTouchesInfo(e) 
         }else{
+            
             var  {  camera, viewport  } = this.getPointerInViewport(x, y ,  this.dragViewport) 
         }
          
@@ -638,7 +642,7 @@ export class InputHandler extends EventDispatcher {
 			let names = hoveredElements.map(h => h.object.name).join(", ");
 			if (this.logMessages) console.log(`${this.constructor.name}: onMouseMove; hovered: '${names}'`);
 		}
-        
+         
         //add
         let intersectPoint = viewport.noPointcloud? null : Utils.getMousePointCloudIntersection(
             viewport,
@@ -659,7 +663,7 @@ export class InputHandler extends EventDispatcher {
             intersectPoint.orthoIntersect = pos3d.clone()
                
         }    
-        if(e.onlyGetIntersect){
+        if(e.onlyGetIntersect){ 
             return intersectPoint
         }
         e.preventDefault();

+ 7 - 0
src/settings.js

@@ -299,6 +299,13 @@ let settings = {//设置   可修改
     loadPointsWhenUnfocus:true, //页面unfocus时也仍在加载点云 */
    
     //initialShowPano:true
+    
+    
+    zoomFromPointert:{//定点缩放(包括点云模式、全景模式、地图)
+        whenPanos:true,
+        whenPointCloud:true,
+        map:true,
+    },
 }