3d model

front/components.d.ts

@@ -7,6 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    IMdi3dRotation: typeof import('~icons/mdi/3d-rotation')['default']
+    IMdiCard: typeof import('~icons/mdi/card')['default']
+    IMdiClarify: typeof import('~icons/mdi/clarify')['default']
+    IMdiFile: typeof import('~icons/mdi/file')['default']
+    IMdiIcon: typeof import('~icons/mdi/icon')['default']
+    IMdiPrinter: typeof import('~icons/mdi/printer')['default']
+    IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
     RandomIcon: typeof import('./src/components/RandomIcon.vue')['default']
   }
 }

front/src/App.vue

@@ -11,21 +11,31 @@ const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? ''
 
 type StateType = {
   active_product?: ProductInfo
+  show_canvas: boolean
 }
 
 const products = useProductStore()
 
 const state: StateType = reactive({
-  active_product: undefined
+  active_product: undefined,
+  show_canvas: false
 })
 
 const setActive = (id: number) => {
-  state.active_product = products.list.find(el => el.id == id)
+  state.active_product = products.list.find(el => el.id == id),
+    state.show_canvas = false
+}
+
+const toggleShowCanvas = () => {
+  state.show_canvas = !state.show_canvas
 }
 
 const target = ref<HTMLElement | null>(null)
 useSwipe(target, {
   onSwipeEnd(_: TouchEvent, direction: UseSwipeDirection) {
+    if (state.show_canvas) {
+      return
+    }
     const index = products.list.findIndex(el => el.id == state.active_product?.id)
     if (direction === 'right') {
       if (index == products.list.length - 1) {
@@ -44,7 +54,6 @@ useSwipe(target, {
 })
 
 onMounted(async () => {
-  useSwipe
   products.getData()
 })
 </script>
@@ -63,14 +72,19 @@ onMounted(async () => {
     </div>
     <div class="header"><span class="logo-header">Проекты Кустарщины</span></div>
     <div class="main product" v-if="state.active_product" ref="target">
-      <model-fbx v-if="state.active_product.model3d" class="product-model"
+      <div class="product-image" v-if="!state.show_canvas && state.active_product.image1">
-        :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
-      <div class="product-image" v-if="state.active_product.image1">
         <img :src="`${IMAGE_URL}${state.active_product.image1}`" />
       </div>
-      <div class="product-description">
+      <div class="product-description" v-if="!state.show_canvas">
         {{ state.active_product.description }}
       </div>
+      <a class="product-model-icon" v-if="state.active_product.model3d" @click.stop.prevent="toggleShowCanvas">
+        <i-mdi-video-3d v-if="!state.show_canvas" />
+        <i-mdi-file v-else />
+      </a>
+      <model-fbx v-if="state.show_canvas && state.active_product.model3d" class="product-model"
+        :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`"
+        :backgroundAlpha="0"></model-fbx>
     </div>
     <div class="main" v-else>
       <img class="logo-img" src="./assets/logo_color.png" />

front/src/assets/main.scss

@@ -85,6 +85,7 @@ body {
 
 .product {
   gap: 1rem;
+  position: relative;
 
   &-image {
     flex-basis: 50%;
@@ -96,6 +97,18 @@ body {
     line-height: 1.4;
   }
 
+  &-model {
+    max-height: 80%;
+    &-icon {
+      position: absolute;
+      font-size: 4rem;
+      right: 0;
+      top: 0;
+      color: $accentColor;
+      z-index: 2;
+    }
+  }
+
 }
 
 .logo {