Handle obj files

1 files changed, 27 insertions, 7 deletions

diff --git a/pages/models/_id.vue b/pages/models/_id.vue
index b5c3e2e..f1007de 100644
--- a/pages/models/_id.vue
+++ b/pages/models/_id.vue
@@ -12,11 +12,16 @@
               :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
             )
             model-stl(
-              v-else
+              v-else-if="isStl(model.uploads[selectedUpload].filepath)"
               :rotate="rotate"
               :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
               :backgroundColor="'#111827'"
             )
+            model-obj(
+              v-else-if="isObj(model.uploads[selectedUpload].filepath)"
+              :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
+              :backgroundColor="'#111827'"
+            )
         .w-full.mt-8(class="md:w-1/5 md:mt-0" v-if="model")
           .grid.grid-cols-3.gap-4.h-full.overflow-y-auto.grid-mini(class="md:grid-cols-2")
             .border-2.border-gray-300.bg-gray-300.w-24.h-24.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
@@ -30,12 +35,17 @@
                 :src="baseAPI + '' + upload.filepath"
               )
               model-stl(
-                v-else
+                v-else-if="isStl(model.uploads[selectedUpload].filepath)"
                 :rotate="rotate"
                 :src="baseAPI + '' + upload.filepath"
                 :backgroundColor="'#D1D5DB'"
                 :controlsOptions="{'enablePan': false, 'enableZoom': false, 'enableRotate': false}"
               )
+              model-obj(
+                v-else-if="isObj(model.uploads[selectedUpload].filepath)"
+                :src="baseAPI + '' + upload.filepath"
+                :backgroundColor="'#D1D5DB'"
+              )
 
     section.mt-5
       .grid.grid-cols-6.gap-5.mb-5
@@ -97,7 +107,7 @@
 </template>
 
 <script>
-import { ModelStl } from "vue-3d-model";
+import { ModelStl, ModelObj } from "vue-3d-model";
 
 export default {
   name: "ModelView",
@@ -118,6 +128,7 @@ export default {
   },
   components: {
     ModelStl,
+    ModelObj,
   },
   created() {
     this.id = this.$route.params.id;
@@ -135,14 +146,23 @@ export default {
     });
   },
   methods: {
+    checkExt(path, ext) {
+      return path.indexOf("." + ext) > 0;
+    },
     isImage(path) {
       return (
-        path.indexOf(".png") > 0 ||
-        path.indexOf(".jpg") > 0 ||
-        path.indexOf(".jpeg") > 0 ||
-        path.indexOf(".webp") > 0
+        this.checkExt(path, "png") ||
+        this.checkExt(path, "jpg") ||
+        this.checkExt(path, "jpeg") ||
+        this.checkExt(path, "webp")
       );
     },
+    isStl(path) {
+      return this.checkExt(path, "stl");
+    },
+    isObj(path) {
+      return this.checkExt(path, "obj");
+    },
     getFileName(path) {
       return path.split("/").at(-1);
     },