2024-06-27 15:03:27 +03:00
6 changed files with 124 additions and 71 deletions
--- a/.vscode/PythonImportHelper-v2-Completion.json
+++ b/.vscode/PythonImportHelper-v2-Completion.json
@ -505,6 +505,22 @@
        "detail": "object.models",
        "documentation": {}
    },
+    {
+        "label": "MinValueValidator",
+        "importPath": "django.core.validators",
+        "description": "django.core.validators",
+        "isExtraImport": true,
+        "detail": "django.core.validators",
+        "documentation": {}
+    },
+    {
+        "label": "MaxValueValidator",
+        "importPath": "django.core.validators",
+        "description": "django.core.validators",
+        "isExtraImport": true,
+        "detail": "django.core.validators",
+        "documentation": {}
+    },
    {
        "label": "django_filters",
        "kind": 6,
@ -1041,7 +1057,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    def __str__(self):\n        return self.name\nclass ClickableArea(models.Model):\n    name = models.CharField(max_length=255)\n    description = models.TextField()",
+        "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    )",
        "detail": "back.object.models",
        "documentation": {}
    },
--- a/front/.env.development
+++ b/front/.env.development
@ -1,2 +1,3 @@
-VITE_SERVER_URL='http://localhost:8000'
+# VITE_SERVER_URL='http://localhost:8000'
+VITE_SERVER_URL='https://demo.kustarshina.ru'
 VITE_IMAGE_URL='https://demo.kustarshina.ru'
--- a/front/components.d.ts
+++ b/front/components.d.ts
@ -19,6 +19,7 @@ declare module 'vue' {
    IMdiShop: typeof import('~icons/mdi/shop')['default']
    IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
    Item: typeof import('./src/components/Floorplan/item.vue')['default']
+    Load_models: typeof import('./src/components/Promo/load_models.vue')['default']
    Main: typeof import('./src/components/Promo/main.vue')['default']
    ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default']
    Models: typeof import('./src/components/Promo/models.vue')['default']
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { IMAGE_URL, SERVER_URL, } from '../../constants'
+import { onMounted, reactive, ref } from 'vue';
+import { Box3, Vector3 } from 'three';
+
+import { useTresContext } from '@tresjs/core';
+import { useGLTF } from '@tresjs/cientos'
+
+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
+}
+const models = ref<model3DType[]>([])
+const { camera, controls } = useTresContext()
+const loadModels = async () => {
+    const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
+    const data = await res.json() as element3DType[]
+    const distance = {
+        min: controls.value.minDistance,
+        max: controls.value.maxDistance == Infinity ? 1 : controls.value.maxDistance,
+    }
+    console.log(camera)
+    console.log(controls)
+    for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        const item = {} as model3DType
+
+        item.modelUrl = `${IMAGE_URL}/${element.model_file}`
+        let { scene: loaded_scene } = await useGLTF(item.modelUrl)
+        item.modelFile = loaded_scene
+
+        models.value.push(item)
+
+        if (element.min_distance && element.min_distance > distance.min) distance.min = element.min_distance
+        if (element.max_distance && element.max_distance > distance.max) distance.max = element.max_distance
+
+        const box = new Box3();
+        box.expandByObject(loaded_scene.children[0]);
+        const box_size = new Vector3();
+        box.getSize(box_size)
+        if (max_size.x > box_size.x) max_size.x = box_size.x
+        if (max_size.y > box_size.y) max_size.y = box_size.y
+        if (max_size.z > box_size.z) max_size.z = box_size.z
+    }
+    controls.value.maxDistance = distance.max
+    controls.value.minDistance = distance.min
+    controls.value._needsUpdate = true
+    controls.value.update(1)
+
+}
+onMounted(() => {
+    loadModels()
+})
+</script>
+<template>
+    <TresGroup v-for="item in models">
+        <Suspense>
+            <ModelItem v-bind="item" />
+        </Suspense>
+    </TresGroup>
+</template>
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@ -1,104 +1,67 @@
 <script setup lang="ts">
