场景开发

scene/public/css/oldVer/main0.css

@@ -91,8 +91,8 @@ iframe {
 }
 #closepop {
   background: url(../../images/close1.png) no-repeat;
-  width: 30px;
-  height: 30px;
+  width: 60px;
+  height: 60px;
   cursor: pointer;
   text-indent: -999em;
   background-size: 100% 100%;
@@ -289,4 +289,4 @@ a {
   .pinTop {
     top: 0px;
   }
-}
+}

scene/public/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <title>武汉博物馆-琬琰英华</title>
+    <title>安徽美术馆-兹山无尽</title>
 
     <!-- 大场景相关 -->
     <link rel="stylesheet" href="./css/oldVer/main0.css" />

scene/public/js/Hot.js

@@ -53,10 +53,10 @@ window.initHot = function (model) {
     var src = ''
     var r = link.substring(link.indexOf('html') + 4),
       o = 'en' == manage.number('lang') ? '&lang=' + manage.number('lang') : ''
-      ; -1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
+    ;-1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
 
-    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
-    // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
+    // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
   var removeSrcPostMark = function (url) {
@@ -341,7 +341,7 @@ window.initHot = function (model) {
         if (media) {
           this.changeShineTex(media)
         } else {
-          this.styleImg = /* this.styleImg || */[]
+          this.styleImg = /* this.styleImg || */ []
           if (this.info.styleImg) {
             this.styleImg = this.info.styleImg.map(src => {
               return { src: /* manage.dealURL( */ src } //如果要dealURL,在predeal里
@@ -429,7 +429,7 @@ window.initHot = function (model) {
         {
           let action = CloneObject(settings.hotClickEvent.shine)
           if (info.actionType == 'noAction' || info.noAction) {
-            ; (action.examine = false), (action.openHot = false)
+            ;(action.examine = false), (action.openHot = false)
           } else if (info.actionType == 'dontExam') {
             action.examine = false
           }
@@ -1135,29 +1135,29 @@ window.initHot = function (model) {
       var popup = document.getElementById('popup')
 
       if (openHot) {
-        ; (g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
+        ;(g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
         var n = document.createElement('iframe')
 
         SoundManager.play('hot')
 
         var src = getLink(this.info.link)
         n.src = src
-          ; (n.id = 'id1'), (n.allowTransparency = 'true')
+        ;(n.id = 'id1'), (n.allowTransparency = 'true')
         var a = document.getElementById('id1')
         if (void 0 === a || null == a) {
           document.querySelector('.popup-content').appendChild(n)
           var s = !1
-            ; (window.loaddingSuccess = function () {
-              s = !0
-            }),
-              setTimeout(function e() {
-                if (s) {
-                  var t = document.querySelector('#id1').contentWindow.document
-                  t.querySelector('video') &&
-                    (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
-                    t.querySelector('audio') && t.querySelector('audio').play()
-                } else setTimeout(e, 300)
-              }, 800)
+          ;(window.loaddingSuccess = function () {
+            s = !0
+          }),
+            setTimeout(function e() {
+              if (s) {
+                var t = document.querySelector('#id1').contentWindow.document
+                t.querySelector('video') &&
+                  (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
+                  t.querySelector('audio') && t.querySelector('audio').play()
+              } else setTimeout(e, 300)
+            }, 800)
         }
       }
 
@@ -1203,7 +1203,7 @@ window.initHot = function (model) {
           var f = new THREE.Matrix4().lookAt(c.position, h, new THREE.Vector3(0, 1, 0))
           p.quaternion = new THREE.Quaternion().setFromRotationMatrix(f)
         }
-        ; (p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
+        ;(p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
         player.flyToNewMode(p)
       }
     }

scene/public/showa/js/loadCAD.js

@@ -28,31 +28,21 @@ window.grendCAD = (function grendCAD() {
     if (initDOM) return initDOM
     let $layer = document.createElement('div')
     let $cad = document.createElement('div')
-    let $img = document.createElement('img')
 
     $layer.className = 'cad'
-    $img.className = 'img'
     $cad.id = 'cad'
     $layer.appendChild($cad)
 
     let style = document.createElement('style')
     style.innerHTML = `
       .cad {
-        cursor: pointer;
         position: absolute;
         right: 20px;
         top: 16px;
         width: 200px;
         height: 200px;
         background: rgba(0, 0, 0, .3);
-        border-radius: 5px; 
-        background-image: url('./images/map_1.png');
-        path {
-          opacity: 0;
-        }
-        g.sign>path {
-          opacity: 1;
-        }
+        border-radius: 5px;
       }
 
       .cad > div {
@@ -60,18 +50,7 @@ window.grendCAD = (function grendCAD() {
         height: 100%;
       }
 
-      .img {
-        display: none;
-        width: 60%;
-        object-fit: cover;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        transition: opacity 0.3s ease;
-      }
-
-      @media only screen and (max-width: 1000px) {
+      @media only screen and (max-width: 600px) {
         .cad {
             position: absolute;
             left: 16px;
@@ -80,30 +59,15 @@ window.grendCAD = (function grendCAD() {
             height: 100px;
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
-            background-image: url('./images/map_1.png');
-            background-size: cover;
-            path {
-              opacity: 0;
-            }
-            g.sign>path {
-              opacity: 1;
-            }
-          }
-          .img {
-            width: 90%;
-            z-index: 30000;
-          }
-        
+        }
       }
     `
 
     document.documentElement.appendChild(style)
     document.documentElement.appendChild($layer)
-    document.documentElement.appendChild($img)
     $parent.appendChild(style)
     $parent.appendChild($layer)
-    $parent.appendChild($img)
-    return [$layer, $img]
+    return $layer
   }
 
   function setStyle(signColor, borderColor, borderWidth) {
@@ -132,13 +96,7 @@ window.grendCAD = (function grendCAD() {
     initFloor = floor
 
     loadScript(function () {
-      let [$layer, $img] = loadDOM($parent)
-
-      $layer.addEventListener('click', () => {
-        console.log(12)
-        $img.src = './images/map_2.png'
-        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
-      })
+      let $layer = loadDOM($parent)
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({
@@ -179,7 +137,13 @@ $.ajax({
       url: '//super.4dage.com/data/' + window.number + '/floor.json',
       method: 'GET',
       success(res) {
-        grendCAD(res, document.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
+        grendCAD(
+          res,
+          document.documentElement,
+          data.cadSignColor,
+          data.cadBorderColor,
+          data.cadBorderWidth
+        )
       }
     })
   }

scene/src/assets/styles/base.css

@@ -9,14 +9,13 @@ html {
   user-select: none;
 }
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
 }
 @font-face {
-  font-family: 'fzFont';
+  font-family: 'ssgstFont';
   /* 自定义字体名称 */
-  src: url('../font/fzFont.TTF') format('truetype');
+  src: url('../font/ssgst.TTF') format('truetype');
 }
 a {
   text-decoration: none;
@@ -36,6 +35,7 @@ ul {
 body {
   overflow: auto;
   overflow-y: overlay;
+  font-family: 'ssgstFont' !important;
 }
 /* 文本域取消下拉 */
 textarea {
@@ -145,7 +145,7 @@ body,
   animation: likeMoveAc 2s linear forwards;
 }
 .room-label p {
-  color: #FDFBB2;
+  color: #fdfbb2;
 }
 @keyframes likeMoveAc {
   0% {
@@ -169,4 +169,4 @@ body,
   html .cad {
     top: 20px;
   }
-}
+}

scene/src/pages/A2main/index.tsx

@@ -14,7 +14,7 @@ const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
 function A2main() {
-  const SCENE_CODE = 'SG-zeRFYMaTE9F'
+  const SCENE_CODE = 'SG-Eq6bs2vVKv3'
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
 

scene/src/pages/A3hotList/index.module.scss

@@ -9,6 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   :global {
     .A3main {
       display: flex;
@@ -20,11 +21,12 @@
       height: 100%;
       background: url('../../assets/img/hotlist_bg.png') center center;
       background-size: cover;
-      color: rgba(43, 31, 23, 0.9);
+      color: #9b4f2d;
       font-size: 17px;
       font-weight: 500;
       overflow: auto;
       padding-bottom: 40px;
+      border: 2px solid #9b4f2d;
       // 隐藏滚动条
       &::-webkit-scrollbar {
         display: none;
@@ -32,8 +34,7 @@
       .A3title {
         padding: 40px 0 10px 0;
         font-size: 24px;
-        font-weight: 400;
-        color: rgba(43, 31, 23, 0.9);
+        font-weight: 500;
       }
       .A3item {
         display: flex;
@@ -41,18 +42,18 @@
         justify-content: center;
         width: 100%;
         height: fit-content;
-        padding: 4px 3px;
+        padding: 16px 3px;
+        color: rgba(155, 79, 45, 0.8);
         cursor: pointer;
         &:hover {
-          background-color: rgb(182, 154, 117);
+          background-color: rgba(255, 255, 255, 0.1);
         }
       }
       .A3close {
         position: fixed;
         bottom: 0;
         width: 250px;
-        height: 40px;
-        background-color: rgba(157, 135, 106, 0.9);
+        height: 80px;
         border-top: 1px solid rgba(43, 31, 23, 0.1);
         cursor: pointer;
         &:hover {
@@ -75,15 +76,18 @@
 @media screen and (max-width: 1000px) {
   .A3hotList {
     width: 100%;
-    height: 50%;
-    transform: translate(0, -100%);
+    height: 100%;
+    top: 0;
+    right: 0;
+    transform: translate(0, 0);
+    align-items: start;
     :global {
       html .cad {
         z-index: -1;
       }
       .A3main {
         width: 100%;
-        height: 100%;
+        height: 60%;
         background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
         background-size: cover;
         padding-bottom: 20px;
@@ -99,10 +103,13 @@
           }
         }
         .A3close {
+          display: none;
           width: 100%;
           height: 40px;
-          background-color: rgba(157, 135, 106, 0.9);
+          background-color: rgba(208, 191, 165, 1);
+          border: 4px solid #9b4f2d;
           border-top: 1px solid rgba(43, 31, 23, 0.1);
+
           img {
             width: 16px;
             height: 16px;

scene/src/pages/A3hotList/index.tsx

@@ -28,6 +28,9 @@ function A3hotList({ show, setShow, closeFu }: Props) {
     <div
       className={styles.A3hotList}
       style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
+      onClick={() => {
+        setShow(false)
+      }}
     >
       <div className='A3main'>
         <div className='A3title'>热点列表</div>

scene/src/pages/A4base/index.module.scss

@@ -63,9 +63,9 @@
       height: 325px;
     }
     .A4base-button {
-      transform: translate(-50%, 345px);
-      width: 164px;
-      height: 41px;
+      transform: translate(31%, 195px);
+      width: 350px;
+      height: 110px;
       cursor: pointer;
     }
   }

scene/src/pages/A4base/index.tsx

@@ -5,16 +5,12 @@ function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) =>
   const history = useHistory()
   return (
     <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
-      <div className='A4base-content'>
-        <div className='A4base-title1'>
-          <img src={require('./image/title.png')} alt='' />
-        </div>
-      </div>
+      <div className='A4base-content'></div>
       <div
         className='A4base-button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=SG-zeRFYMaTE9F')
+          history.push('/home?m=SG-Eq6bs2vVKv3')
           window.location.reload()
         }}
       >

scene/src/pages/A5Mobile/index.module.scss

@@ -25,9 +25,10 @@
       width: 200px;
     }
     .button {
+      transform: translate(-50%, -59%);
       cursor: pointer;
-      transform: translate(-50%, 229px);
-      width: 110px;
+      top: 80%;
+      width: 195px;
     }
   }
 }

scene/src/pages/A5Mobile/index.tsx

@@ -5,14 +5,11 @@ function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) =
   const history = useHistory()
   return (
     <div className={styles.A5Mobile} style={{ display: show ? 'block' : 'none' }}>
-      <div className='title'>
-        <img src={require('./image/title.png')} alt='' />
-      </div>
       <div
         className='button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=SG-zeRFYMaTE9F')
+          history.push('/home?m=SG-Eq6bs2vVKv3')
           window.location.reload()
         }}
       >