解决浏览场景 苹果手机崩溃问题

src/App.tsx

@@ -57,7 +57,7 @@ const planSize = {
 }
 
 export default function App() {
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, unityDel } = useSelector((state: RootState) => state.A0Layout)
 
   // 判断是中文还是英文
   useEffect(() => {
@@ -1013,7 +1013,9 @@ export default function App() {
         </React.Suspense>
       </Router>
 
-      <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
+      {unityDel ? null : (
+        <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
+      )}
 
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />

src/components/Zloding/index.tsx

@@ -5,12 +5,13 @@ import classNames from 'classnames'
 const imgObj = {
   1: require('@/assets/sgImg/bacScene1.jpg'),
   2: require('@/assets/sgImg/bacScene2.jpg'),
-  3: require('@/assets/sgImg/bacScene3.jpg')
+  3: require('@/assets/sgImg/bacScene3.jpg'),
+  4: require('@/assets/img/A7base3_bg.jpg')
 }
 
 type Props = {
   isShow: boolean
-  bacNum: 1 | 2 | 3
+  bacNum: 1 | 2 | 3 | 4
   callBackFu?: () => void
 }
 

src/pages/A0base/data.ts

@@ -1,3 +1,4 @@
+import store from '@/store'
 import { callIframeFu } from '@/utils/history'
 import { isPc } from '@/utils/http'
 
@@ -25,7 +26,7 @@ export const unityShow = (val: boolean) => {
 }
 
 // 获取当前场景key
-export const getUnityKey = (val:'sceneStaRes') => {
+export const getUnityKey = (val: 'sceneStaRes') => {
   let key = ''
 
   const dom: any = document.getElementById('modalIframe')
@@ -40,13 +41,14 @@ export const getUnityKey = (val:'sceneStaRes') => {
 }
 
 // 切换unity
+// TransitionScene
 export const cutUnityFu = (
   val: 'TombstoneView' | 'RoomScene' | 'DrawingBoard',
   backFu: () => void
 ) => {
   const dom: any = document.getElementById('modalIframe')
 
-  if (dom.src.includes('unity')) {
+  if (dom && dom.src.includes('unity')) {
     const res = getUnityKey('sceneStaRes')
 
     if (res !== val) {
@@ -59,3 +61,23 @@ export const cutUnityFu = (
     // lodingUnityFu()
   }
 }
+
+// 判断unity是否被销毁 false表示没有被销毁
+export const isUnitySta = () => {
+  let flag = true
+
+  const dom: any = document.getElementById('modalIframe')
+
+  // 没有被销毁
+  if (dom && dom.src.includes('unity')) flag = false
+
+  return flag
+}
+
+// 销毁unity
+export const delUnityFu = () => {
+  const dom: any = document.getElementById('modalIframe')
+  if (dom) {
+    store.dispatch({ type: 'layout/unityDel', payload: true })
+  }
+}

src/pages/A7wjwj/conponents/Content/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
+import store from '@/store'
 function Content() {
   const [isShowScene, setIsShowScene] = useState(false)
   const [isShowPoem, setIsShowPoem] = useState(false)
@@ -32,6 +33,9 @@ function Content() {
       setIsShowPano(false)
       panoramicRoot.style.display = 'none'
       window.location.replace('#/wjwj')
+      // 改变unity的key，告诉wjwj页面重新判断unity是否被销毁
+      store.dispatch({ type: 'layout/unityDel', payload: false })
+      store.dispatch({ type: 'layout/unityKey', payload: Date.now() })
     }
   }
   const onClickSkip = () => {
@@ -45,9 +49,9 @@ function Content() {
         <img src='./myData/img/btn_back.png' alt='' />
       </div>
 
-      {isShowPano ? (
+      {isShowPano && !isShowScene ? (
         <iframe
-          style={{ display: isShowPano&&!isShowScene ? 'block' : 'none' }}
+          style={{ display: isShowPano && !isShowScene ? 'block' : 'none' }}
           title='panoramic'
           id='panoramic'
           src='Pano/index.html'
@@ -61,7 +65,7 @@ function Content() {
         </div>
         <div className='content'>
           清光绪年间
-          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂 
+          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
           <br /> 自北朝肇始，至宋金时期
           <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
           <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
@@ -74,7 +78,7 @@ function Content() {
       {isShowScene ? (
         <iframe
           style={{ display: isShowScene ? 'block' : 'none' }}
-          id='wjwjScene'  
+          id='wjwjScene'
           title='wjwjScene'
           src='BigScene/index.html#/?m=SG-Oy6fyzoMQ0D'
         />

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -4,7 +4,7 @@ import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-// import { domDelOwnFu } from '@/utils/utilsSome'
+import { delUnityFu } from '@/pages/A0base/data'
 
 function Discover(props: { style?: React.CSSProperties }) {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
@@ -12,7 +12,7 @@ function Discover(props: { style?: React.CSSProperties }) {
   // 将隐藏的页面打开，全景图->诗歌->大场景
   const lookScene = useCallback(() => {
     // 销毁unity
-    // domDelOwnFu('#modalIframe')
+    delUnityFu()
 
     const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
     panoramicRoot.style.display = 'block'

src/pages/A7wjwj/index.module.scss

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   background-color: #efede5;
-  background-image: url('../../assets/img/A7base3_bg.png');
+  background-image: url('../../assets/img/A7base3_bg.jpg');
   background-size: cover;
 
   :global {

src/pages/A7wjwj/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import MenuSider from '@/components/MenuSider'
 import Discover from './conponents/Discover'
@@ -8,9 +8,11 @@ import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import Weijie from './conponents/Weijie'
+import { isUnitySta, lodingUnityFu } from '../A0base/data'
+import Zloding from '@/components/Zloding'
 
 function A7Wjwj() {
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, unityKey } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
 
@@ -22,8 +24,23 @@ function A7Wjwj() {
     else window.location.replace('#/base')
   }
 
+  // 监听unity是否被销毁了
+  const [unitySta, setUnitySta] = useState(false)
+
+  useEffect(() => {
+    const flag = isUnitySta()
+    if (flag) {
+      lodingUnityFu()
+    }
+    setUnitySta(flag)
+  }, [unityKey])
+
   return (
     <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
+      {unitySta ? (
+        <Zloding isShow={unitySta} bacNum={4} callBackFu={() => setUnitySta(false)} />
+      ) : null}
+
       {/* 发现之谜 */}
       <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
       {/* 属性之辨 */}

src/store/reducer/layout.ts

@@ -29,7 +29,9 @@ const initState = {
   },
   // 总数据 - 中英文切换
   myData: {} as MyDataType,
-  myLangue: 'ZH' as 'ZH' | 'EN'
+  myLangue: 'ZH' as 'ZH' | 'EN',
+  unityKey: 0, //unity是否被销毁,key变化的时候就要判断
+  unityDel: false
 }
 
 // 定义 action 类型
@@ -41,6 +43,8 @@ type LayoutActionType =
   | { type: 'layout/message'; payload: MessageType }
   | { type: 'layout/myData'; payload: MyDataType }
   | { type: 'layout/myLangue'; payload: 'ZH' | 'EN' }
+  | { type: 'layout/unityKey'; payload: number }
+  | { type: 'layout/unityDel'; payload: boolean }
   | {
       type: 'layout/closeUpFile'
       payload: {
@@ -74,6 +78,11 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
       return { ...state, myData: action.payload }
     case 'layout/myLangue':
       return { ...state, myLangue: action.payload }
+    // unity是否被销毁，被销毁了为true
+    case 'layout/unityKey':
+      return { ...state, unityKey: action.payload }
+    case 'layout/unityDel':
+      return { ...state, unityDel: action.payload }
 
     default:
       return state

src/types/function.d.ts

@@ -9,15 +9,14 @@ declare global {
     openPoem: () => void
     backToyblm: () => void
     setIsShowPano: (isShow: boolean) => void
-    unityLoading: (progress: number) =>  void
-    loadSceneProgress: (progress: number) =>  void
+    unityLoading: (progress: number) => void
+    loadSceneProgress: (progress: number) => void
     showTag: () => void
     hideTag: () => void
     changePanel: (index: number) => void
     hideGesture: () => void
-    sceneNum:1|2|3
-
+    sceneNum: 1 | 2 | 3
   }
 }
 
-export {}
+export {}