Merge pull request #11 from aps1027/develop

Added 3D model loader and fixed future risk In Version 1
aps1027 · Oct 4, 2020 · b9827a0 · b9827a0
2 parents e272b73 + 7643182
commit b9827a0
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 14 deletions.
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -4,13 +4,13 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="<%= BASE_URL %>logo.png" />
+    <title>3D Room Interior Design</title>
   </head>
   <body>
     <noscript>
       <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        >We're sorry but 3D Room Interior Design doesn't work
         properly without JavaScript enabled. Please enable it to
         continue.</strong
       >

diff --git a/client/public/logo.png b/client/public/logo.png
diff --git a/client/src/components/Model.vue b/client/src/components/Model.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ProgressLoading v-if="progress != 100" :progress="progress" />
     <SideTabBar @get-switch="getSwitch" />
     <ObjectSideBar
       :uploadedModelMap="uploadedModelMap"
@@ -109,6 +110,7 @@ import SideTabBar from "./SideTabBar.vue";
 import ColorPalette from "./ColorPalette.vue";
 import ObjectSideBar from "./ObjectSideBar.vue";
 import Object3D from "./3DObject.vue";
+import ProgressLoading from "./ProgressLoading.vue";
 import constants from "../constants";
 
 let container;
@@ -137,6 +139,7 @@ export default {
     ColorPalette,
     Object3D,
     ObjectSideBar,
+    ProgressLoading,
   },
   data() {
     return {
@@ -172,6 +175,7 @@ export default {
         rotation: {},
       },
       modelDesign: [],
+      progress: 100,
     };
   },
   computed: {
@@ -631,7 +635,10 @@ export default {
           // Add the model to the scene
           scene.add(bedModel);
         },
-        undefined,
+        (xhr) => {
+          this.progress = ((xhr.loaded / xhr.total) * 100).toFixed(1);
+          console.log(this.progress + "% loaded");
+        },
         (error) => {
           console.error(error);
         }
@@ -683,7 +690,10 @@ export default {
           // Add the model to the scene
           scene.add(sofaModel);
         },
-        undefined,
+        (xhr) => {
+          this.progress = ((xhr.loaded / xhr.total) * 100).toFixed(1);
+          console.log(this.progress + "% loaded");
+        },
         (error) => {
           console.error(error);
         }
@@ -736,7 +746,10 @@ export default {
           // Add the model to the scene
           scene.add(tableModel);
         },
-        undefined,
+        (xhr) => {
+          this.progress = ((xhr.loaded / xhr.total) * 100).toFixed(1);
+          console.log(this.progress + "% loaded");
+        },
         (error) => {
           console.error(error);
         }
@@ -793,7 +806,10 @@ export default {
           // Add the model to the scene
           scene.add(cabinetModel);
         },
-        undefined,
+        (xhr) => {
+          this.progress = ((xhr.loaded / xhr.total) * 100).toFixed(1);
+          console.log(this.progress + "% loaded");
+        },
         (error) => {
           console.error(error);
         }
@@ -847,7 +863,10 @@ export default {
           // Add the model to the scene
           scene.add(chairModel);
         },
-        undefined,
+        (xhr) => {
+          this.progress = ((xhr.loaded / xhr.total) * 100).toFixed(1);
+          console.log(this.progress + "% loaded");
+        },
         (error) => {
           console.error(error);
         }

diff --git a/client/src/components/Nav.vue b/client/src/components/Nav.vue
@@ -1,13 +1,18 @@
 <template>
-  <nav class="flex items-center justify-between flex-wrap bg-teal-600 p-4 absolute w-screen">
+  <nav
+    class="flex items-center justify-between flex-wrap bg-teal-600 p-4 absolute w-screen"
+  >
     <div class="flex items-center flex-shrink-0 text-white mr-6">
-      <span class="font-semibold md:text-2xl xl:text-2xl lg:text-2xl tracking-wide sm:text-xl">Room Interior Design Decoration</span>
+      <span
+        class="font-semibold md:text-2xl xl:text-2xl lg:text-2xl tracking-wide sm:text-xl"
+        >3D Room Interior Design Decoration</span
+      >
     </div>
   </nav>
 </template>
 
 <script>
 export default {
-  name: 'Nav'
-}
+  name: "Nav",
+};
 </script>
diff --git a/client/src/components/ProgressLoading.vue b/client/src/components/ProgressLoading.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="w-screen h-screen absolute z-50 bg-gray-500 opacity-50">
+    <div
+      class="loader"
+    >
+      {{ progress }}%
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ProgressLoading",
+  props: ["progress"],
+};
+</script>
+<style scoped lang="postcss">
+.loader {
+  top: 50%;
+  right: 50%;
+  transform: translateX(50%);
+  position: absolute;
+  width: 100px;
+  background: white;
+  height: 100px;
+  text-align: center;
+  border-radius: 50px;
+  padding: 30px 0px;
+  font-size: 26px;
+}
+</style>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   future: {
-    // removeDeprecatedGapUtilities: true,
-    // purgeLayersByDefault: true,
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
   },
   purge: [],
   theme: {