target name
This commit is contained in:
parent
6c0c008699
commit
c61d0fe55f
|
@ -120,110 +120,6 @@
|
||||||
"detail": "django.db",
|
"detail": "django.db",
|
||||||
"documentation": {}
|
"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": "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": "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": "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": "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": "models",
|
|
||||||
"importPath": "django.db",
|
|
||||||
"description": "django.db",
|
|
||||||
"isExtraImport": true,
|
|
||||||
"detail": "django.db",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"label": "models",
|
"label": "models",
|
||||||
"importPath": "django.db",
|
"importPath": "django.db",
|
||||||
|
@ -616,15 +512,6 @@
|
||||||
"detail": "frontImages.models",
|
"detail": "frontImages.models",
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"label": "object.models",
|
|
||||||
"kind": 6,
|
|
||||||
"isExtraImport": true,
|
|
||||||
"importPath": "object.models",
|
|
||||||
"description": "object.models",
|
|
||||||
"detail": "object.models",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"label": "django.core.validators",
|
"label": "django.core.validators",
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
|
@ -650,6 +537,15 @@
|
||||||
"detail": "django.core.validators",
|
"detail": "django.core.validators",
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"label": "object.models",
|
||||||
|
"kind": 6,
|
||||||
|
"isExtraImport": true,
|
||||||
|
"importPath": "object.models",
|
||||||
|
"description": "object.models",
|
||||||
|
"detail": "object.models",
|
||||||
|
"documentation": {}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"label": "django_filters",
|
"label": "django_filters",
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
|
@ -1157,91 +1053,28 @@
|
||||||
{
|
{
|
||||||
"label": "Migration",
|
"label": "Migration",
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
"importPath": "back.object.migrations.0002_remove_element3d_parent",
|
"importPath": "back.object.migrations.0002_remove_clickablearea_tergetname",
|
||||||
"description": "back.object.migrations.0002_remove_element3d_parent",
|
"description": "back.object.migrations.0002_remove_clickablearea_tergetname",
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0001_initial'),\n ]\n operations = [\n migrations.RemoveField(\n model_name='element3d',\n name='parent',\n ),\n ]",
|
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0001_initial'),\n ]\n operations = [\n migrations.RemoveField(\n model_name='clickablearea',\n name='tergetName',\n ),\n ]",
|
||||||
"detail": "back.object.migrations.0002_remove_element3d_parent",
|
"detail": "back.object.migrations.0002_remove_clickablearea_tergetname",
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Migration",
|
"label": "Migration",
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
"importPath": "back.object.migrations.0003_element3d_parent",
|
"importPath": "back.object.migrations.0003_clickablearea_target_name",
|
||||||
"description": "back.object.migrations.0003_element3d_parent",
|
"description": "back.object.migrations.0003_clickablearea_target_name",
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0002_remove_element3d_parent'),\n ]\n operations = [\n migrations.AddField(\n model_name='element3d',\n name='parent',\n field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.PROTECT, to='object.element3d'),\n ),",
|
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0002_remove_clickablearea_tergetname'),\n ]\n operations = [\n migrations.AddField(\n model_name='clickablearea',\n name='target_name',\n field=models.CharField(default='name', max_length=200),\n preserve_default=False,",
|
||||||
"detail": "back.object.migrations.0003_element3d_parent",
|
"detail": "back.object.migrations.0003_clickablearea_target_name",
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Migration",
|
"label": "Migration",
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
"importPath": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
|
"importPath": "back.object.migrations.0004_alter_clickablearea_target_name",
|
||||||
"description": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
|
"description": "back.object.migrations.0004_alter_clickablearea_target_name",
|
||||||
"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,",
|
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0003_clickablearea_target_name'),\n ]\n operations = [\n migrations.AlterField(\n model_name='clickablearea',\n name='target_name',\n field=models.CharField(blank=True, max_length=200, null=True),\n ),",
|
||||||
"detail": "back.object.migrations.0004_clickablearea_source_element3d_max_distance_and_more",
|
"detail": "back.object.migrations.0004_alter_clickablearea_target_name",
|
||||||
"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": "Migration",
|
|
||||||
"kind": 6,
|
|
||||||
"importPath": "back.object.migrations.0007_alter_clickablearea_target",
|
|
||||||
"description": "back.object.migrations.0007_alter_clickablearea_target",
|
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0006_clickablearea_source'),\n ]\n operations = [\n migrations.AlterField(\n model_name='clickablearea',\n name='target',\n field=models.ForeignKey(default=7, on_delete=django.db.models.deletion.PROTECT, related_name='clickable_areas', to='object.element3d'),\n preserve_default=False,",
|
|
||||||
"detail": "back.object.migrations.0007_alter_clickablearea_target",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Migration",
|
|
||||||
"kind": 6,
|
|
||||||
"importPath": "back.object.migrations.0008_alter_clickablearea_target",
|
|
||||||
"description": "back.object.migrations.0008_alter_clickablearea_target",
|
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0007_alter_clickablearea_target'),\n ]\n operations = [\n migrations.AlterField(\n model_name='clickablearea',\n name='target',\n field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, related_name='clickable_areas', to='object.element3d'),\n ),",
|
|
||||||
"detail": "back.object.migrations.0008_alter_clickablearea_target",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Migration",
|
|
||||||
"kind": 6,
|
|
||||||
"importPath": "back.object.migrations.0009_alter_clickablearea_description_and_more",
|
|
||||||
"description": "back.object.migrations.0009_alter_clickablearea_description_and_more",
|
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0008_alter_clickablearea_target'),\n ]\n operations = [\n migrations.AlterField(\n model_name='clickablearea',\n name='description',\n field=models.TextField(verbose_name='описание'),\n ),",
|
|
||||||
"detail": "back.object.migrations.0009_alter_clickablearea_description_and_more",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Migration",
|
|
||||||
"kind": 6,
|
|
||||||
"importPath": "back.object.migrations.0010_alter_clickablearea_target",
|
|
||||||
"description": "back.object.migrations.0010_alter_clickablearea_target",
|
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0009_alter_clickablearea_description_and_more'),\n ]\n operations = [\n migrations.AlterField(\n model_name='clickablearea',\n name='target',\n field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, related_name='clickable_areas', to='object.scene3d'),\n ),",
|
|
||||||
"detail": "back.object.migrations.0010_alter_clickablearea_target",
|
|
||||||
"documentation": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Migration",
|
|
||||||
"kind": 6,
|
|
||||||
"importPath": "back.object.migrations.0011_remove_element3d_max_distance_and_more",
|
|
||||||
"description": "back.object.migrations.0011_remove_element3d_max_distance_and_more",
|
|
||||||
"peekOfCode": "class Migration(migrations.Migration):\n dependencies = [\n ('object', '0010_alter_clickablearea_target'),\n ]\n operations = [\n migrations.RemoveField(\n model_name='element3d',\n name='max_distance',\n ),\n migrations.RemoveField(",
|
|
||||||
"detail": "back.object.migrations.0011_remove_element3d_max_distance_and_more",
|
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -1276,7 +1109,7 @@
|
||||||
"kind": 6,
|
"kind": 6,
|
||||||
"importPath": "back.object.models",
|
"importPath": "back.object.models",
|
||||||
"description": "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 Scene3D,\n on_delete=models.PROTECT,\n related_name=\"clickable_areas\",\n blank=True,\n null=True,",
|
"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_name = models.CharField(\n max_length=200,\n blank=True,\n null=True,\n )\n target = models.ForeignKey(",
|
||||||
"detail": "back.object.models",
|
"detail": "back.object.models",
|
||||||
"documentation": {}
|
"documentation": {}
|
||||||
},
|
},
|
||||||
|
|
|
@ -43,7 +43,11 @@ class ClickableArea(models.Model):
|
||||||
name = models.CharField("название", max_length=255)
|
name = models.CharField("название", max_length=255)
|
||||||
description = models.TextField("описание")
|
description = models.TextField("описание")
|
||||||
object_name = models.CharField("название объекта", max_length=255)
|
object_name = models.CharField("название объекта", max_length=255)
|
||||||
tergetName = models.CharField(max_length=200)
|
target_name = models.CharField(
|
||||||
|
max_length=200,
|
||||||
|
blank=True,
|
||||||
|
null=True,
|
||||||
|
)
|
||||||
target = models.ForeignKey(
|
target = models.ForeignKey(
|
||||||
Scene3D,
|
Scene3D,
|
||||||
on_delete=models.PROTECT,
|
on_delete=models.PROTECT,
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||||
import { Box3, Vector2, Vector3 } from 'three';
|
import { Box3, Vector2, Vector3 } from 'three';
|
||||||
import { useTresContext, useSeek } from '@tresjs/core';
|
import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
|
||||||
import { useGLTF } from '@tresjs/cientos'
|
import { useGLTF } from '@tresjs/cientos'
|
||||||
|
|
||||||
import { IMAGE_URL, SERVER_URL, } from '../../constants'
|
import { IMAGE_URL, SERVER_URL, } from '../../constants'
|
||||||
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
||||||
|
|
||||||
const props = defineProps(['source'])
|
const props = defineProps(['source', 'loaded'])
|
||||||
|
|
||||||
const max_size = reactive({
|
const max_size = reactive({
|
||||||
x: 0, y: 0, z: 0
|
x: 0, y: 0, z: 0
|
||||||
|
@ -24,20 +24,26 @@ function shadows_and_pos(scene: any) {
|
||||||
const models = ref<model3DType[]>([])
|
const models = ref<model3DType[]>([])
|
||||||
const clickable = ref<clickableAreaType[]>([])
|
const clickable = ref<clickableAreaType[]>([])
|
||||||
const clickable_objects = ref<any[]>([])
|
const clickable_objects = ref<any[]>([])
|
||||||
|
const sidebar = usePromoSidebar();
|
||||||
const { controls, raycaster, camera, scene } = useTresContext()
|
const { controls, raycaster, camera, scene } = useTresContext()
|
||||||
const { seekByName } = useSeek()
|
const { seekByName } = useSeek()
|
||||||
const sidebar = usePromoSidebar()
|
|
||||||
|
|
||||||
const loadModels = async () => {
|
const loadModels = async () => {
|
||||||
|
// pause()
|
||||||
|
|
||||||
const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
|
const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
|
||||||
const raw_data = await res.json() as scene3D
|
const raw_data = await res.json() as scene3D
|
||||||
const data = raw_data.elements
|
const data = raw_data.elements
|
||||||
if (!controls.value) return
|
if (!controls.value) return;
|
||||||
|
|
||||||
|
// controls.value._camera.position.set(0, 0, 250)
|
||||||
|
controls.value.enabled = false;
|
||||||
(controls.value as any).minDistance = raw_data.min_distance;
|
(controls.value as any).minDistance = raw_data.min_distance;
|
||||||
(controls.value as any).maxDistance = raw_data.max_distance;
|
(controls.value as any).maxDistance = raw_data.max_distance;
|
||||||
(controls.value as any)._needsUpdate = true;
|
(controls.value as any)._needsUpdate = true;
|
||||||
(controls.value as any).update(1)
|
(controls.value as any).update(1)
|
||||||
|
// camera.value?.position.copy(new Vector3(0, 0, 0));
|
||||||
|
// camera.value?.lookAt(new Vector3(0, 0, 0));
|
||||||
|
|
||||||
for (let index = 0; index < data.length; index++) {
|
for (let index = 0; index < data.length; index++) {
|
||||||
const element = data[index];
|
const element = data[index];
|
||||||
|
@ -52,19 +58,18 @@ const loadModels = async () => {
|
||||||
|
|
||||||
models.value.push(item)
|
models.value.push(item)
|
||||||
|
|
||||||
const box = new Box3();
|
// const box = new Box3();
|
||||||
box.expandByObject(loaded_scene.children[0]);
|
// box.expandByObject(loaded_scene.children[0]);
|
||||||
const box_size = new Vector3();
|
// const box_size = new Vector3();
|
||||||
box.getSize(box_size)
|
// box.getSize(box_size)
|
||||||
if (max_size.x > box_size.x) max_size.x = box_size.x
|
// 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.y > box_size.y) max_size.y = box_size.y
|
||||||
if (max_size.z > box_size.z) max_size.z = box_size.z
|
// if (max_size.z > box_size.z) max_size.z = box_size.z
|
||||||
|
|
||||||
const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
|
const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
|
||||||
const clickable_areas = await res.json()
|
const clickable_areas = await res.json()
|
||||||
clickable.value.push(...clickable_areas)
|
clickable.value.push(...clickable_areas)
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let index = 0; index < clickable.value.length; index++) {
|
for (let index = 0; index < clickable.value.length; index++) {
|
||||||
const element = clickable.value[index];
|
const element = clickable.value[index];
|
||||||
const find_element = seekByName(scene.value, element.object_name)
|
const find_element = seekByName(scene.value, element.object_name)
|
||||||
|
@ -80,9 +85,14 @@ const loadModels = async () => {
|
||||||
clickable_objects.value.push(res)
|
clickable_objects.value.push(res)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// resume()
|
||||||
|
controls.value.enabled = true;
|
||||||
|
props.loaded()
|
||||||
}
|
}
|
||||||
|
loadModels()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadModels()
|
|
||||||
document.addEventListener('click', clickEvent)
|
document.addEventListener('click', clickEvent)
|
||||||
})
|
})
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
@ -113,6 +123,7 @@ const clickEvent = (event: MouseEvent) => {
|
||||||
} as PromoSidebarData
|
} as PromoSidebarData
|
||||||
if (target?.target) {
|
if (target?.target) {
|
||||||
sidebar_data.target = target.target.toString()
|
sidebar_data.target = target.target.toString()
|
||||||
|
sidebar_data.target_name = target.target_name
|
||||||
}
|
}
|
||||||
sidebar.open()
|
sidebar.open()
|
||||||
sidebar.setData(sidebar_data)
|
sidebar.setData(sidebar_data)
|
||||||
|
|
|
@ -1,25 +1,28 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, watch } from 'vue';
|
import { reactive, ref, watch } from 'vue';
|
||||||
import type { Ref } from 'vue'
|
import type { Ref } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { Vector3 } from 'three';
|
import { PointLight, Vector3 } from 'three';
|
||||||
import { TresCanvas } from '@tresjs/core';
|
import { TresCanvas } from '@tresjs/core';
|
||||||
import { CameraControls, useProgress, StatsGl } from '@tresjs/cientos'
|
import { CameraControls, useProgress, StatsGl, OrbitControls } from '@tresjs/cientos'
|
||||||
|
|
||||||
import Env from './env.vue'
|
import Env from './env.vue'
|
||||||
import LoadModels from './load_models.vue'
|
import LoadModels from './load_models.vue'
|
||||||
import Sidebar from './sidebar.vue'
|
import Sidebar from './sidebar.vue'
|
||||||
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
||||||
|
|
||||||
const _v = new Vector3();
|
const _v = new Vector3();
|
||||||
const onChange = (e: any) => {
|
const onChange = (e: any) => {
|
||||||
// console.log(e._camera.position.normalize())
|
|
||||||
_v.copy(e._target);
|
_v.copy(e._target);
|
||||||
// e._target.clamp(minPan, maxPan);
|
// e._target.clamp(minPan, maxPan);
|
||||||
_v.sub(e._target);
|
_v.sub(e._target);
|
||||||
e._camera.position.sub(_v);
|
e._camera.position.sub(_v);
|
||||||
|
// console.log(e._camera.position.normalize())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const sidebar = usePromoSidebar()
|
||||||
|
|
||||||
const camera = ref()
|
const camera = ref()
|
||||||
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
|
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
|
||||||
|
|
||||||
|
@ -27,13 +30,19 @@ const controlsState = reactive({
|
||||||
maxPolarAngle: (Math.PI / 2) - 0.02,
|
maxPolarAngle: (Math.PI / 2) - 0.02,
|
||||||
enableZoom: false,
|
enableZoom: false,
|
||||||
})
|
})
|
||||||
|
const models_loading = ref(false)
|
||||||
|
const set_model_load_status = () =>{
|
||||||
|
models_loading.value = !models_loading.value
|
||||||
|
}
|
||||||
|
|
||||||
const { hasFinishLoading, progress } = await useProgress()
|
const point_light = new PointLight('#f0f', 1000, 200)
|
||||||
|
point_light.intensity = 10000
|
||||||
|
point_light.position.set(-100, 100, 5)
|
||||||
|
point_light.castShadow = true
|
||||||
|
point_light.shadow.bias = -0.01
|
||||||
|
point_light.shadow.mapSize.width = 512 * 10
|
||||||
|
point_light.shadow.mapSize.height = 512 * 10
|
||||||
|
|
||||||
const point_light = reactive({
|
|
||||||
intensity: 1000,
|
|
||||||
position: new Vector3(-100, 50, 5),
|
|
||||||
})
|
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
|
const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
|
||||||
|
@ -42,26 +51,25 @@ watch(() => route.params.target, () => {
|
||||||
if (route.params.target) t = route.params.target.toString() + '/'
|
if (route.params.target) t = route.params.target.toString() + '/'
|
||||||
if (source.value !== t) {
|
if (source.value !== t) {
|
||||||
source.value = t
|
source.value = t
|
||||||
|
models_loading.value = false
|
||||||
|
sidebar.close()
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
<div :class="[{ 'loading': !models_loading }, 'canvas-wrapper']">
|
||||||
Загрузка {{ progress }}%
|
|
||||||
</div>
|
|
||||||
<div :class="[{ 'invisible': !hasFinishLoading }]">
|
|
||||||
<TresCanvas shadows window-size>
|
<TresCanvas shadows window-size>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<StatsGl />
|
<StatsGl />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<TresPerspectiveCamera :position="cameraPosition" ref="camera" />
|
<TresPerspectiveCamera :position="cameraPosition" ref="camera" />
|
||||||
<CameraControls v-bind="controlsState" @change="onChange" make-default />
|
<OrbitControls v-bind="controlsState" make-default />
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<Env />
|
<Env />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<LoadModels :source="source" />
|
<LoadModels :source="source" :loaded="set_model_load_status" />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<TresMesh cast-shadow>
|
<TresMesh cast-shadow>
|
||||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||||
|
@ -71,22 +79,25 @@ watch(() => route.params.target, () => {
|
||||||
<TresPlaneGeometry :args="[200, 200]" />
|
<TresPlaneGeometry :args="[200, 200]" />
|
||||||
<TresShadowMaterial :opacity="0.2" />
|
<TresShadowMaterial :opacity="0.2" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
<TresPointLight v-bind="point_light" cast-shadow />
|
<TresPointLight v-bind="point_light" />
|
||||||
</TresCanvas>
|
</TresCanvas>
|
||||||
</div>
|
</div>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.invisible {
|
.canvas-wrapper {
|
||||||
visibility: hidden;
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
.loading {
|
||||||
.loader {
|
filter: blur(10px);
|
||||||
display: flex;
|
transition: all 300ms linear;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 2rem;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -20,7 +20,7 @@ onClickOutside(sidebar_obj, () => sidebar.close())
|
||||||
<p>{{ p }}</p>
|
<p>{{ p }}</p>
|
||||||
</template>
|
</template>
|
||||||
<RouterLink :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
|
<RouterLink :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
|
||||||
Перейти на темную сторону
|
{{ sidebar.target_name }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -42,6 +42,7 @@ interface PromoSidebarData {
|
||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
target?: string
|
target?: string
|
||||||
|
target_name?: string
|
||||||
}
|
}
|
||||||
interface PromoSidebar extends PromoSidebarData {
|
interface PromoSidebar extends PromoSidebarData {
|
||||||
loading: boolean
|
loading: boolean
|
||||||
|
|
Loading…
Reference in New Issue