增加3D在线预览组件

README.md

@@ -2,7 +2,7 @@
 
 ## Project setup
 ```
-npm install
+cnpm install 或者 npm install  由于vue-video-player 建议用cnpm install保证安装版本正确
 ```
 
 ### Compiles and hot-reloads for development

package.json

@@ -19,6 +19,7 @@
     "js-md5": "^0.7.3",
     "mockjs": "^1.1.0",
     "node-sass": "^7.0.1",
+    "online-3d-viewer": "^0.10.0",
     "postcss-pxtorem": "^5.1.1",
     "qrcodejs2": "^0.0.2",
     "sass-loader": "^13.0.2",

src/App.vue

 <template>
   <div id="app">
-    <NavBar :headerFixed="headerFixed" />
-    <!-- 开发阶段暂停使用keepAlive -->
+    <NavBar
+      :headerFixed="headerFixed"
+      v-if="$route.name && !whiteList.includes($route.name)"
+    />
     <router-view></router-view>
-    <!-- <keep-alive>
-      <router-view v-if="$route.meta.keepAlive"></router-view>
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive"></router-view> -->
     <el-backtop :bottom="100" :right="80">
       <svg-icon icon-class="backToTop"></svg-icon>
     </el-backtop>
-    <Footer />
+    <Footer v-if="$route.name && !whiteList.includes($route.name)" />
   </div>
 </template>
 <script>
@@ -21,15 +19,12 @@ export default {
   data() {
     return {
       headerFixed: false,
+      whiteList: ["3d"], //不需要nav或者footer的路由页面
     };
   },
   mounted() {
-    // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
-    // window.onbeforeunload = function (e) {
-    //   var storage = window.localStorage;
-    //   storage.clear()
-    // }
-  }
+    console.log("$route", this.$route);
+  },
 };
 </script>
 <style lang="scss">
@@ -37,6 +32,5 @@ html,
 body,
 #app {
   height: 100%;
-
 }
 </style>

src/components/Viewer3d/index.vue

+<template>
+  <!-- online_3d_viewer -->
+  <div
+    class="online_3d_viewer"
+    model="/static/3d/yshl.FBX"
+    :backgroundcolor="backgroundcolor"
+  ></div>
+</template>
+
+<script>
+import * as ThreeEngine from "online-3d-viewer";
+export default {
+  props: {
+    // 预览的3D文件的地址
+    url: {
+      type: String,
+      default: "",
+    },
+    // 模型背景颜色
+    backgroundcolor: {
+      type: String,
+      default: "0,0,0,80%",
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // 初始化3D查看器
+    init() {
+      // tell the engine where to find the libs folder
+      ThreeEngine.SetExternalLibLocation("libs");
+      // init all viewers on the page
+      ThreeEngine.Init3DViewerElements();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.online_3d_viewer {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  min-width: 300px;
+}
+</style>

src/main.js

@@ -16,18 +16,11 @@ import VideoPlayer from 'vue-video-player'
 import 'video.js/dist/video-js.css'
 import 'vue-video-player/src/custom-theme.css'
 
-//大图浏览，不使用elmentUI自带的imageViwer因为其不自带调整zoomRate
-import Viewer from 'v-viewer'
-import 'viewerjs/dist/viewer.css'
-Vue.use(Viewer)
-Viewer.setDefaults({
-  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
-})
-
-Vue.use(VideoPlayer)
 
+import Viewer from 'v-viewer'//大图浏览，不使用elmentUI自带的imageViwer因为其不自带调整zoomRate
+import 'viewerjs/dist/viewer.css'
 import LImg from '@/components/LazyImg'
-Vue.component('LImg', LImg)
+
 
 import {
   getFullUrl
@@ -35,6 +28,14 @@ import {
 import './permission'
 import '@/rem'
 
+Vue.use(Viewer)
+Viewer.setDefaults({
+  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
+})
+
+Vue.use(VideoPlayer)
+
+Vue.component('LImg', LImg)
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);
@@ -44,7 +45,6 @@ Vue.use(ElementUI);
 // 全局注册修改图片链接方法
 Vue.prototype.$getFullUrl = getFullUrl
 
-
 new Vue({
   router,
   store,

src/router/index.js

@@ -172,6 +172,13 @@ const routes = [
     component: () =>
       import("@/views/boutique/components/lzsg/index.vue"),
   },
+  // 3d展示页面，仅供测试用
+  {
+    path: "/3d",
+    name: "3d",
+    component: () =>
+      import("@/views/3d/index.vue"),
+  },
   // 404
   {
     path: "*",

src/utils/request.js

@@ -24,7 +24,6 @@ service.interceptors.request.use(
     num++
     if (!loading) {
       let loadingTest = Loading.service
-      console.log('loading', loadingTest)
       loading = Loading.service({
         lock: true,
         text: '加载中，请稍后...',

src/views/3d/index.vue

+<template>
+  <div class="dialog-container">
+    <div class="box">
+      <Viewer3d backgroundcolor="0, 0, 0,40%" />
+      <div class="close">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Viewer3d from "@/components/Viewer3d";
+export default {
+  components: { Viewer3d },
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  // background-color: #000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.box {
+  height: 100%;
+  width: 100%;
+  // background-color: rgba($color: #000000, $alpha: 0.4);
+  position: relative;
+  .close {
+    position: absolute;
+    right: -50px;
+    top: -100px;
+    padding: 10px;
+    border: 1px solid #fff;
+    color: #fff;
+    border-radius: 50%;
+  }
+}
+</style>

vue.config.js

@@ -24,7 +24,7 @@ module.exports = defineConfig({
 
   devServer: {
     host: "localhost",
-    port: "8080",
+    port: "8081",
     open: true,// 自动开启浏览器
     hot: true,
     compress: false, // 开启压缩