3d

src/store/modules/common/mutations.js

@@ -85,10 +85,28 @@ export default {
     state.isOpen3d = data;
   },
   toggle3dStatus(state) {
+    var element = document.getElementById('house-player');
     state.isOpen3d = !state.isOpen3d;
+    
     if (state.isOpen3d) {
+      setTimeout(() => {
+        window.sdkInstance.sceneRenderer.updateScreenSize(window.innderWidth, window.innderHeight);
+        window.sdkInstance.changeMode('panorama');
+        let player = document.getElementById('player')
+        player.appendChild(element)
+      }, 500)
       sessionStorage.setItem('3dMode', 1)
     } else {
+      setTimeout(() => {
+        window.sdkInstance.changeMode('floorplan');
+        let mapDom = document.getElementsByClassName("ordinary-map-container")[0];
+          let style = getComputedStyle(mapDom);
+          let width = parseFloat(style.width);
+          let height = parseFloat(style.height);
+        window.sdkInstance.sceneRenderer.updateScreenSize(width, height);
+        let playersmall = document.getElementById('playersmall')
+        playersmall.appendChild(element)
+      }, 500)
       sessionStorage.setItem('3dMode', 0)
     }
     

src/uwb-sample.js

@@ -378,16 +378,16 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
         //初始化uwb插件
         let uwbInstance = uwbInit(originPointPose);
 
-        if (false)
-          if (g_gltf_downloaded == false) {
-            let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
-            sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
-            let pointLight = new THREE.PointLight(0xffffff, 1, 0);
-            pointLight.position.set(200, 200, 200); //设置点光源位置
-            sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
-            g_gltf_downloaded = true;
-            getsqlData(sdkInstance, uwbInstance);
-          }
+
+        if (g_gltf_downloaded == false) {
+          let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
+          sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
+          let pointLight = new THREE.PointLight(0xffffff, 1, 0);
+          pointLight.position.set(200, 200, 200); //设置点光源位置
+          sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
+          g_gltf_downloaded = true;
+          getsqlData(sdkInstance, uwbInstance);
+        }
         let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
         sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
         let pointLight = new THREE.PointLight(0xffffff, 1, 0);
@@ -399,41 +399,41 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
           },
           100
         );
