diff options
| -rw-r--r-- | pages/models/_id.vue | 34 |
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); }, |