up-大点换成unity

pc/src/pages/A0Map/MapSon/data.ts

@@ -1,11 +1,11 @@
 // 待完善-地址
 export const pcIframeObj = {
   //海战馆
-  1: "https://www.4dkankan.com/spg.html?m=KJ-I6rH3CfNSQV&lang=zh",
+  1: "1194",
   // 虎门销烟陈列
-  2: "https://www.4dkankan.com/spg.html?m=KJ-dSR2wuQUDgD&lang=zh",
+  2: "1194",
   // 虎门故事陈列
-  3: "https://www.4dkankan.com/spg.html?m=KJ-7NjKB1ssebo&lang=zh",
+  3: "1194",
   // 其他模型
   4: "https://4dscene.4dage.com/culturalrelics/YPZZBWG_TRI/Model2.html?m=ypz25",
   5: "https://4dscene.4dage.com/culturalrelics/YPZZBWG_TRI/Model2.html?m=ypz29",

pc/src/pages/A0Map/MapSon/index.module.scss

@@ -4,6 +4,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 2;
+  z-index: 9998;
   border: 0;
 }

pc/src/pages/A0Map/MapSon/index.tsx

@@ -1,23 +1,33 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { baseURL } from "@/utils/http";
 import { pcIframeObj } from "./data";
 import { mapData1 } from "../data";
 import React from "react";
+import { isMobiileFu } from "@/utils/history";
+import Scene from "@/pages/App/MainM/Tab1/Scene";
 
 type Props = {
   sId: number;
 };
 
 function MapSon({ sId }: Props) {
+  // 移动端code
+  const [code, setCode] = useState("");
+
   const info = useMemo(() => {
     return mapData1.find((v) => v.id === sId);
   }, [sId]);
 
   const unityCallUrl = useCallback((e: MessageEvent<any>) => {
     if (!e.data || !e.data.index) return;
-    const url = Reflect.get(pcIframeObj, e.data.index + "");
-    window.open(url);
+    const url: string = Reflect.get(pcIframeObj, e.data.index + "");
+
+    if (isMobiileFu()) setCode(url);
+    else
+      window.open(
+        url.includes("http") ? url : `${baseURL}/scene/index.html?m=${url}`
+      );
   }, []);
 
   useEffect(() => {
@@ -33,9 +43,14 @@ function MapSon({ sId }: Props) {
         <iframe
           title={info.name}
           className={styles.MapSon}
-          src={`${baseURL}/pc/unityPage/${info.filename}/index.html`}
+          src={`${baseURL}/pc/unityPage/${info.filename}${
+            isMobiileFu() ? "M" : ""
+          }/index.html`}
         />
       ) : null}
+
+      {/* 移动端 点击标签出来的场景页面 */}
+      {code ? <Scene closeFu={() => setCode("")} code={code} /> : null}
     </>
   );
 }

pc/src/pages/A0Map/index.module.scss