-        if (false)
-          if (g_fbxLoader == null) {
-            g_fbxLoader = new THREE.GLTFLoader();
-            g_fbxLoader.load("../models/mesh2.gltf", function (fbx) {
-              let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
-              sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
-              let pointLight = new THREE.PointLight(0xffffff, 1, 0);
-              pointLight.position.set(200, 200, 200); //设置点光源位置
-              sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
-              g_fbx = fbx;
-              console.log("控制台查看加载gltf文件返回的对象结构", fbx);
-              //fbx.scene.children[0].children[0].scale.set(5, 5, 5)
-              //window.shader = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
-              //window.shader1 = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
-              setTimeout(
-                function () {
+
+        if (g_fbxLoader == null) {
+          g_fbxLoader = new THREE.GLTFLoader();
+          g_fbxLoader.load("../models/mesh2.gltf", function (fbx) {
+            let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
+            sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
+            let pointLight = new THREE.PointLight(0xffffff, 1, 0);
+            pointLight.position.set(200, 200, 200); //设置点光源位置
+            sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
+            g_fbx = fbx;
+            console.log("控制台查看加载gltf文件返回的对象结构", fbx);
+            //fbx.scene.children[0].children[0].scale.set(5, 5, 5)
+            //window.shader = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
+            //window.shader1 = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material);
+            setTimeout(
+              function () {
+                getsqlData(sdkInstance, uwbInstance)
+              },
+              100
+            );
+          });
+          if (false) {
+            sqlQueryInited = true;
+            var index = 0;
+            setTimeout(
+              function (card_id, x, y, z) {
+                var timerId = setInterval(function () {
+                  //console.log(++index + "秒钟到了");
                   getsqlData(sdkInstance, uwbInstance)
-                },
-                100
-              );
-            });
-            if (false) {
-              sqlQueryInited = true;
-              var index = 0;
-              setTimeout(
-                function (card_id, x, y, z) {
-                  var timerId = setInterval(function () {
-                    //console.log(++index + "秒钟到了");
-                    getsqlData(sdkInstance, uwbInstance)
-                  }, 1000);
-                },
-                500
-              );
-            }
+                }, 1000);
+              },
+              500
+            );
           }
+        }
 
 
         // 创建物体add

src/views/ordinaryPage/index.less

@@ -84,7 +84,7 @@
 
       .ordinary-map {
         position: absolute;
-        opacity: 0;
+        // opacity: 0;
         width: 130vw;
         height: 130vh;
         z-index: 0;

src/views/ordinaryPage/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="container" v-if="isOpen3d">
+    <div class="container" v-show="isOpen3d" key="container">
       <SearchBarMain/>
       <div class="vr-bg" id="vr-bg-container"></div>
       <div id="player" style="width: 100%; height: 100%"></div>
       <bench-detail :is-detail-visible="isDetailVisible" :is-remote-btn-visible="isRemoteBtnVisible" :closeDetail="closeDetail" :bench="currentBench" />
     </div>
-    <div class="ordinary-container" v-else @click="onBlur">
+    <div class="ordinary-container" key="ordinary-container" v-show="!isOpen3d" @click="onBlur">
       <div class="ordinary-left">
         <SearchBar
           class="search-container"
@@ -870,9 +870,9 @@ export default {
     
     // 调用定时器方法，返回定时器id，用于按条件清空
     that.timerId = that.myInterval((count) => {
-        console.log(count)
+        // console.log(count)
         this.$store.dispatch("benchList/fetchBenchList");
-        if (count > 3) {
+        if (count > 30000) {
             console.log('end')
             that.clearMyInterval(that.timerId)
         }
@@ -894,6 +894,11 @@ export default {
     this.tabs[0].list = this.benchList;
     this.tabs[1].list = this.taskList;
     this.tabs[2].list = this.issueList;
+    let mapDom = document.getElementsByClassName("ordinary-map")[0];
+    let style = getComputedStyle(mapDom);
+    let width = parseFloat(style.width);
+    let height = parseFloat(style.height);
+    // uwbMain('playersmall', width, height, "floorplan");
     setTimeout(() => {
       var readyCount = 0;
       var occupiedCount = 0;
@@ -2573,18 +2578,18 @@ export default {
       }
     },
     isOpen3d(newValue, oldValue) {
-      if (!newValue) {
-        this.$nextTick(() => {
-          let mapDom = document.getElementsByClassName("ordinary-map")[0];
-          let style = getComputedStyle(mapDom);
-          let width = parseFloat(style.width);
-          let height = parseFloat(style.height);
-          uwbMain('playersmall', width, height, "floorplan");
-        })
+      // if (!newValue) {
+      //   this.$nextTick(() => {
+      //     let mapDom = document.getElementsByClassName("ordinary-map")[0];
+      //     let style = getComputedStyle(mapDom);
+      //     let width = parseFloat(style.width);
+      //     let height = parseFloat(style.height);
+      //     uwbMain('playersmall', width, height, "floorplan");
+      //   })
         
-      } else {
-        uwbMain('player', window.innerWidth, window.innerHeight, "panorama");
-      }
+      // } else {
+      //   uwbMain('player', window.innerWidth, window.innerHeight, "panorama");
+      // }
     }
   },
 };
@@ -2614,7 +2619,7 @@ export default {
   position: absolute;
   height: 10%;
   width: 100%;
-  padding: 5px 10px;
+  /* padding: 5px 10px; */
   box-sizing: border-box;
 }
 
@@ -2647,8 +2652,6 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
-  margin: 5px 0 6px;
-
   /* border: 1px solid #fff; */
   background-color: rgba(255, 255, 255, 0.04);
   border-radius: 6px;
@@ -3369,7 +3372,7 @@ export default {
 .bmMap {
   /* height: 500px; */
   width: 100%;
-  padding: 5px 10px;
+  /* padding: 5px 10px; */
   box-sizing: border-box;
 }
 
@@ -3400,9 +3403,7 @@ export default {
 
 .bmMapImage {
   position: relative;
-  height: 500px;
   width: 100%;
-  margin: 5px 0 6px;
 
   /* border: 1px solid #fff; */
   background-color: rgba(255, 255, 255, 0.04);

vue.config.js

@@ -43,6 +43,11 @@ module.exports = defineConfig({
         target: 'http://172.16.50.4:18080',
         changeOrigin: true, //需要代理跨域
         rewrite: (path) => path.replace(/^\/8b934420_ZJUb_b6f9/, ''), //路径重写，把'/api'替换为''
+      },
+      '/models': {
+        target: 'http://172.16.50.4:18080',
+        changeOrigin: true, //需要代理跨域
+        rewrite: (path) => path.replace(/^\/models/, ''), //路径重写，把'/api'替换为''
       }
     },
   },