sidebar

.vscode/PythonImportHelper-v2-Completion.json

@@ -104,6 +104,46 @@
         "detail": "django.db",
         "documentation": {}
     },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "models",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "models",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
     {
         "label": "models",
         "importPath": "django.db",
@@ -505,6 +545,15 @@
         "detail": "object.models",
         "documentation": {}
     },
+    {
+        "label": "django.core.validators",
+        "kind": 6,
+        "isExtraImport": true,
+        "importPath": "django.core.validators",
+        "description": "django.core.validators",
+        "detail": "django.core.validators",
+        "documentation": {}
+    },
     {
         "label": "MinValueValidator",
         "importPath": "django.core.validators",
@@ -1043,6 +1092,33 @@
         "detail": "back.object.migrations.0003_element3d_parent",
         "documentation": {}
     },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
+        "description": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0003_element3d_parent'),\n    ]\n    operations = [\n        migrations.AddField(\n            model_name='clickablearea',\n            name='source',\n            field=models.ForeignKey(default=7, on_delete=django.db.models.deletion.PROTECT, to='object.element3d'),\n            preserve_default=False,",
+        "detail": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
+        "documentation": {}
+    },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0005_remove_clickablearea_source",
+        "description": "back.object.migrations.0005_remove_clickablearea_source",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0004_clickablearea_source_element3d_max_distance_and_more'),\n    ]\n    operations = [\n        migrations.RemoveField(\n            model_name='clickablearea',\n            name='source',\n        ),\n    ]",
+        "detail": "back.object.migrations.0005_remove_clickablearea_source",
+        "documentation": {}
+    },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0006_clickablearea_source",
+        "description": "back.object.migrations.0006_clickablearea_source",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0005_remove_clickablearea_source'),\n    ]\n    operations = [\n        migrations.AddField(\n            model_name='clickablearea',\n            name='source',\n            field=models.ForeignKey(default=7, on_delete=django.db.models.deletion.PROTECT, to='object.element3d'),\n            preserve_default=False,",
+        "detail": "back.object.migrations.0006_clickablearea_source",
+        "documentation": {}
+    },
     {
         "label": "ObjectConfig",
         "kind": 6,
@@ -1057,7 +1133,7 @@
         "kind": 6,
         "importPath": "back.object.models",
         "description": "back.object.models",
-        "peekOfCode": "class Element3D(models.Model):\n    parent = models.ForeignKey(\"self\", on_delete=models.PROTECT, blank=True, null=True)\n    model_file = models.FileField(upload_to=group_based_upload_to)\n    name = models.CharField(max_length=255)\n    description = models.TextField()\n    min_distance = models.IntegerField(\n        validators=[MinValueValidator(1), MaxValueValidator(200)],\n        blank=True,\n        null=True\n    )",
+        "peekOfCode": "class Element3D(models.Model):\n    parent = models.ForeignKey(\"self\", on_delete=models.PROTECT, blank=True, null=True)\n    model_file = models.FileField(upload_to=group_based_upload_to)\n    name = models.CharField(max_length=255)\n    description = models.TextField()\n    min_distance = models.IntegerField(\n        validators=[MinValueValidator(1), MaxValueValidator(200)], blank=True, null=True\n    )\n    max_distance = models.IntegerField(\n        validators=[MinValueValidator(2), MaxValueValidator(200)], blank=True, null=True",
         "detail": "back.object.models",
         "documentation": {}
     },
@@ -1066,7 +1142,7 @@
         "kind": 6,
         "importPath": "back.object.models",
         "description": "back.object.models",
-        "peekOfCode": "class ClickableArea(models.Model):\n    name = models.CharField(max_length=255)\n    description = models.TextField()\n    object_name = models.CharField(max_length=255)\n    target = models.ForeignKey(\n        Element3D, on_delete=models.CASCADE, related_name=\"clickable_areas\"\n    )\n    def __str__(self):\n        return self.name",
+        "peekOfCode": "class ClickableArea(models.Model):\n    name = models.CharField(max_length=255)\n    description = models.TextField()\n    object_name = models.CharField(max_length=255)\n    target = models.ForeignKey(\n        Element3D,\n        on_delete=models.PROTECT,\n        related_name=\"clickable_areas\",\n        blank=True,\n        null=True,",
         "detail": "back.object.models",
         "documentation": {}
     },
@@ -1111,7 +1187,7 @@
         "kind": 6,
         "importPath": "back.object.views",
         "description": "back.object.views",
