feat: 交互

src/pages/Viewer.vue

@@ -4,7 +4,7 @@
         <main>
             <div class="split" v-if="source">
                 <iframe ref="sourceFrame" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
-                <div class="tools" v-show="!fscChecked && (dbsChecked || (!target && !bimChecked)) ">
+                <div class="tools" v-show="!fscChecked && (dbsChecked || (!target && !bimChecked))">
                     <div class="item-date">
                         <calendar name="source" :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
                     </div>
@@ -48,12 +48,7 @@ import { http } from '@/utils/request'
 import browser from '@/utils/browser'
 import AppHeader from '@/components/header'
 import Calendar from '@/components/calendar'
-import ConvertViews from '@/utils/ConvertViews'
-
-const views = new ConvertViews()
-
-let sourceApp = null,
-    targetApp = null
+import sync,{ loadSourceScene, loadTargetScene } from '@/utils/sync'
 
 const bimChecked = ref(null)
 const dbsChecked = ref(null)
@@ -152,85 +147,25 @@ const targetDays = computed(() => {
     }
 })
 
-const getView = () => {
-    let camera = sourceApp.viewer.mainViewport.camera
-    return {
-        position: camera.position,
-        quaternion: camera.quaternion,
-        fov: camera.fov,
-    }
-}
-
-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)
-        )
-    }
-}
-
 const onLoadSource = () => {
     if (bimChecked.value) {
         // BIM单屏模式
         return
     }
 
-    if (views.loaded) {
-        views.clear({ dontClearTarget: true })
-    }
-
-    sourceApp = sourceFrame.value.contentWindow
-    sourceApp.loaded.then(sdk => {
-        if (mode.value != 0) {
-            sdk.scene.changeMode(mode.value)
-        }
-
-        window.viewer1 = sourceApp.viewer
-
-        viewer1.mainViewport.view.minPitch += 0.01 //防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
-        viewer1.mainViewport.view.minPitch -= 0.01
-
-        initConvertView()
-
-        sourceApp.viewer.addEventListener('camera_changed', e => {
-            targetApp && views.receive(getView())
-        })
-    })
-
-    sourceApp.canChangePos = () => {
-        return sourceApp.Potree.settings.displayMode != 'showPanos'
-    }
+    loadSourceScene(sourceFrame,source.value.type < 2 ? 'kankan' : 'laser')
 }
 const onLoadTarget = () => {
-    // targetApp = targetFrame.value.contentWindow
-    // targetApp.loaded.then(viewer => {
-    //     window.viewer2 = targetApp.viewer
-    //     initConvertView()
-    // })
-    
-    if(bimChecked.value){
-        // BIM 同屏
-    } else if(source.value.type <2){
-        // 四维看看同屏
-    } else{
-        // 激光同屏
+    if (bimChecked.value) {
+        loadTargetScene(targetFrame,'bim')
+    } else {
+        loadTargetScene(targetFrame,target.value.type < 2 ? 'kankan' : 'laser')
     }
 }
 
-views.addEventListener('sendCameraData', e => {
-    //同步右侧数据
-    sourceApp.viewer.mainViewport.view.position.copy(e.data.position)
-    sourceApp.viewer.mainViewport.view.lookAt(e.data.target)
-})
-
 const onModeChange = targetMode => {
-    if (sourceApp) {
-        sourceApp.loaded.then(sdk => sdk.scene.changeMode(targetMode))
+    if (sync.sourceInst) {
+        sync.sourceInst.loaded.then(sdk => sdk.scene.changeMode(targetMode))
         mode.value = targetMode
     }
 }
@@ -332,7 +267,8 @@ const onNextDate = name => {
 const onBimChecked = () => {
     if (bimChecked.value) {
         bimChecked.value = false
-        if (dbsChecked.value) { // 判断是否分屏状态
+        if (dbsChecked.value) {
+            // 判断是否分屏状态
             let index = scenes.value.findIndex(item => item.num == source.value.num)
             if (index == -1) {
                 return

src/utils/sync.js

@@ -0,0 +1,89 @@
+import ConvertViews from '@/utils/ConvertViews'
+
+const views = new ConvertViews()
+
+let sourceApp = null,
+    targetApp = null
+
+const getView = () => {
+    let camera = sourceApp.viewer.mainViewport.camera
+    return {
+        position: camera.position,
+        quaternion: camera.quaternion,
+        fov: camera.fov,
+    }
+}
+
+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)
+        )
+    }
+}
+/**
+ * 左屏加载
+ * @param {String} type kankan|laser
+ */
+export function loadSourceScene(sourceFrame,type) {
+
+    if (views.loaded) {
+        views.clear({ dontClearTarget: true })
+    }
+
+    sourceApp = sourceFrame.value.contentWindow
+    sourceApp.loaded.then(sdk => {
+        // if (mode.value != 0) {
+        //     sdk.scene.changeMode(mode.value)
+        // }
+
+        window.viewer1 = sourceApp.viewer
+
+        viewer1.mainViewport.view.minPitch += 0.01 //防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
+        viewer1.mainViewport.view.minPitch -= 0.01
+
+        initConvertView()
+
+        sourceApp.viewer.addEventListener('camera_changed', e => {
+            targetApp && views.receive(getView())
+        })
+    })
+
+    sourceApp.canChangePos = () => {
+        return sourceApp.Potree.settings.displayMode != 'showPanos'
+    }
+}
+
+/**
+ * 右屏加载
+ * @param {String} type kankan|laser|bim
+ */
+export function loadTargetScene(targetFrame,type) {
+
+    // targetApp = targetFrame.value.contentWindow
+    // targetApp.loaded.then(viewer => {
+    //     window.viewer2 = targetApp.viewer
+    //     initConvertView()
+    // })
+
+}
+
+views.addEventListener('sendCameraData', e => {
+    //同步右侧数据
+    sourceApp.viewer.mainViewport.view.position.copy(e.data.position)
+    sourceApp.viewer.mainViewport.view.lookAt(e.data.target)
+})
+
+export default {
+    get sourceInst() {
+        return sourceApp
+    },
+    get targetInst() {
+        return targetApp
+    },
+}