From 1b635741b9b52970ffac834eb9b5d64321b6cb5a Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Tue, 20 Aug 2024 15:10:12 +0300 Subject: [PATCH] sidebar --- front/components.d.ts | 1 + front/src/assets/home.scss | 36 ----- front/src/assets/main.scss | 15 +- front/src/assets/projects.scss | 110 -------------- front/src/assets/sidebar.scss | 115 +++++++++++++++ front/src/components/Home.vue | 18 --- front/src/components/Promo/load_models.vue | 81 +++-------- front/src/components/Promo/main.vue | 31 ++-- front/src/components/Promo/sidebar.vue | 158 +++------------------ front/src/index.d.ts | 5 - front/src/stores/clickable.ts | 11 ++ front/src/stores/floorplan.ts | 76 ---------- front/src/stores/product.ts | 24 ---- front/src/stores/promo_scene.ts | 9 +- front/src/stores/promo_sidebar.ts | 19 ++- package-lock.json | 6 - 16 files changed, 221 insertions(+), 494 deletions(-) delete mode 100644 front/src/assets/home.scss delete mode 100644 front/src/assets/projects.scss create mode 100644 front/src/assets/sidebar.scss delete mode 100644 front/src/components/Home.vue create mode 100644 front/src/stores/clickable.ts delete mode 100644 front/src/stores/floorplan.ts delete mode 100644 front/src/stores/product.ts delete mode 100644 package-lock.json diff --git a/front/components.d.ts b/front/components.d.ts index ff2e0ac..b98dda4 100644 --- a/front/components.d.ts +++ b/front/components.d.ts @@ -13,6 +13,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'] + IMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default'] IMdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default'] IMdiClose: typeof import('~icons/mdi/close')['default'] IMdiFile: typeof import('~icons/mdi/file')['default'] diff --git a/front/src/assets/home.scss b/front/src/assets/home.scss deleted file mode 100644 index 62e39fa..0000000 --- a/front/src/assets/home.scss +++ /dev/null @@ -1,36 +0,0 @@ -@font-face { - font-family: 'open-sans'; - src: url('../fonts/open-sans.ttf'); -} - -$accentColor: rgb(126, 126, 223); - -.container { - font-family: 'open-sans'; -} -.header { - display: flex; - justify-content: center; - font-size: 6rem; - font-weight: 800; -} - -.main { - ul { - font-size: 4rem; - - li { - padding: 2rem; - } - - a { - text-decoration: none; - color: initial; - - &:hover, - &:active { - color: $accentColor; - } - } - } -} \ No newline at end of file diff --git a/front/src/assets/main.scss b/front/src/assets/main.scss index 1698817..7baaa7b 100644 --- a/front/src/assets/main.scss +++ b/front/src/assets/main.scss @@ -1,9 +1,22 @@ @import 'grid.scss'; +@font-face { + font-family: 'main'; + src: url('../fonts/main.otf'); +} + + +@font-face { + font-family: 'logo'; + src: url('../fonts/logo.ttf'); +} + a[href] { color: #048280; &.router-link-active { color: #a47f62; } -} \ No newline at end of file +} + +@import 'sidebar.scss'; \ No newline at end of file diff --git a/front/src/assets/projects.scss b/front/src/assets/projects.scss deleted file mode 100644 index 493cd98..0000000 --- a/front/src/assets/projects.scss +++ /dev/null @@ -1,110 +0,0 @@ - -$blackColor: #181818; -$accentColor: #ef570c; -$redColor: #f83300; - -@font-face { - font-family: 'logo'; - src: url('../fonts/logo.ttf'); -} - -@font-face { - font-family: 'main'; - src: url('../fonts/main.otf'); -} - -.container { - font-family: 'main'; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) $blackColor; - background-blend-mode: multiply, multiply; - color: #fff; - user-select: none; -} - -.header { - justify-content: center; -} -.main, -.header, -.sidebar { - display: flex; - align-items: center; -} - -.menu { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 1rem; - font-size: 2.5rem; - - li { - padding: 0.5rem 0; - - a { - text-decoration: none; - - &, - &:hover, - &:active, - &:visited { - color: $accentColor; - } - } - } -} - -.model { - max-width: 33vw; -} - -.product { - gap: 1rem; - position: relative; - - &-image { - flex-basis: 50%; - flex-shrink: 0; - } - - &-description { - font-size: 1.75rem; - line-height: 1.4; - } - - &-model { - max-height: 80%; - - &-icon { - position: absolute; - font-size: 4rem; - right: 0; - top: 0; - color: $accentColor; - z-index: 2; - } - } - -} - -.logo { - &-header { - font-family: 'logo'; - font-size: 4rem; - padding: 1rem; - - background: linear-gradient(45deg, $redColor, $accentColor); - background-clip: text; - -webkit-text-fill-color: transparent; - } - - &-img { - width: 54%; - display: block; - margin: auto; - } -} - -img { - max-width: 100%; -} \ No newline at end of file diff --git a/front/src/assets/sidebar.scss b/front/src/assets/sidebar.scss new file mode 100644 index 0000000..2dacb3e --- /dev/null +++ b/front/src/assets/sidebar.scss @@ -0,0 +1,115 @@ +$bg: #2D3031; +$textColor: #fff; +$textColor2: #9A9697; +$primary: #E75B12; + +.homelink { + position: absolute; + right: 2rem; + top: 4rem; + + transition: right 300ms linear; + + a { + background-color: $bg; + color: $textColor; + line-height: 1; + font-size: 3rem; + height: 7rem; + display: flex; + align-items: center; + border-radius: 1rem; + opacity: 0.97; + + svg { + transition: all 400ms linear; + } + } + + &.open { + right: 20vw; + + svg { + transform: scale(-1, 1); + } + } +} + +.sidebar { + position: fixed; + width: 19vw; + top: 4rem; + right: -50%; + bottom: 0; + transition: all 300ms linear; + line-height: 1.25; + display: flex; + flex-direction: column; + gap: 1.5rem; + + &.open { + right: 0; + } + + &-content { + max-height: 100%; + overflow: auto; + + background-color: $bg; + border-top-left-radius: 2rem; + border-bottom-left-radius: 2rem; + + padding: 1.5rem; + + color: $textColor; + font-family: 'main'; + } + + &-list { + + } + + &-list-item { + font-size: 1.875rem; + color: $textColor2; + + display: flex; + + input { + margin-right: 2rem; + + &.checked + label { + color: $primary; + } + } + } + + h2 { + font-family: 'logo'; + font-size: 1.875rem; + text-align: center; + margin-bottom: 1rem; + } + + p { + font-size: 1rem; + + &:not(:last-child) { + margin-bottom: 1rem; + } + } + + a { + background-color: darken($textColor2, 30%); + opacity: 0.97; + border-radius: 1rem; + height: 3.75rem; + color: $primary; + + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + font-size: 2rem; + } +} \ No newline at end of file diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue deleted file mode 100644 index 90c5071..0000000 --- a/front/src/components/Home.vue +++ /dev/null @@ -1,18 +0,0 @@ - - \ No newline at end of file diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 713a7e2..8a55fd1 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -4,30 +4,30 @@ import { Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry, MeshStandardMaterial, MeshStandardMaterialParameters, Vector2, Vector3, - Object3D } from 'three'; import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core'; import { useGLTF } from '@tresjs/cientos' import Env from './env.vue' -import PostProcessing from './post_processing.vue' import { IMAGE_URL, PROMOBG, SERVER_URL, } from '../../constants' import { usePromoSidebar } from '../../stores/promo_sidebar'; import { usePromoScene } from '../../stores/promo_scene'; +import { useClickable } from '../../stores/clickable'; import { mobileAndTabletCheck } from '../../helpers'; const props = defineProps(['source', 'loaded', 'loaded_pan']) const models = ref([]) -const clickable = ref([]) const clickable_items = ref([]) const clickable_refs = ref([]) const envVars = reactive({}) as EnvVars const sidebar = usePromoSidebar(); -const sidebar_scene = usePromoScene() +const sidebar_scene = usePromoScene(); +const clickable = useClickable() + const { controls, camera, scene, raycaster, renderer } = useTresContext() const { pause, resume } = useLoop() const { seekByName, seekAllByName, seek } = useSeek() @@ -40,7 +40,6 @@ const { scene: pointer_pin } = await useGLTF('/pointer.glb') const timer = ref(10) setInterval(() => { - // console.log({ timer: timer.value }) if (timer.value > 0) { timer.value -= 1 } else if (timer.value == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) { @@ -87,11 +86,11 @@ const loadModels = async () => { (controls.value as any).reset() - const sidebar_items = [] + const sidebar_items = [] as PromoScene[] clickable_items.value = [] + for (let index = 0; index < data.length; index++) { const element = data[index]; - sidebar_items.push({ ...element }) const item = {} as model3DType item.modelUrl = `${IMAGE_URL}/${element.model_file}` @@ -115,7 +114,7 @@ const loadModels = async () => { const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`) const clickable_areas = await res.json() - clickable.value.push(...clickable_areas) + clickable.list.push(...clickable_areas) } let c = new Color() @@ -155,10 +154,8 @@ const loadModels = async () => { ground.name = "ground" models.value.push({ name: 'ground', modelFile: ground }) - sidebar_scene.setData(sidebar_items) - - for (let index = 0; index < clickable.value.length; index++) { - const element = clickable.value[index]; + for (let index = 0; index < clickable.list.length; index++) { + const element = clickable.list[index]; const find_element = seekByName(scene.value, element.object_name) if (!find_element) continue if (find_element && !(find_element as Group).isGroup) { @@ -167,14 +164,6 @@ const loadModels = async () => { (find_element as Mesh).localToWorld(world_position); const p = raw_data.min_distance * 0.05 - // const plane = new PlaneGeometry(p, p, 32) - - // const mesh_material = new MeshBasicMaterial({ side: DoubleSide }) - // mesh_material.color = new Color('red') - // if (element.image) { - // const map = new TextureLoader().load(`${IMAGE_URL}/${element.image}`); - // mesh_material.map = map - // } const point = pointer_pin.clone() point.position.set(world_position.x, p * 3, world_position.z) @@ -185,9 +174,17 @@ const loadModels = async () => { if (clickable_items.value.find(el => el.name == point.name)) continue clickable_items.value.push(point) clickable_refs.value.push(ref(`${element.id}_clickable`)) + + sidebar_items.push({ + id: element.id, + name: element.name + }) } } + sidebar_scene.name = raw_data.name; + sidebar_scene.setData(sidebar_items) + const loaded = seekByName(scene.value, 'loaded') if (loaded) { const box = new Box3(); @@ -227,8 +224,8 @@ onAfterRender(() => { let oldObj = [] as { uuid: string, color: Color }[] const passShader = (obj: Mesh | Group) => { if (obj instanceof Mesh) { - oldObj.push({ uuid: obj.uuid, color: obj.material.color }) - obj.material.color = new Color(1, 0, 0) + oldObj.push({ uuid: obj.uuid, color: (obj.material as MeshStandardMaterial).color }); + (obj.material as MeshStandardMaterial).color = new Color(1, 0, 0) } else if (obj instanceof Group) { for (let c in obj.children) { passShader(obj.children[c]) @@ -236,27 +233,7 @@ const passShader = (obj: Mesh | Group) => { } } const openSidebar = (id: number) => { - const target = clickable.value.find(el => el.id == id) - if (!target) return - const sidebar_data = { - title: target.name, - description: target.description - } as PromoSidebarData - if (target?.target) { - sidebar_data.target = target.target.toString() - sidebar_data.target_name = target.target_name - } - sidebar.setData(sidebar_data) - sidebar.open() - - const elements = [ - seekByName(scene.value, target.name), - seekByName(scene.value, target.object_name), - ].filter(Boolean) - - elements.forEach((element) => { - passShader(element) - }) + sidebar.open(id) } loadModels() @@ -316,24 +293,6 @@ const clickEvent = (event: MouseEvent) => { openSidebar(parseInt(names[0].replace('_clickable', ''))) } } - -watch(() => sidebar_scene.list, () => { - sidebar_scene.list.forEach(element => { - const el = seekByName(scene.value, element.name) - if (!el) return - if (el.visible !== element.is_enabled) { - el.visible = element.is_enabled - } - }); -}, { deep: true }) -watch(() => sidebar.is_open, () => { - if (sidebar.is_open == false) { - oldObj.forEach(el => { - const obj = seek(scene.value, 'uuid', el.uuid) as Mesh - obj.material.color = el.color - }) - } -})