@@ -385,7 +385,7 @@
     // 左下角的返回
     .sonToBack {
       position: absolute;
-      z-index: 10;
+      z-index: 9999;
       bottom: 30px;
       left: 30px;
       cursor: pointer;

pc/src/pages/App/MainM/Tab1/ImgLook/index.tsx

@@ -29,7 +29,7 @@ function ImgLook({ closeFu, imgId }: Props) {
 
       setTimeout(() => {
         if (dom && imgDom) {
-          console.log(123, imgDom.clientWidth);
+          // console.log(123, imgDom.clientWidth);
 
           const num = imgDom.clientWidth * 0.3;
           dom.scrollLeft = num;

pc/src/pages/App/MainM/Tab1/Scene/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import backImg from "@/assets/img/goods/toBack.png";
 import { baseURL } from "@/utils/http";
@@ -9,8 +9,6 @@ type Props = {
   code: string;
 };
 
-
-
 function Scene({ closeFu, code }: Props) {
   // 给嵌套的场景页面调用，打开热点的时候 关闭返回按钮
   const [flag, setFlag] = useState(true);
@@ -21,6 +19,14 @@ function Scene({ closeFu, code }: Props) {
     };
   }, []);
 
+  const url = useMemo(() => {
+    let url = `${baseURL}/scene/index.html?m=${code}`;
+
+    if (code.includes("http")) url = code;
+
+    return url;
+  }, [code]);
+
   return (
     <div className={styles.Scene}>
       <img
@@ -30,10 +36,7 @@ function Scene({ closeFu, code }: Props) {
         src={backImg}
         alt=""
       />
-      <iframe
-        src={`${baseURL}/scene/index.html?m=${code}`}
-        frameBorder="0"
-      ></iframe>
+      <iframe src={url} frameBorder="0"></iframe>
     </div>
   );
 }

pc/src/pages/App/MainM/Tab1/index.module.scss

@@ -1,6 +1,7 @@
 .Tab1 {
   position: relative;
   background-color: #554a3e;
+
   :global {
     .tab1Btn {
       position: absolute;
@@ -105,21 +106,24 @@
           }
         }
 
-        .tab1Loc2{
-          .tab1Loc1_1{
+        .tab1Loc2 {
+          .tab1Loc1_1 {
             width: 26px;
             height: 32px;
             background-image: url('../../../../assets/img/map/icon2.png');
           }
-          .tab1Loc1_2{
+
+          .tab1Loc1_2 {
             top: 36px;
             left: -1px;
           }
-          .tab1Loc1_2Top{
+
+          .tab1Loc1_2Top {
             top: auto;
             bottom: 36px;
           }
         }
+
         .tab1Loc2Ac {
           .tab1Loc1_1 {
             background-image: url('../../../../assets/img/map/icon2Ac.png');
@@ -134,5 +138,12 @@
 
     }
 
+    .sonToBack {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      z-index: 9999;
+    }
+
   }
 }

pc/src/pages/App/MainM/Tab1/index.tsx

@@ -7,8 +7,8 @@ import { imgLodingFu } from "@/pages/A0Map/data";
 import { envUrl } from "@/utils/env";
 import ImgLoding from "@/components/ImgLoding";
 import { appTab1Loc1, appTab1Loc2 } from "./data";
-import ImgLook from "./ImgLook";
 import Scene from "./Scene";
+import MapSon from "@/pages/A0Map/MapSon";
 
 export const btnObj = [
   {
@@ -36,7 +36,7 @@ function Tab1() {
   }, [saveModulesVisitFu]);
 
   // 点击进入 大点 里面的 图片查看页面
-  const [lookImgId, setLookImgId] = useState(0);
+  const [unityId, setUnityId] = useState(0);
 
   // 点击 小点 打开场景
   const [code, setCode] = useState("");
@@ -61,7 +61,7 @@ function Tab1() {
       <ImgLoding id={1} />
 
       {/* 大图盒子 */}
-      <div className="tab1ImgBox" style={{ opacity: lookImgId ? 0 : 1 }}>
+      <div className="tab1ImgBox" style={{ opacity: unityId ? 0 : 1 }}>
         <div className="tab1ImgBoxSon">
           <img
             className="tab1Img"
@@ -73,7 +73,7 @@ function Tab1() {
           {/* 展陈点位 */}
           {appTab1Loc1.map((v, i) => (
             <div
-              onClick={() => setLookImgId(v.id)}
+              onClick={() => setUnityId(v.id)}
               className={classNames("tab1Loc1", acId === 2 ? "tab1Loc1Ac" : "")}
               key={v.id}
               style={{ top: v.top, left: v.left }}
@@ -116,8 +116,19 @@ function Tab1() {
       </div>
 
       {/* 点击 大点 进入的图片页面 */}
-      {lookImgId ? (
-        <ImgLook closeFu={() => setLookImgId(0)} imgId={lookImgId} />
+
+      {/* 图片形式-暂时隐藏 */}
+      {/* {unityId ? (
+        <ImgLook closeFu={() => setUnityId(0)} imgId={unityId} />
+      ) : null} */}
+
+      {unityId ? <MapSon sId={unityId} /> : null}
+
+      {/* 右下角的返回 */}
+      {unityId ? (
+        <div className="sonToBack" onClick={() => setUnityId(0)}>
+          <img src={`${envUrl}/App/main1/map${unityId}.png`} alt="" />
+        </div>
       ) : null}
 
       {/* 点击 小点 打开场景*/}

unityPage/S1M/ServiceWorker.js

@@ -0,0 +1,33 @@
+const cacheName = "4DAGE-TheOpiumWarMuseumx-0.1";
+const contentToCache = [
+    "Build/gzip1.loader.js",
+    "Build/gzip1.framework.js.unityweb",
+    "Build/gzip1.data.unityweb",
+    "Build/gzip1.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;
+    })());
+});

unityPage/S1M/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: url('bg.jpg') no-repeat center ;background-size: cover;}
+#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 }

unityPage/S1M/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Unity WebGL Player | TheOpiumWarMuseumx</title>
+  <link rel="shortcut icon" href="TemplateData/favicon.ico">
+  <link rel="stylesheet" href="TemplateData/style.css">
+  <link rel="manifest" href="manifest.webmanifest">
+</head>
+
+<body>
+  <div id="unity-container">
+    <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
+    <div id="unity-loading-bar">
+      <div id="unity-logo"></div>
+      <div id="unity-progress-bar-empty">
+        <div id="unity-progress-bar-full"></div>
+      </div>
+    </div>
+    <div id="unity-warning"> </div>
+  </div>
+  <script>
+    window.addEventListener("load", function () {
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("ServiceWorker.js");
+      }
+    });
+
+    var container = document.querySelector("#unity-container");
+    var canvas = document.querySelector("#unity-canvas");
+    var loadingBar = document.querySelector("#unity-loading-bar");
+    var progressBarFull = document.querySelector("#unity-progress-bar-full");
+    var warningBanner = document.querySelector("#unity-warning");
+
+    // Shows a temporary message banner/ribbon for a few seconds, or
+    // a permanent error message on top of the canvas if type=='error'.
+    // If type=='warning', a yellow highlight color is used.
+    // Modify or remove this function to customize the visually presented
+    // way that non-critical warnings and error messages are presented to the
+    // user.
+    function unityShowBanner(msg, type) {
+      function updateBannerVisibility() {
+        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+      }
+      var div = document.createElement('div');
+      div.innerHTML = msg;
+      warningBanner.appendChild(div);
+      if (type == 'error') div.style = 'background: red; padding: 10px;';
+      else {
+        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+        setTimeout(function () {
+          warningBanner.removeChild(div);
+          updateBannerVisibility();
+        }, 5000);
+      }
+      updateBannerVisibility();
+    }
+
+    var buildUrl = "Build";
+    var loaderUrl = buildUrl + "/gzip1.loader.js";
+    var config = {
+      dataUrl: buildUrl + "/gzip1.data.unityweb",
+      frameworkUrl: buildUrl + "/gzip1.framework.js.unityweb",
+      codeUrl: buildUrl + "/gzip1.wasm.unityweb",
+      streamingAssetsUrl: "StreamingAssets",
+      companyName: "4DAGE",
+      productName: "TheOpiumWarMuseumx",
+      productVersion: "0.1",
+      showBanner: unityShowBanner,
+    };
+
+    // 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);
+    }
+
+    loadingBar.style.display = "block";
+
+    var script = document.createElement("script");
+    script.src = loaderUrl;
+    script.onload = () => {
+      createUnityInstance(canvas, config, (progress) => {
+        progressBarFull.style.width = 100 * progress + "%";
+      }).then((unityInstance) => {
+        loadingBar.style.display = "none";
+      }).catch((message) => {
+        alert(message);
+      });
+    };
+    document.body.appendChild(script);
+
+    function unityCallUrl(index) {
+      window.parent.postMessage({
+        index
+      })
+    }
+
+  </script>
+</body>
+
+</html>

unityPage/S1M/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": "TheOpiumWarMuseumx",
+    "short_name": "TheOpiumWarMuseumx",
+    "start_url": "index.html",
+    "display": "fullscreen",
+    "background_color": "#231F20",
+    "theme_color": "#000",
+    "description": "",
+    "icons": [{
+      "src": "TemplateData/icons/unity-logo-dark.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }]
+  }

unityPage/S2M/ServiceWorker.js

@@ -0,0 +1,33 @@
+const cacheName = "4DAGE-TheOpiumWarMuseumx-0.1";
+const contentToCache = [
+    "Build/gzip2.loader.js",
+    "Build/gzip2.framework.js.unityweb",
+    "Build/gzip2.data.unityweb",
+    "Build/gzip2.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;
+    })());
+});

unityPage/S2M/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: url('bg.jpg') no-repeat center ;background-size: cover;}
+#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 }

unityPage/S2M/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | TheOpiumWarMuseumx</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="manifest" href="manifest.webmanifest">
+  </head>
+  <body>
+    <div id="unity-container">
+      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-logo"></div>
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
+        </div>
+      </div>
+      <div id="unity-warning"> </div>
+    </div>
+    <script>
+      window.addEventListener("load", function () {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("ServiceWorker.js");
+        }
+      });
+
+      var container = document.querySelector("#unity-container");
+      var canvas = document.querySelector("#unity-canvas");
+      var loadingBar = document.querySelector("#unity-loading-bar");
+      var progressBarFull = document.querySelector("#unity-progress-bar-full");
+      var warningBanner = document.querySelector("#unity-warning");
+
+      // Shows a temporary message banner/ribbon for a few seconds, or
+      // a permanent error message on top of the canvas if type=='error'.
+      // If type=='warning', a yellow highlight color is used.
+      // Modify or remove this function to customize the visually presented
+      // way that non-critical warnings and error messages are presented to the
+      // user.
+      function unityShowBanner(msg, type) {
+        function updateBannerVisibility() {
+          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+        }
+        var div = document.createElement('div');
+        div.innerHTML = msg;
+        warningBanner.appendChild(div);
+        if (type == 'error') div.style = 'background: red; padding: 10px;';
+        else {
+          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+          setTimeout(function() {
+            warningBanner.removeChild(div);
+            updateBannerVisibility();
+          }, 5000);
+        }
+        updateBannerVisibility();
+      }
+
+      var buildUrl = "Build";
+      var loaderUrl = buildUrl + "/gzip2.loader.js";
+      var config = {
+        dataUrl: buildUrl + "/gzip2.data.unityweb",
+        frameworkUrl: buildUrl + "/gzip2.framework.js.unityweb",
+        codeUrl: buildUrl + "/gzip2.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "4DAGE",
+        productName: "TheOpiumWarMuseumx",
+        productVersion: "0.1",
+        showBanner: unityShowBanner,
+      };
+
+      // 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);
+      }
+
+      loadingBar.style.display = "block";
+
+      var script = document.createElement("script");
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          loadingBar.style.display = "none";
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      document.body.appendChild(script);
+
+      function unityCallUrl(index) {
+        window.parent.postMessage({
+          index
+        })
+      }
+
+    </script>
+  </body>
+</html>

unityPage/S2M/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "name": "TheOpiumWarMuseumx",
+    "short_name": "TheOpiumWarMuseumx",
+    "start_url": "index.html",
+    "display": "fullscreen",
+    "background_color": "#231F20",
+    "theme_color": "#000",
+    "description": "",
+    "icons": [{
+      "src": "TemplateData/icons/unity-logo-dark.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }]
+  }