-        "peekOfCode": "class NumberInFilter(django_filters.BaseInFilter, django_filters.NumberFilter):\n    pass\nclass ClickableAreaViewSet(viewsets.ModelViewSet):\n    queryset = ClickableArea.objects.all()\n    serializer_class = ClickableAreaSerializer\n    filterset_fields = (\"target\",)\nclass Element3DFilter(django_filters.rest_framework.FilterSet):\n    parent = NumberInFilter(\n        field_name=\"parent\",\n        lookup_expr=\"in\",",
+        "peekOfCode": "class NumberInFilter(django_filters.BaseInFilter, django_filters.NumberFilter):\n    pass\nclass ClickableAreaViewSet(viewsets.ModelViewSet):\n    queryset = ClickableArea.objects.all()\n    serializer_class = ClickableAreaSerializer\n    filterset_fields = (\n        \"source\",\n        \"object_name\",\n    )\nclass Element3DFilter(django_filters.rest_framework.FilterSet):",
         "detail": "back.object.views",
         "documentation": {}
     },
@@ -1120,7 +1196,7 @@
         "kind": 6,
         "importPath": "back.object.views",
         "description": "back.object.views",
-        "peekOfCode": "class ClickableAreaViewSet(viewsets.ModelViewSet):\n    queryset = ClickableArea.objects.all()\n    serializer_class = ClickableAreaSerializer\n    filterset_fields = (\"target\",)\nclass Element3DFilter(django_filters.rest_framework.FilterSet):\n    parent = NumberInFilter(\n        field_name=\"parent\",\n        lookup_expr=\"in\",\n    )\n    parent__isnull = django_filters.BooleanFilter(",
+        "peekOfCode": "class ClickableAreaViewSet(viewsets.ModelViewSet):\n    queryset = ClickableArea.objects.all()\n    serializer_class = ClickableAreaSerializer\n    filterset_fields = (\n        \"source\",\n        \"object_name\",\n    )\nclass Element3DFilter(django_filters.rest_framework.FilterSet):\n    parent = NumberInFilter(\n        field_name=\"parent\",",
         "detail": "back.object.views",
         "documentation": {}
     },

