fix: 1

src/pages/LaserBim.vue

@@ -87,17 +87,20 @@ const getView = ()=>{
 const initConvertView = (noNeedBindEvent) => {
     if(sourceApp && targetApp ){
         views.init(sourceApp, targetApp , sourceApp.viewer.inputHandler.domElement, 'laser', getView(), 
-                    sourceApp.viewer.images360.panos.slice(0,2).map(e=>e.position), )
+                    sourceApp.viewer.images360.panos.slice(0,2)  )
     }
 }
-
+const syn = (e)=>{
+    targetApp && views.receive( getView() )
+}
+views.addEventListener('needsSyn',syn)
+window.views = views
 const onLoadSource = () => {
     
     if(views.loaded){
         views.clear({dontClearTarget:true})   
     }
-
-
+    
     sourceApp = sourceFrame.value.contentWindow
     sourceApp.loaded.then(sdk => {
         if (mode.value != 0) {
@@ -105,16 +108,19 @@ const onLoadSource = () => {
         }
         
         window.viewer1 = sourceApp.viewer 
-        
+        window.app1 = sourceApp
         viewer1.mainViewport.view.minPitch+=0.01//防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
         viewer1.mainViewport.view.minPitch-=0.01
-        
-        
+        sourceApp.Potree.settings.rotAroundPoint = false
+        viewer1.images360.panos.forEach(pano=>{
+            viewer1.updateVisible(pano.label2, 'notDisplay', true)
+            pano.dispatchEvent({type:'changeMarkerTex',name:'ring'})
+        }) 
         initConvertView()
         sourceSceneName = sourceApp.Potree.settings.number
-        sourceApp.viewer.addEventListener('camera_changed', e => { 
-            targetApp && views.receive( getView() )
-        })  
+         
+        sourceApp.viewer.addEventListener('camera_changed', syn) 
+             
         
     }) 
     
@@ -126,7 +132,7 @@ const onLoadSource = () => {
 const onLoadTarget = () => { 
  
     targetApp = targetFrame.value.contentWindow
- 
+    window.app2 = targetApp
     targetApp.loaded.then(viewer=>{
         window.viewer2 = targetApp.viewer
         initConvertView() 

src/utils/ConvertViews.js

@@ -1,12 +1,18 @@
 import math from './math.js'
+let Bimface
+const belowHeight = 0.4
+const isEdit = true
 
+
+
+let texLoader = new THREE.TextureLoader()  
 export default class ConvertViews extends THREE.EventDispatcher{
     constructor() {
         super()
         this.sourceApp = null
         this.targetApp = null
         this.sourceType = null
-       
+        
     }
 
      
@@ -27,33 +33,42 @@ export default class ConvertViews extends THREE.EventDispatcher{
         this.targetApp = targetApp
         this.sourceDom = sourceDom
         this.sourceType = sourceType
+        this.sourcePano = sourcePano
+        this.targetPano = [
+            {position: new THREE.Vector3( -5.313605730801787,  -4.889868407960505,  1.237447893355817),},
+            {position: new THREE.Vector3( -5.337403524084278,  -2.5012228235167737, 1.2808838933558175),} 
+        ]
         let viewer = this.viewer = targetApp.viewer 
-        
+        //viewer.THREE = targetApp.THREE
         this.needConvertAxis = sourceType == '4dkk' // Y朝上需要转换
-        
+        Bimface = targetApp.Glodon.Bimface
         this.lastCamStatus = viewer.getCameraStatus()
         this.computeShift(sourcePano)
-        
-        viewer.setNavigationMode(targetApp.Glodon.Bimface.Viewer.NavigationMode3D.Walk)
+        if(isEdit){
+            this.createPanoPannel()
+        }
+        viewer.setNavigationMode( Bimface.Viewer.NavigationMode3D.Walk)
         viewer.setFlySpeedRate(5)
         viewer.getViewer().setTransitionAnimationState(false) //setCameraStatus瞬间变化相机 ,or setCameraAnimation?
          
-        viewer.addEventListener('Rendered', (e)=>{//反向改变左侧相机
+        needBindEvent && viewer.addEventListener('Rendered', (e)=>{//反向改变左侧相机
+            if(this.synPaused)return  
             let info = viewer.getCameraStatus() 
             let poseChanged = !math.closeTo(this.lastCamStatus.position, info.position)
                 || !math.closeTo(this.lastCamStatus.target, info.target)
                 || !math.closeTo(this.lastCamStatus.fov, info.fov)
             
             if(poseChanged){
-                if(sourceApp.canChangePos()){
+                if(sourceApp.canChangePos()){ 
+                    
                     this.send(info)
                     this.lastCamStatus = info 
                 }  
             }  
         })  
+        //this.addMesh(cameraData)
         
-        
-        /* viewer.addEventListener(targetApp.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
+        /* viewer.addEventListener( Bimface.Viewer.Viewer3DEvent.ViewAdded,
             ()=>{
                 this.loaded = true
                 if(this.firstData){
@@ -64,92 +79,30 @@ export default class ConvertViews extends THREE.EventDispatcher{
         this.loaded = true
         this.receive(cameraData)
         needBindEvent && this.bindCamEvent() 
-          
-    }
-
-
-
- 
-    bindCamEvent(){//传递到另一边的dom 
-        this.lockCamera(true)
         
         
-        /* this.viewer.addEventListener(this.targetApp.Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,(e)=>{
-            console.log('MouseClicked',e)
-        }); */
-        
         
-        let getEvent = (type, e)=>{
-            return new MouseEvent(type, {
-                bubbles: false,//?
-                cancelable: true,
-                view: this.sourceApp,
-                clientX: e.clientX, clientY: e.clientY, 
-                button: e.button, buttons: e.buttons,  which: e.which,
-                altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey:e.shiftKey, metaKey: e.metaKey, 
-                detail:e.detail, 
-                //target :  dom2  
-            });
-            
-        }  
-        
-        let dom1 = this.viewer.getDomElement() 
-        //let pointerDownPos = new THREE.Vector2
-        dom1.addEventListener('mousedown',(e)=>{
-            let event = getEvent('mousedown', e)
-            this.sourceApp && this.sourceDom.dispatchEvent(event)  
-            //pointerDownPos.set(e.clientX,e.clientY)
-        })
-        dom1.addEventListener('mousemove',(e)=>{
-            let event = getEvent('mousemove', e)
-            this.sourceApp && this.sourceDom.dispatchEvent(event)  
-        })
-        dom1.addEventListener('mouseup',(e)=>{  
-            let event = getEvent('mouseup', e)
-            event.unableClick = true //最好禁止右侧点击行走。否则和点击效果冲突
-            this.sourceApp && this.sourceApp.dispatchEvent(event)   //mouseup 在laser中加在window上的 
-        })
-        dom1.addEventListener('mousewheel',(e)=>{
-            let event = getEvent('mousewheel', e)
-            event.wheelDelta = e.wheelDelta  //wheelDelta没法在getEvent参数中赋值
-            this.sourceApp && this.sourceDom.dispatchEvent(event)  
-        })
-        let stop = (e)=>{ //drag到另一边时停止旋转， 防止转到另一边
-            let event = getEvent('mouseup', e)
-            this.sourceApp && this.sourceApp.dispatchEvent(event)   
-        }
-        dom1.addEventListener('mouseout',stop)
-        dom1.addEventListener('mouseover',stop)
-    
         
     }
+ 
 
     receive(data){
-        
+        this.dispatchEvent({type:'updateBtnState'})   
+        if(this.synPaused)return
         if(!this.loaded){
             return this.firstData = data
         }
-        /* if(this.isMaster){
-            return //正在操作当前，不接收 
-        } */
-        
+         
         let position = new THREE.Vector3, target = new THREE.Vector3
         let currStatus = this.viewer.getCameraStatus()
         if(data.position){
             position = new THREE.Vector3().copy(data.position)
         } 
-        
-        
+         
         
         if(!data.target){
-            if(data.quaternion){ 
-                /* if(this.needConvertAxis){
-                    data.quaternion = math.convertQuaternion.YupToZup(data.quaternion)
-                } */
-                let dir = new THREE.Vector3(0, 0, -1).applyQuaternion(data.quaternion)
-                //dir.applyQuaternion(this.diffQuaternion)/////!
-                 
-                
+            if(data.quaternion){   
+                let dir = new THREE.Vector3(0, 0, -1).applyQuaternion(data.quaternion) 
                 target.copy(position).add(dir) 
             }
         }else{
@@ -187,7 +140,7 @@ export default class ConvertViews extends THREE.EventDispatcher{
             camera.fov = data.fov
             camera.updateProjectionMatrix()
         }
-
+         
         //fov, near,  far
         /*   aspect: 0.7879440258342304
             coordinateSystem: "world"
@@ -200,8 +153,15 @@ export default class ConvertViews extends THREE.EventDispatcher{
             up: {x: 0, y: 1.534753124827774e-13, z: 1}
             version: 1
             zoom: 0 */
-
-
+    
+        /* this.plane.quaternion.copy(camera.quaternion)
+        this.plane.updateMatrix()
+        this.plane.updateMatrixWorld() 
+        
+        let matrix = new THREE.Matrix4()
+        matrix.makeRotationFromQuaternion(camera.quaternion)
+        
+        extObjMng.setTransformation(this.plane.name, matrix)*/
     }
 
 
@@ -237,13 +197,9 @@ export default class ConvertViews extends THREE.EventDispatcher{
             new THREE.Vector3( 4.07288387528266,  1.8350265362839944, 0.04772775)
         ] */
         
-        let panoPos1 = sourcePano
+        let panoPos1 = this.sourcePano.map(e=>e.position) 
+        let panoPos2 = this.targetPano.map(e=>e.position)
         
-        let panoPos2 = [
-            new THREE.Vector3( -5.313605730801787,  -4.889868407960505,  1.237447893355817),
-            new THREE.Vector3( -5.337403524084278,  -2.5012228235167737, 1.2808838933558175) 
-        ]
-         
         let length = panoPos1.length
         
         if(this.needConvertAxis){
@@ -266,7 +222,7 @@ export default class ConvertViews extends THREE.EventDispatcher{
         var moveBackMatrix = new THREE.Matrix4().setPosition(panoPos2[0])
         matrix.premultiply(moveBackMatrix)//再移动到realPosition的点0处
 
-
+        //由于是以第一个点来平移，所以只有第一个点看起来最同步，其他点若误差大，飞到这些点时会看到标记不在这个位置上。
 
         this.convertMatrix = matrix
         this.convertMatrixInvert = matrix.clone().invert()
@@ -301,7 +257,76 @@ export default class ConvertViews extends THREE.EventDispatcher{
         this.diffQuaternionInvert = this.diffQuaternion.clone().invert() */
 
     }
-
+    
+    
+    
+    bindCamEvent(){//传递到另一边的dom 
+        this.lockCamera(true)
+        
+        
+        /* this.viewer.addEventListener( Bimface.Viewer.Viewer3DEvent.MouseClicked,(e)=>{
+            console.log('MouseClicked',e)
+        }); */
+        
+        
+        let getEvent = (type, e)=>{
+            let dom = this.viewer.getDomElement()
+            let clientWidth1 = this.sourceDom.clientWidth
+            let clientHeight1 = this.sourceDom.clientHeight
+            let clientWidth2 = dom.clientWidth
+            let clientHeight2 = dom.clientHeight
+            return new MouseEvent(type, {
+                bubbles: false,//?
+                cancelable: true,
+                view: this.sourceApp,
+                
+                /* clientX: e.clientX, 
+                clientY: e.clientY, */ 
+                clientX: clientWidth1 * e.clientX / clientWidth2 , //鼠标在右屏的比例的左屏的相同，针对右屏全屏等左右不对称的情况
+                clientY: clientHeight1 * e.clientY / clientHeight2,
+                button: e.button, buttons: e.buttons,  which: e.which,
+                altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey:e.shiftKey, metaKey: e.metaKey, 
+                detail:e.detail, 
+                //target :  dom2  
+            });
+            
+        }  
+        
+        let dom1 = this.viewer.getDomElement() 
+        //let pointerDownPos = new THREE.Vector2
+        dom1.addEventListener('mousedown',(e)=>{
+            if(this.synPaused || !this.sourceApp)return
+            let event = getEvent('mousedown', e)
+            this.sourceDom.dispatchEvent(event)  
+            //pointerDownPos.set(e.clientX,e.clientY)
+        })
+        dom1.addEventListener('mousemove',(e)=>{
+            if(this.synPaused || !this.sourceApp)return
+            let event = getEvent('mousemove', e)
+            this.sourceDom.dispatchEvent(event)  
+        })
+        dom1.addEventListener('mouseup',(e)=>{  
+            if(this.synPaused || !this.sourceApp)return
+            let event = getEvent('mouseup', e)
+            event.unableClick = true //最好禁止右侧点击行走。否则和点击效果冲突
+            this.sourceApp.dispatchEvent(event)   //mouseup 在laser中加在window上的 
+        })
+        dom1.addEventListener('mousewheel',(e)=>{
+            if(this.synPaused || !this.sourceApp)return
+            let event = getEvent('mousewheel', e)
+            event.wheelDelta = e.wheelDelta  //wheelDelta没法在getEvent参数中赋值
+            this.sourceDom.dispatchEvent(event)  
+        })
+        let stop = (e)=>{ //drag到另一边时停止旋转， 防止转到另一边
+            if(/* this.synPaused || */ !this.sourceApp)return
+            let event = getEvent('mouseup', e)
+            this.sourceApp.dispatchEvent(event)   
+        }
+        dom1.addEventListener('mouseout',stop)
+        dom1.addEventListener('mouseover',stop)
+    
+        
+    }
 
     lockCamera(locked){//禁止操作改变相机
         this.locked = locked 
@@ -318,9 +343,185 @@ export default class ConvertViews extends THREE.EventDispatcher{
         this.viewer.enableShortcutKey((this.locked || this.isPanoMode) ? false : true) //键盘移动
     }
 
+    
+    createPanoPannel(){//修改对照pano，左侧修改选择的pano，右边修改对应的具体位置
+        let that = this
+        
+        let createPannel = (mainIndex)=>{
+            let pannel = document.createElement('div') 
+            pannel.style.top = 0
+            pannel.style.left = mainIndex == 0 ? 0 : "50%"
+            pannel.style.position = 'fixed';
+            pannel.style.background = 'rgba(255,255,255,0.9)';
+            pannel.style.color = 'black'
+            pannel.style['text-align'] = 'center'
+            
+            let createRow = function(index){
+                let row = document.createElement('div') 
+                let btnStr = mainIndex == 0 ? '选取当前漫游点' : '点击解锁'
+                row.innerHTML = `<div>pano${index}</div> <div name="state" style="width:100px"></div><div name="pick">${btnStr}</div> ` 
+                row.style.height = row.style['lineHeight'] = '30px';
+                row.style.display = 'flex'
+                
+                row.children[2].style.cursor = 'pointer' 
+                row.children[2].addEventListener('click',()=>{
+                    if(mainIndex == 0){//左侧
+                        //let another = this.sourcePano[(index+1)%2]  
+                        let curr = that.sourceApp.viewer.images360.currentPano
+                        if(that.sourcePano[0] == curr || that.sourcePano[1] == curr){
+                            return console.error('已经选择过当前点')
+                        }
+                        let sprite = that.sourcePano[index].sprite
+                        that.sourcePano[index] = curr
+                        that.sourcePano[index].sprite = sprite
+                        sprite.position.copy(curr.position)
+                        sprite.position.z -= belowHeight
+                        sprite.update()
+                    }else{//右侧
+                        if(that.synPaused){
+                            that.dispatchEvent({type:'addTag',   index}) 
+                            that.lockCamera(true)
+                            changeWords('点击解锁')
+                        }else{
+                            that.synPaused = true;
+                            that.lockCamera(false)
+                            changeWords('点击使用此相机点作为漫游点')
+                        } 
+                    }
+                })
+                
+                return row
+            }
+            
+            let row0 = createRow(0)
+            let row1 = createRow(1)
+            
+            let changeWords = function(words){
+                row0.children[2].innerText = words
+                row1.children[2].innerText = words
+            }
+            if(mainIndex == 0){
+                this.addEventListener('updateBtnState',()=>{
+                    let opacity = this.sourceApp.viewer.images360.isAtPano() ? 1 : 0.5;
+                    [row0,row1].forEach(row=>{
+                        row.children[2].style.opacity = opacity
+                        row.children[2].style.opacity = opacity
+                        row.children[2].style['pointer-events'] = opacity == 1 ? 'auto' : 'none'
+                    }) 
+                })
+            }
+           
+            pannel.appendChild(row0)
+            pannel.appendChild(row1)
+            
+            
+            document.getElementById('app').appendChild(pannel);
+            return pannel   
+        }
+        
+        this.pannels = [createPannel(0),createPannel(1)]
+        
+        this.initTagAdd()
+        this.sourcePano.forEach((pano,i)=>{
+            let sprite = this.sourceApp.viewer.addSprite({text:i}) 
+            sprite.position.copy(pano.position)
+            sprite.position.z -= belowHeight
+            this.sourceApp.viewer.scene.scene.add(sprite)
+            sprite.scale.set(0.4,0.4,0.4)
+            pano.sprite = sprite
+        })
+        this.targetPano.forEach((pano,index)=>{
+            that.dispatchEvent({type:'addTag',  position:pano.position, index}) 
+        })
+        
+    }
+    
+    updatePanoMatch(position, index ){//更新且应用
+        if(this.targetPano.length == 2){ 
+            this.targetPano[index].position = position 
+            this.computeShift()
+            this.synPaused = false
+            this.dispatchEvent({type:'needsSyn' })//使发送同步 
+        } 
+    }
 
+    initTagAdd(){ 
+        let markerConfig = new Bimface.Plugins.Marker3D.Marker3DContainerConfig();
+        markerConfig.viewer = this.viewer;
+        let tags = new Bimface.Plugins.Marker3D.Marker3DContainer(markerConfig);
+        console.log('tags',tags)
+        
+        this.addEventListener('addTag',(e)=>{
+            if(this.targetPano[e.index].tag){
+                tags.removeItemById(this.targetPano[e.index].tag.id)
+            }
+            let position = new THREE.Vector3
+            if(e.position){
+                position.copy(e.position)
+            }else{
+                let currStatus = this.viewer.getCameraStatus()
+                position.copy(currStatus.position)
+            } 
+            
+            
+            
+            let marker3dConfig = new Bimface.Plugins.Marker3D.Marker3DConfig();
+             
+            marker3dConfig.src = 'images/hotpoint'+ e.index +'.png'//"http://static.bimface.com/resources/3DMarker/warner/warner_red.png";
+            
+            marker3dConfig.worldPosition = new THREE.Vector3().copy(position) 
+            marker3dConfig.worldPosition.z -= belowHeight
+            marker3dConfig.tooltip = '此为漫游点'+e.index //三维标签的提示
+            let tag = new Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
+            tags.addItem(tag);
+            this.viewer.clearSelectedComponents();
+            this.viewer.render();
+            this.targetPano[e.index].tag = tag
+            this.updatePanoMatch(position, e.index )
+        })
+        /* this.viewer.addEventListener( Bimface.Viewer.Viewer3DEvent.MouseClicked, (objectData)=>{
+            
+            if(window.forbitAddTag )return
+            let position = objectData.worldPosition.clone().add({x:0,y:0,z:height});
+            let marker3dConfig = new Bimface.Plugins.Marker3D.Marker3DConfig();
+             
+            marker3dConfig.src = "http://static.bimface.com/resources/3DMarker/warner/warner_red.png";
+            
+            marker3dConfig.worldPosition = position;
+            //三维标签的提示
+            marker3dConfig.tooltip = "This is 3DMarker.";
+            let marker3d = new Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
+            marker3d.onClick(function (item) {
+                 
+            })
+            marker.addItem(marker3d);
+            this.viewer.clearSelectedComponents();
+            this.viewer.render();
+            
+        }); */
+        
+        
+    }
+ 
 
+    /* addMesh(cameraData){
+         
+        var mesh = new Bimface.Plugins.Geometry.Plane({
+            type:'rectangle', points:[{x:-0.1,y:-0.1,z:0},{x:0.1,y:0.1,z:0}]
+        });
+            
+        var extObjMng = new Bimface.Plugins.ExternalObject.ExternalObjectManager(viewer2);            
+        extObjMng.loadObject({ name: 'plane', object: mesh});//作为外部构件添加到场景中
 
+        //mesh.children[0].position.copy(cameraData.position).setZ(0.5)
+        mesh.children[0].up.set(0,0,1) 
+        mesh.children[0].rotation.set(0,0,Math.PI/2)
+        
+        this.plane = mesh
+        window.extObjMng = extObjMng
+         
+        
+    } */
 
     /* applyDiff(app) {
         //sourcePlayer -> targetPlayer