Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
xingjinxing
/
hjcz
0
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

.

jinx 9 mesiacov pred
rodič
34cd80c965
commit
2dd2daf713
6 zmenil súbory, kde vykonal 96 pridanie a 49 odobranie
Jednotné zobrazenie Ukázať štatistiku rozdielnych dát
  1. 9 2
      public/html/model.html
  2. 2 2
      public/index.html
  3. 8 1
      public/lib/4dage.js
  4. 0 14
      public/数据结构.txt
  5. 8 1
      src/pages/antiques/index.vue
  6. 69 29
      src/pages/detail/model.vue

+ 9 - 2
public/html/model.html
Zobraziť súbor 

@@ -24,12 +24,19 @@
 
       // fdage.embed(`../model/${m}.4dage`, {

       // fdage.embed(`../model/${m}.4dage`, {

       fdage.embed(`../model/${decodeURIComponent(m)}`, {

       fdage.embed(`../model/${decodeURIComponent(m)}`, {

         transparentBackground: true,

         transparentBackground: true,

-        width: 800,

-        height: 600,

+        // width: 800,

+        // height: 600,

         autoStart: true,

         autoStart: true,

         fullFrame: true,

         fullFrame: true,

         pagePreset: false,

         pagePreset: false,

       });

       });

+      document.addEventListener("model_loaded", function (event) {

+        window.parent.postMessage({ action: "model_loaded" }, "*");

+      });

+      // console.error(window.modelLoding);

+      // setTimeout(() => {

+      //   console.error(window.modelLoding);

+      // }, 5000);

     </script>

     </script>

   </body>

   </body>

 </html>

 </html>

+ 2 - 2
public/index.html
Zobraziť súbor 

@@ -4,7 +4,7 @@
 
     <meta charset="utf-8" />

     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

-    <title></title>

+    <title>红军长征过丽江纪念馆</title>

     <meta name="description" content="四维时代" />

     <meta name="description" content="四维时代" />

     <meta property="og:title" content="四维时代" />

     <meta property="og:title" content="四维时代" />

     <meta property="og:description" content="四维时代" />

     <meta property="og:description" content="四维时代" />

@@ -15,6 +15,6 @@
 
 

 

   <body>

   <body>

     <div id="app"></div>

     <div id="app"></div>

-    <script src="<%= VUE_APP_STATIC_DIR %>/lib/4dage.js"></script>

+    <!-- <script src="<%= VUE_APP_STATIC_DIR %>/lib/4dage.js"></script> -->

   </body>

   </body>

 </html>

 </html>

+ 8 - 1
public/lib/4dage.js
Zobraziť súbor 