-import { IMAGE_URL, SERVER_URL, } from '../../constants'
-import { onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
+import type { Ref } from 'vue'
 import { Vector3 } from 'three';

 import { TresCanvas } from '@tresjs/core';
-import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
+import { CameraControls, useProgress, StatsGl } from '@tresjs/cientos'

 import Env from './env.vue'
-import ModelItem from './modelItem.vue';
+import LoadModels from './load_models.vue'

-const minPan = new Vector3(-10, 1, -5);
-const maxPan = new Vector3(5, 1, 5);
 const _v = new Vector3();
-
 const onChange = (e: any) => {
+    // console.log(e._camera.position.normalize())
    _v.copy(e._target);
-    e._target.clamp(minPan, maxPan);
+    // e._target.clamp(minPan, maxPan);
    _v.sub(e._target);
    e._camera.position.sub(_v);
 }

-const cameraPosition = [-6, 4, 25] as unknown as Vector3
+const camera = ref()
+const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>

 const controlsState = reactive({
-    minDistance: 2,
-    maxDistance: 30,
+    // minDistance: 2,
+    // maxDistance: 30,
    maxPolarAngle: (Math.PI / 2) - 0.02,
-    maxZoom: 1,
-    minZoom: 1,
+    enableZoom: false,
 })

 const { hasFinishLoading, progress } = await useProgress()

 const point_light = reactive({
-    intensity: 10000,
-    position: new Vector3(-100, 5, 5),
+    intensity: 1000,
+    position: new Vector3(-100, 50, 5),
 })
-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
-}
-const models = ref<model3DType[]>([])
-const loadModels = async () => {
-    const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
-    const data = await res.json() as element3DType[]
-    const distance = {
-        min: controlsState.minDistance,
-        max: controlsState.maxDistance,
-    }
-    for (let index = 0; index < data.length; index++) {
-        const element = data[index];
-        const item = {} as model3DType

-        item.modelUrl = `${IMAGE_URL}/${element.model_file}`
-        let { scene: loaded_scene } = await useGLTF(item.modelUrl)
-        item.modelFile = loaded_scene
-
-        models.value.push(item)
-
-        if (element.min_distance && element.min_distance > distance.min) distance.min = element.min_distance
-        if (element.max_distance && element.max_distance > distance.max) distance.max = element.max_distance
-    }
-    controlsState.maxDistance = distance.max
-    controlsState.minDistance = distance.min
-}
-onMounted(() => {
-    loadModels()
-})
 </script>
 <template>
    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
        Загрузка {{ progress }}%
    </div>
    <div :class="[{ 'invisible': !hasFinishLoading }]">
-        <TresCanvas window-size>
-            <TresPerspectiveCamera :position="cameraPosition" />
+        <TresCanvas shadows window-size>
+            <Suspense>
+                <StatsGl />
+            </Suspense>
+            <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
            <CameraControls v-bind="controlsState" @change="onChange" make-default />
            <Suspense>
                <Env />
            </Suspense>
-            <TresGroup v-for="item in models">
-                <Suspense>
-                    <ModelItem v-bind="item" />
-                </Suspense>
-            </TresGroup>
-            <TresMesh>
+            <Suspense>
+                <LoadModels />
+            </Suspense>
+            <TresMesh cast-shadow>
                <TresBoxGeometry :args="[1, 1, 1]" />
                <TresMeshStandardMaterial />
            </TresMesh>
-            <TresPointLight v-bind="point_light" />
-            <TresAmbientLight :intensity="1" />
+            <TresMesh :position-y="0" :rotate-x="-Math.PI / 2" receive-shadow>
+                <TresPlaneGeometry :args="[200, 200]" />
+                <TresShadowMaterial :opacity="0.2" />
+            </TresMesh>
+            <TresPointLight v-bind="point_light" cast-shadow />
        </TresCanvas>
    </div>
 </template>
--- a/front/src/components/Promo/modelItem.vue
+++ b/front/src/components/Promo/modelItem.vue
@ -21,9 +21,7 @@ function shadows_and_pos(scene: any) {
 shadows_and_pos(scene)
 </script>
 <template>
-    <TresGroup >
-        <TresMesh cast-shadow receive-shadow>
-            <primitive :object="scene" />
-        </TresMesh>
-    </TresGroup>
+    <TresMesh>
+        <primitive :object="scene" />
+    </TresMesh>
 </template>