完善-pc嵌套unity的逻辑

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

@@ -1,9 +0,0 @@
-.MapSon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  border: 0;
-}

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

@@ -1,33 +0,0 @@
-import { FC, useEffect } from "react";
-import styles from "./index.module.scss";
-import { baseURL } from "@/utils/http";
-import { pcIframeObj } from "./data";
-
-interface IframePageProps {
-  filename: string;
-  title: string;
-}
-
-const IframePage: FC<IframePageProps> = ({ title, filename }) => {
-  useEffect(() => {
-    window.addEventListener("message", unityCallUrl);
-  }, []);
-
-  const unityCallUrl = (e: MessageEvent<any>) => {
-    if (!e.data || !e.data.index) return;
-
-    const url = Reflect.get(pcIframeObj, e.data.index + "");
-
-    window.open(url);
-  };
-
-  return (
-    <iframe
-      title={title}
-      className={styles.MapSon}
-      src={`${baseURL}/pc/unityPage/${filename}/index.html`}
-    />
-  );
-};
-
-export default IframePage;

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

@@ -5,67 +5,5 @@
   width: 100%;
   height: 100%;
   z-index: 2;
-  transform-style: preserve-3d;
-  perspective: 1000px;
-
-  :global {
-    .mapSonImg {
-      transition: all .3s linear;
-      position: absolute;
-      top: -3%;
-      left: -3%;
-      width: 106%;
-      height: 106%;
-      z-index: 1;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-      .tagBox {
-        position: absolute;
-        z-index: 10;
-        cursor: pointer;
-        transition: all .2s;
-
-        &>img {
-          width: 20px;
-          height: 122px;
-          position: relative;
-          left: 50%;
-          transform: translateX(-50%);
-          object-fit: contain;
-
-        }
-
-
-
-        .tagName {
-          min-width: 120px;
-          text-align: center;
-          padding: 0px 18px;
-          height: 40px;
-          line-height: 40px;
-          border-radius: 20px;
-          background-color: rgba(200, 185, 146, 0.8);
-          backdrop-filter: blur(4px);
-          // color: var(--themeColor);
-          color: #47392C;
-          font-size: 18px;
-          transition: all .2s;
-
-        }
-
-        &:hover {
-          transform: scale(1.1);
-
-          .tagName {
-            color: #47392C;
-          }
-        }
-      }
-    }
-
-  }
+  border: 0;
 }

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

@@ -1,84 +1,42 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import styles from "./index.module.scss";
-import { envUrl } from "@/utils/env";
-import { TabType, imgLodingFu, mapData1 } from "../data";
 import { baseURL } from "@/utils/http";