@@ -6269,7 +6269,14 @@ fdage = {
 
                 //     dom.style.opacity = 0

                 //     dom.style.opacity = 0

                 //     dom.style.pointerEvents = 'none'

                 //     dom.style.pointerEvents = 'none'

                 // }, 500);

                 // }, 500);

-

+                const myEvent = new CustomEvent('model_loaded', {

+                  detail: { message: 'model is loadedfinish!' },

+                  bubbles: true, // 事件是否冒泡

+                  cancelable: true // 是否可以取消事件的默认行为

+                });

+                 

+                // 触发事件

+                document.dispatchEvent(myEvent);

                 this.scene.view.updateView(),

                 this.scene.view.updateView(),

                     this.ui.showActiveView(),

                     this.ui.showActiveView(),

                     this.requestFrame(this.update.bind(this)),

                     this.requestFrame(this.update.bind(this)),

+ 0 - 14
public/数据结构.txt
Zobraziť súbor 

@@ -1,14 +0,0 @@
 
-model文件夹用于存放三维文物模型文件

-

-

-thumb 文件夹用于存放封面图。

-    mode：三维文物封面图；

-    pano：全景漫游封面图；

-    scene：场景探索封面图；

-

-

-json文件是存放整个json数据

-

-

-

-

+ 8 - 1
src/pages/antiques/index.vue
Zobraziť súbor 

@@ -247,11 +247,13 @@ export default {
 
           height: 70px;

           height: 70px;

           background-image: url(../../assets/images/icon-back.png);

           background-image: url(../../assets/images/icon-back.png);

           background-repeat: no-repeat;

           background-repeat: no-repeat;

+          background-position: center;

           background-size: 100%;

           background-size: 100%;

           cursor: pointer;

           cursor: pointer;

         }

         }

         .logo {

         .logo {

           margin-left: 20px;

           margin-left: 20px;

+          // max-width: 203px;

         }

         }

         .options-bar {

         .options-bar {

           height: 100%;

           height: 100%;

@@ -296,10 +298,15 @@ export default {
 
                 position: absolute;

                 position: absolute;

                 background: url(../../assets/images/lingxing1.png) no-repeat;

                 background: url(../../assets/images/lingxing1.png) no-repeat;

                 background-size: 100%;

                 background-size: 100%;

-                right: -0.4333rem;

+                right: -35px;

                 top: 50%;

                 top: 50%;

                 transform: translateY(-50%);

                 transform: translateY(-50%);

               }

               }

+              &:last-of-type {

+                &::before {

+                  display: none;

+                }

+              }

               &.active {

               &.active {

                 font-weight: bold;

                 font-weight: bold;

                 &::after {

                 &::after {

+ 69 - 29
src/pages/detail/model.vue
Zobraziť súbor 

@@ -2,14 +2,17 @@
 
 <template>

 <template>

   <div class="model-box" :class="{ isMobile }">

   <div class="model-box" :class="{ isMobile }">

     <div class="close-btn" @click="onClose"></div>

     <div class="close-btn" @click="onClose"></div>

-    <div class="control-bar">

+    <div class="control-bar" :class="{ bottom: isMobile && isFullscreen }" v-if="modelLoaded">

       <template v-for="(i, index) in controls">

       <template v-for="(i, index) in controls">

         <div class="item" @click="onClickBar(i)" :style="`background-image:url(${i.url});`"></div>

         <div class="item" @click="onClickBar(i)" :style="`background-image:url(${i.url});`"></div>

       </template>

       </template>

     </div>

     </div>

     <div class="model-content">

     <div class="model-content">

-      <div class="model-view">

-        <iframe id="ifr" :src="`/html/model.html?m=${encodeURIComponent(info.fileName)}`" frameborder="0"></iframe>

+      <div class="model-view" :class="{ full: isFullscreen }">

+        <!-- <div class="model-view"> -->

+        <div class="frame-box">

+          <iframe id="ifr" :src="`/html/model.html?m=${encodeURIComponent(info.fileName)}`" frameborder="0"></iframe>

+        </div>

       </div>

       </div>

       <div class="model-text">

       <div class="model-text">

         <p class="title">{{ info.name }}</p>

         <p class="title">{{ info.name }}</p>

@@ -31,7 +34,7 @@ export default {
 
     return {

     return {

       isMobile: browser.mobile,

       isMobile: browser.mobile,

       isFullscreen: false,

       isFullscreen: false,

-

+      modelLoaded: false,

       num: 0,

       num: 0,

       controls: [

       controls: [

         { url: require("@/assets/images/bigger.png"), name: "big" },

         { url: require("@/assets/images/bigger.png"), name: "big" },

@@ -73,29 +76,29 @@ export default {
 
       }

       }

     },

     },

     onFullScreen() {

     onFullScreen() {

-      let element = document.documentElement;

-      if (this.isFullscreen) {

-        if (document.exitFullscreen) {

-          document.exitFullscreen();

-        } else if (document.webkitCancelFullScreen) {

-          document.webkitCancelFullScreen();

-        } else if (document.mozCancelFullScreen) {

-          document.mozCancelFullScreen();

-        } else if (document.msExitFullscreen) {

-          document.msExitFullscreen();

-        }

-      } else {

-        if (element.requestFullscreen) {

-          element.requestFullscreen();

-        } else if (element.webkitRequestFullScreen) {

-          element.webkitRequestFullScreen();

-        } else if (element.mozRequestFullScreen) {

-          element.mozRequestFullScreen();

-        } else if (element.msRequestFullscreen) {

-          element.msRequestFullscreen();

-        }

-      }

-      // 改变当前全屏状态

+      this.isFullscreen = !this.isFullscreen;

+      // let element = document.documentElement;

+      // if (this.isFullscreen) {

+      //   if (document.exitFullscreen) {

+      //     document.exitFullscreen();

+      //   } else if (document.webkitCancelFullScreen) {

+      //     document.webkitCancelFullScreen();

+      //   } else if (document.mozCancelFullScreen) {

+      //     document.mozCancelFullScreen();

+      //   } else if (document.msExitFullscreen) {

+      //     document.msExitFullscreen();

+      //   }

+      // } else {

+      //   if (element.requestFullscreen) {

+      //     element.requestFullscreen();

+      //   } else if (element.webkitRequestFullScreen) {

+      //     element.webkitRequestFullScreen();

+      //   } else if (element.mozRequestFullScreen) {

+      //     element.mozRequestFullScreen();

+      //   } else if (element.msRequestFullscreen) {

+      //     element.msRequestFullscreen();

+      //   }

+      // }

     },

     },

   },

   },

   //生命周期 - 创建完成（可以访问当前this实例）

   //生命周期 - 创建完成（可以访问当前this实例）

@@ -111,6 +114,18 @@ export default {
 
         this.isFullscreen = !this.isFullscreen;

         this.isFullscreen = !this.isFullscreen;

       });

       });

     });

     });

