介入unity地图

.eslintrc.js

@@ -49,5 +49,7 @@ module.exports = {
     mapMutations: true,
     store: true,
     utils: true,
+    createUnityInstance: true,
+    gUnityInst: true,
   }
 }

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
+    <link rel="stylesheet" href="unity/TemplateData/style.css">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title>我是标题</title>
   </head>

public/unity/ServiceWorker.js

@@ -0,0 +1,33 @@
+const cacheName = "DefaultCompany-SHIndustryMuseum-0.1";
+const contentToCache = [
+    "Build/SHIndustryMuseum_1.6.loader.js",
+    "Build/SHIndustryMuseum_1.6.framework.js.unityweb",
+    "Build/SHIndustryMuseum_1.6.data.unityweb",
+    "Build/SHIndustryMuseum_1.6.wasm.unityweb",
+    "TemplateData/style.css"
+
+];
+
+self.addEventListener('install', function (e) {
+    console.log('[Service Worker] Install');
+    
+    e.waitUntil((async function () {
+      const cache = await caches.open(cacheName);
+      console.log('[Service Worker] Caching all: app shell and content');
+      await cache.addAll(contentToCache);
+    })());
+});
+
+self.addEventListener('fetch', function (e) {
+    e.respondWith((async function () {
+      let response = await caches.match(e.request);
+      console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+      if (response) { return response; }
+
+      response = await fetch(e.request);
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
+      cache.put(e.request, response.clone());
+      return response;
+    })());
+});

public/unity/TemplateData/style.css

@@ -0,0 +1,8 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: fixed; width: 100%; height: 100%; }
+#unity-canvas { width: 100%; height: 100%; background: #231F20 }
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

src/App.vue

@@ -4,9 +4,22 @@
       <HomeFadeIn
         v-if="isShowFadeInMask"
         class="fade-in-mask"
-        @loading-end="onLoadingEnd"
+        :progress="progress"
       />
     </transition>
+
+    <div
+      v-show="$route.meta.isShow3DMap"
+      id="unity-container"
+    >
+      <canvas
+        id="unity-canvas"
+        width="960"
+        height="600"
+        tabindex="-1"
+      />
+    </div>
+
     <router-view />
 
     <nav
@@ -99,26 +112,88 @@ export default {
     HomeFadeIn,
   },
   setup () {
-    const isShowFadeInMask = ref(false)
-    function onLoadingEnd() {
-      isShowFadeInMask.value = false
-    }
+    const isShowFadeInMask = ref(true)
+    const progress = ref(0)
+    onMounted(() => {
+    // this.$mitt.on('test', e => {
+    //   console.log('test', e)
+    // })
+
+      window.addEventListener("load", function () {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("ServiceWorker.js")
+        }
+      })
+
+      var canvas = document.querySelector("#unity-canvas")
+
+      var buildUrl = "unity/Build"
+      var loaderUrl = buildUrl + "/SHIndustryMuseum_1.6.loader.js"
+      var config = {
+        dataUrl: buildUrl + "/SHIndustryMuseum_1.6.data.unityweb",
+        frameworkUrl: buildUrl + "/SHIndustryMuseum_1.6.framework.js.unityweb",
+        codeUrl: buildUrl + "/SHIndustryMuseum_1.6.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "DefaultCompany",
+        productName: "SHIndustryMuseum",
+        productVersion: "0.1",
+      }
+
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      // Mobile device style: fill the whole browser client area with the game canvas:
+        var meta = document.createElement('meta')
+        meta.name = 'viewport'
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
+        document.getElementsByTagName('head')[0].appendChild(meta)
+      }
+
+      var script = document.createElement("script")
+      script.src = loaderUrl
+      script.onload = () => {
+        createUnityInstance(canvas, config, (paramProgress) => {
+          progress.value = Math.round(paramProgress * 100)
+          if (paramProgress > 0.95) {
+            setTimeout(() => {
+              isShowFadeInMask.value = false
+            }, 1000)
+          }
+        }).then((unityInstance) => {
+          window.gUnityInst = unityInstance
+
+          for (let index = 1; index <= 36; index++) {
+            unityInstance.SendMessage('Panel1', 'ShowEnterprise', index) //显示id为index的企业
+          // unityInstance.SendMessage('Panel1', 'HideEnterprise', index); //隐藏id为index的企业
+          }
+
+        }).catch((message) => {
+          alert(message)
+        })
+      }
+      window.onClickEnterprise = function (id) {
+        if (window.onCorpOnMapClicked) {
+          window.onCorpOnMapClicked(id)
+        }
+      }
+      document.body.appendChild(script)
+    })
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)
+
     return {
       isShowFadeInMask,
-      onLoadingEnd,
+      progress,
 
       isShowNavBar,
       activeNavItemIdx,
     }
   },
-  mounted() {
-    this.$mitt.on('test', e => {
-      console.log('test', e)
-    })
-  }
 }
 </script>
 

src/components/HomeFadeIn.vue

@@ -18,22 +18,15 @@
 
 <script>
 export default {
+  props: [
+    'progress',
+  ],
   emits: ['loading-end'],
   data() {
     return {
-      progress: 0,
-      intervalId: null,
     }
   },
   mounted() {
-    this.intervalId = setInterval(() => {
-      if (this.progress < 100) {
-        this.progress++
-      } else {
-        clearInterval(this.intervalId)
-        this.$emit('loading-end')
-      }
-    }, 20)
   },
   methods: {
   }
@@ -47,7 +40,7 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: red;
+  background-color: #000;
   >.bg-video {
     position: absolute;
     left: 0;
@@ -55,6 +48,7 @@ export default {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    background-color: #000;
   }
   >.progress {
     position: absolute;

src/router/index.js

@@ -12,6 +12,9 @@ const routes = [
     path: '/general',
     name: 'GeneralView',
     component: GeneralView,
+    meta: {
+      isShow3DMap: true,
+    }
   },
   {
     path: '/history',

src/views/General.vue

@@ -45,12 +45,13 @@
         </h2>
         <div
           v-for="(corpItem) in corpListMap.get(decade)"
+          :id="`corp-item-${corpItem.id}`"
           :key="corpItem.id"
           class="corp-item"
           :class="{
             active: activeCorpId === corpItem.id
           }"
-          @click="onClickCorpItem(corpItem)"
+          @click="onClickCorpItem(corpItem.id)"
         >
           <div class="item-icon" />
           <div class="verticle-line" />
@@ -138,10 +139,21 @@ export default {
         return item.id === activeCorpId.value
       })
     })
-    function onClickCorpItem(corpItem) {
-      activeCorpId.value = corpItem.id
+    function onClickCorpItem(id) {
+      if ((typeof activeCorpId.value === 'number')) {
+        gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', activeCorpId.value) //设置id为1的企业为未选中状态(此id需要是已显示的)
+      }
+      gUnityInst.SendMessage('Panel1', 'SetEnterpriseSelected', id) //设置id为1的企业为选中状态(此id需要是已显示的)
+      activeCorpId.value = id
       isShowDesc.value = true
+
+      console.log(`corp-item-${id}`)
+      const clickedElement = document.querySelector(`#corp-item-${id}`)
+      if (clickedElement) {
+        clickedElement.scrollIntoView()
+      }
     }
+    window.onCorpOnMapClicked = onClickCorpItem
 
     const isShowDesc = ref(true)
 
@@ -165,7 +177,9 @@ export default {
     ]),
   },
   mounted() {
-    this.$mitt.emit('test', { msg: 'home mounted' })
+    // this.$mitt.emit('test', { msg: 'home mounted' })
+  },
+  beforeUnmount() {
   },
   unmounted() {
   },