+import { pcIframeObj } from "./data";
+import { mapData1 } from "../data";
+import React from "react";
 
 type Props = {
   sId: number;
 };
 
 function MapSon({ sId }: Props) {
-  const [tag, setTag] = useState([] as TabType[]);
-
-  useEffect(() => {
-    setTag(mapData1.find((v) => v.id === sId)!.son);
+  const info = useMemo(() => {
+    return mapData1.find((v) => v.id === sId);
   }, [sId]);
 
-  const mapBac1 = useRef<HTMLDivElement>(null);
-
-  const mouseMoveFu = useCallback((e: MouseEvent) => {
-    let x = (e.clientX / window.innerWidth) * 2 - 1;
-    let y = -(e.clientY / window.innerHeight) * 2 + 1;
-
-    // x = x > 1 ? 1 : x < -1 ? -1 : x;
-    // y = y > 1 ? 1 : y < -1 ? -1 : y;
-
-    // const moveParam = `rotateX(${y * 2.5}deg) rotateY(${x}deg) translate3d(${
-    //   -x * 10
-    // }px,${y * 10}px,10px)`;
-
-    const moveParam = `translate(${-x * 10}px,${y * 10}px)`;
-
-    if (mapBac1.current) mapBac1.current.style.transform = moveParam;
+  const unityCallUrl = useCallback((e: MessageEvent<any>) => {
+    if (!e.data || !e.data.index) return;
+    const url = Reflect.get(pcIframeObj, e.data.index + "");
+    window.open(url);
   }, []);
 
   useEffect(() => {
-    if (mapBac1.current) {
-      const dom1 = mapBac1.current;
-      dom1.addEventListener("mousemove", mouseMoveFu);
-      return () => {
-        dom1.removeEventListener("mousemove", mouseMoveFu);
-      };
-    }
-  }, [mouseMoveFu]);
+    window.addEventListener("message", unityCallUrl);
+    return () => {
+      window.removeEventListener("message", unityCallUrl);
+    };
+  }, [unityCallUrl]);
 
   return (
-    <div className={styles.MapSon}>
-      {/* 大图片加载 */}
-      <div className="mapSonImg" ref={mapBac1}>
-        <img
-          src={`${envUrl}/map/${sId}.jpg`}
-          alt=""
-          onLoad={() => imgLodingFu(sId)}
+    <>
+      {info ? (
+        <iframe
+          title={info.name}
+          className={styles.MapSon}
+          src={`${baseURL}/pc/unityPage/${info.filename}/index.html`}
         />
-
-        {/* 标签 */}
-        {tag.map((v) => (
-          <div
-            onClick={() => window.open(baseURL+v.link)}
-            className="tagBox"
-            key={v.id}
-            style={{ left: v.x, top: v.y, bottom: v.b, right: v.r }}
-          >
-            {v.type === "底部" ? (
-              <>
-                <img src={`${envUrl}/map/xianL.png`} alt="" />
-                <div className="tagName">{v.name}</div>
-              </>
-            ) : (
-              <>
-                <div className="tagName">{v.name}</div>
-                <img src={`${envUrl}/map/xianR.png`} alt="" />
-              </>
-            )}
-
-            {/* <img src="" alt="" /> */}
-            {/* {v.type==='b'?<img/>} */}
-          </div>
-        ))}
-      </div>
-    </div>
+      ) : null}
+    </>
   );
 }
 

pc/src/pages/A0Map/data.ts

@@ -25,36 +25,6 @@ export type MapType = {
 // 待完善-link
 
 export const mapData1: MapType[] = [
-  // {
-  //   id: 1,
-  //   imgId:1,
-  //   name: "虎门故事",
-  //   x: "33%",
-  //   y: "7%",
-  //   ind: 23,
-  //   son: [
-  //     {
-  //       id: 1.1,
-  //       name: "虎门故事",
-  //       x: "21%",
-  //       y: "25%",
-  //       b: "auto",
-  //       r: "auto",
-  //       type: "底部",
-  //       link: "/scene/?m=1194",
-  //     },
-  //     {
-  //       id: 1.2,
-  //       name: "鸦片战争博物馆",
-  //       x: "9%",
-  //       y: "30%",
-  //       b: "auto",
-  //       r: "auto",
-  //       type: "底部",
-  //       link: "/scene/?m=1194",
-  //     },
-  //   ],
-  // },
   {
     id: 2,
     imgId:2,
@@ -178,18 +148,6 @@ export const maoData2 = [
     type: "center",
     link: "/scene/?m=1194",
   },
-  // {
-  //   id: 8,
-  //   name: "威胜东台",
-  //   x: "12%",
-  //   y: "46%",
-  //   b: "auto",
-  //   r: "auto",
-  //   ind: 21,
-  //   type: "left",
-  //   link: "/scene/?m=1194",
-  // },
-  // --------------
   {
     id: 9,
     name: "临高台旧址",

pc/src/pages/A0Map/index.tsx

@@ -2,46 +2,40 @@ import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 import { envUrl } from "@/utils/env";
-import { MapType, imgLodingFu, maoData2, mapData1 } from "./data";
+import { imgLodingFu, maoData2, mapData1 } from "./data";
 import iconImg1 from "@/assets/img/map/icon1.png";
 import iconImg1Ac from "@/assets/img/map/icon1Ac.png";
 import iconImg2 from "@/assets/img/map/icon2.png";
 import iconImg2Ac from "@/assets/img/map/icon2Ac.png";
-import MapSon from "./Iframe";
 import ImgLoding from "@/components/ImgLoding";
 import { baseURL } from "@/utils/http";
+import MapSon from "./MapSon";
 
 type Props = {
   type: number;
+  // 给父亲切换右侧高亮
   sonChaneType: (val: number) => void;
 };
 
 function A0Map({ type, sonChaneType }: Props) {
   useEffect(() => {
-    if (type !== 2) {
-      setSonPage(null);
-      setCheckedData1(null);
-      setMapSon(0);
-    }
+    if (type !== 2) setUnityId(0);
   }, [type]);
 
-  // 控制二级地图的显示
-  const [mapSon, setMapSon] = useState(0);
+  // 控制左下角的返回按钮 和 unity 页面的显示
+  const [unityId, setUnityId] = useState(0);
 
   // 鼠标hover
   const [isHover, setIsHover] = useState(0);
 
-  const [sonPage, setSonPage] = useState<string | null>(null);
-  const [checkedData1, setCheckedData1] = useState<MapType | null>(null);
-
   return (
     <div className={styles.A0Map}>
       {/* 大图片加载中 */}
-      <ImgLoding id={mapSon} />
+      <ImgLoding id={0} />
 
       {/* 一级地图盒子 */}
       <div
-        style={{ opacity: mapSon ? "0" : "1" }}
+        style={{ opacity: unityId ? "0" : "1" }}
         className={classNames(
           "mapMain",
           type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
@@ -53,9 +47,7 @@ function A0Map({ type, sonChaneType }: Props) {
             onMouseEnter={() => setIsHover(v.id)}
             onMouseLeave={() => setIsHover(0)}
             onClick={() => {
-              setCheckedData1(v);
-              setSonPage(v.filename);
-
+              setUnityId(v.imgId);
               sonChaneType(2);
             }}
             key={v.id}
@@ -96,7 +88,6 @@ function A0Map({ type, sonChaneType }: Props) {
               window.open(
                 v.link.startsWith("http") ? v.link : baseURL + v.link
               );
-              // setMapSon(v.imgId);
               sonChaneType(3);
             }}
             key={v.id}
@@ -150,20 +141,12 @@ function A0Map({ type, sonChaneType }: Props) {
       </div>
 
       {/* 二级地图 */}
-      {sonPage && checkedData1 ? (
-        <MapSon title={checkedData1.name} filename={sonPage} />
-      ) : null}
-
-      {/* <div className="yunBox">
-        <div className="yunSon1"></div>
-        <div className="yunSon2"></div>
-        <div className="yunSon3"></div>
-      </div> */}
+      {unityId ? <MapSon sId={unityId} /> : null}
 
       {/* 左下角的返回 */}
-      {mapSon ? (
-        <div className="sonToBack" onClick={() => setMapSon(0)}>
-          <img src={`${envUrl}/map/map${mapSon}.png`} alt="" />
+      {unityId ? (
+        <div className="sonToBack" onClick={() => setUnityId(0)}>
+          <img src={`${envUrl}/App/main1/map${unityId}.png`} alt="" />
         </div>
       ) : null}
     </div>