+

+    window.addEventListener(

+      "message",

+      (e) => {

+        if (e.data) {

+          if (e.data.action == "model_loaded") {

+            this.modelLoaded = true;

+          }

+        }

+      },

+      false

+    );

   },

   },

   beforeCreate() {}, //生命周期 - 创建之前

   beforeCreate() {}, //生命周期 - 创建之前

   beforeMount() {}, //生命周期 - 挂载之前

   beforeMount() {}, //生命周期 - 挂载之前

@@ -136,6 +151,7 @@ export default {
 
     width: 32px;

     width: 32px;

     right: 40px;

     right: 40px;

     bottom: 100px;

     bottom: 100px;

+    z-index: 101;

     .item {

     .item {

       width: 32px;

       width: 32px;

       height: 32px;

       height: 32px;

@@ -153,6 +169,7 @@ export default {
 
     top: 60px;

     top: 60px;

     position: absolute;

     position: absolute;

     cursor: pointer;

     cursor: pointer;

+    z-index: 99;

   }

   }

   .model-content {

   .model-content {

     width: 50%;

     width: 50%;

@@ -166,9 +183,29 @@ export default {
 
       flex-direction: column;

       flex-direction: column;

       width: 100%;

       width: 100%;

       height: 70%;

       height: 70%;

-      iframe {

+      .frame-box {

         width: 100%;

         width: 100%;

         height: 100%;

         height: 100%;

+        iframe {

+          width: 100%;

+          height: 100%;

+        }

+      }

+

+      &.full {

+        .frame-box {

+          background: rgba(0, 0, 0, 0.5);

+          backdrop-filter: blur(10px);

+          position: fixed;

+          z-index: 100;

+          width: 100%;

+          height: 100%;

+          left: 0;

+          top: 0;

+          // animation: full_model 0.3s;

+          iframe {

+          }

+        }

       }

       }

     }

     }

     .model-text {

     .model-text {

@@ -183,7 +220,7 @@ export default {
 
         font-size: 14px;

         font-size: 14px;

         color: rgba(255, 255, 255, 0.6);

         color: rgba(255, 255, 255, 0.6);

         line-height: 32px;

         line-height: 32px;

-        text-align: justified;

+        text-align: justify;

       }

       }

     }

     }

   }

   }

@@ -205,6 +242,9 @@ export default {
 
       left: 50%;

       left: 50%;

       transform: translateX(-50%);

       transform: translateX(-50%);

       bottom: 30%;

       bottom: 30%;

+      &.bottom {

+        bottom: 0.5333rem;

+      }

     }

     }

     .model-content {

     .model-content {

       width: 100%;

       width: 100%;