front/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     Gallery: typeof import('./src/components/Promo/gallery.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
+    IMdiClose: typeof import('~icons/mdi/close')['default']
     IMdiFile: typeof import('~icons/mdi/file')['default']
     IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
     IMdiHome: typeof import('~icons/mdi/home')['default']

front/src/components/Promo/load_models.vue

@@ -5,33 +5,12 @@ import { Box3, Vector2, Vector3 } from 'three';
 
 import { useTresContext, useSeek } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
+import { usePromoSidebar } from '../../stores/promo_sidebar';
 
 const max_size = reactive({
     x: 0, y: 0, z: 0
 })
 
-interface element3DType {
-    id: number
-    model_file: string
-    name: string
-    description: string
-    parent?: number,
-    min_distance?: number,
-    max_distance?: number,
-}
-interface model3DType {
-    modelUrl?: string,
-    modelFile?: any
-}
-interface clickableAreaType {
-    description: string;
-    id: number;
-    name: string;
-    object_name: string;
-    source: number;
-    target: number;
-}
-
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
         el.receiveShadow = true
@@ -42,8 +21,10 @@ function shadows_and_pos(scene: any) {
 
 const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
+const clickable_objects = ref<any[]>([])
 const { controls, raycaster, camera, scene } = useTresContext()
-const { seekAllByName } = useSeek()
+const { seekByName } = useSeek()
+const sidebar = usePromoSidebar()
 
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
@@ -84,6 +65,11 @@ const loadModels = async () => {
     (controls.value as any).minDistance = distance.min;
     (controls.value as any)._needsUpdate = true;
     (controls.value as any).update(1)
+
+    for (let index = 0; index < clickable.value.length; index++) {
+        const element = clickable.value[index];
+        clickable_objects.value.push(seekByName(scene.value, element.object_name))
+    }
 }
 onMounted(() => {
     loadModels()
@@ -103,13 +89,18 @@ const clickEvent = (event: MouseEvent) => {
     pointer.x = x
     pointer.y = y
     raycaster.value.setFromCamera(new Vector2(pointer.x, pointer.y), camera.value);
-    const intersects = raycaster.value.intersectObjects(scene.value.children);
+    
+    const intersects = raycaster.value.intersectObjects(clickable_objects.value);
     const names = intersects.map(el => el.object.name ?? false).filter(Boolean)
     if (names.length) {
-        console.log({ pointer, names })
+        const clicks = clickable.value.filter(el=>names.includes(el.object_name))
+        sidebar.open()
+        sidebar.setData({
+            title: clicks[0].name,
+            description: clicks[0].description
+        })
     }
     console.timeEnd('raycaster')
-
 }
 </script>
 <template>

front/src/components/Promo/main.vue

@@ -6,8 +6,12 @@ import { Vector3 } from 'three';
 import { TresCanvas } from '@tresjs/core';
 import { CameraControls, useProgress, StatsGl } from '@tresjs/cientos'
 
+
 import Env from './env.vue'
 import LoadModels from './load_models.vue'
+import { usePromoSidebar } from '../../stores/promo_sidebar';
+
+const sidebar = usePromoSidebar()
 
 const _v = new Vector3();
 const onChange = (e: any) => {
@@ -35,35 +39,46 @@ const point_light = reactive({
 
 </script>
 <template>
-    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
+    <div>
-        Загрузка {{ progress }}%
+        <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
-    </div>
+            Загрузка {{ progress }}%
-    <div :class="[{ 'invisible': !hasFinishLoading }]">
+        </div>
-        <TresCanvas shadows window-size>
+        <div :class="[{ 'invisible': !hasFinishLoading }]">
-            <Suspense>
+            <TresCanvas shadows window-size>
-                <StatsGl />
+                <Suspense>
-            </Suspense>
+                    <StatsGl />
-            <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
+                </Suspense>
-            <CameraControls v-bind="controlsState" @change="onChange" make-default />
+                <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
-            <Suspense>
+                <CameraControls v-bind="controlsState" @change="onChange" make-default />
-                <Env />
+                <Suspense>
-            </Suspense>
+                    <Env />
-            <Suspense>
+                </Suspense>
-                <LoadModels />
+                <Suspense>
-            </Suspense>
+                    <LoadModels />
-            <TresMesh cast-shadow>
+                </Suspense>
-                <TresBoxGeometry :args="[1, 1, 1]" />
+                <TresMesh cast-shadow>
-                <TresMeshStandardMaterial />
+                    <TresBoxGeometry :args="[1, 1, 1]" />
-            </TresMesh>
+                    <TresMeshStandardMaterial />
-            <TresMesh :position-y="0" :rotate-x="-Math.PI / 2" receive-shadow>
+                </TresMesh>
-                <TresPlaneGeometry :args="[200, 200]" />
+                <TresMesh :position-y="0" :rotate-x="-Math.PI / 2" receive-shadow>
-                <TresShadowMaterial :opacity="0.2" />
+                    <TresPlaneGeometry :args="[200, 200]" />
-            </TresMesh>
+                    <TresShadowMaterial :opacity="0.2" />
-            <TresPointLight v-bind="point_light" cast-shadow />
+                </TresMesh>
-        </TresCanvas>
+                <TresPointLight v-bind="point_light" cast-shadow />
+            </TresCanvas>
+        </div>
+        <div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
+            <a href="#" @click.prevent="sidebar.close">
+                <i-mdi-close />
+            </a>
+            <template v-if="sidebar.is_open">
+                <h2>{{ sidebar.title }}</h2>
+                <p>{{ sidebar.description }}</p>
+            </template>
+        </div>
     </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 .invisible {
     visibility: hidden;
 }
@@ -75,4 +90,18 @@ const point_light = reactive({
     font-size: 2rem;
     min-height: 100vh;
 }
+
+.sidebar {
+    width: 25vw;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    right: -25vw;
+    bottom: 0;
+    transition: all 300ms linear;
+
+    &.open {
+        right: 0
+    }
+}
 </style>

front/src/index.d.ts

@@ -0,0 +1,39 @@
+
+interface ProductInfo {
+    id: number
+    title: string
+    description: string
+    model3d?: string
+    image1?: string
+    image2?: string
+    image3?: string
+}
+
+
+interface element3DType {
+    id: number
+    model_file: string
+    name: string
+    description: string
+    parent?: number,
+    min_distance?: number,
+    max_distance?: number,
+}
+interface model3DType {
+    modelUrl?: string,
+    modelFile?: any
+}
+interface clickableAreaType {
+    description: string;
+    id: number;
+    name: string;
+    object_name: string;
+    source: number;
+    target: number;
+}
+interface PromoSidebar{
+    title: string
+    description: string
+    loading: boolean
+    is_open: boolean
+}

front/src/stores/product.ts

@@ -22,13 +22,3 @@ export const useProductStore = defineStore('product', {
         },
     }
 })
-
-export interface ProductInfo {
-    id: number
-    title: string
-    description: string
-    model3d?: string
-    image1?: string
-    image2?: string
-    image3?: string
-}

front/src/stores/promo_sidebar.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+
+export const usePromoSidebar = defineStore('promo_sidebar', {
+    state: () => {
+        return {
+            title: 'Сайдбар',
+            description: 'Описание',
+            loading: true,
+            is_open: false
+        } as PromoSidebar
+    },
+    actions: {
+        open() {
+            this.is_open = true
+            this.loading = true
+        },
+        setData(data: { title: string, description: string }) {
+            const { title, description } = data
+            this.title = title
+            this.description = description
+        },
+        close() {
+            this.$reset()
+            this.is_open = false
+        }
+    }
+})