From 1461e178ca1769d0b53bdbd969f3bf8d25ad3a68 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Mon, 23 Sep 2024 09:30:45 +0300 Subject: [PATCH] absolute --- assets/main.scss | 17 +++-- components/calcModels.vue | 26 +++---- components/calcValues.vue | 119 +++++++++++++++----------------- components/model/fence.vue | 1 - components/model/line.vue | 8 +-- components/model/parametric.vue | 8 --- 6 files changed, 86 insertions(+), 93 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index 8bf6159..4a0a29c 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -178,10 +178,17 @@ a[href^="#"] { } &_calc { - @apply py-0; + @apply py-0 relative; + + > .container:first-child { + @apply relative h-[50vh] min-h-[600px] justify-between; + > * { + @apply z-10 + } + } &-canvas { - @apply relative h-[50vh] min-h-[600px]; + @apply absolute top-0 bottom-0; } } @@ -301,10 +308,10 @@ button { } &-item { - @apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap; + @apply flex flex-row items-center justify-start flex-wrap; label { - @apply w-full xl:w-auto; + @apply w-full; } .icon { @@ -316,7 +323,7 @@ button { } &_checkbox { - @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap + @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-4 } input[type=range] { diff --git a/components/calcModels.vue b/components/calcModels.vue index 76ab119..5fcd686 100644 --- a/components/calcModels.vue +++ b/components/calcModels.vue @@ -2,10 +2,9 @@ import { TresCanvas } from '@tresjs/core' import { OrbitControls } from '@tresjs/cientos' //@ts-ignore -import { useGLTF } from '@tresjs/cientos' -import { degToRad, radToDeg } from 'three/src/math/MathUtils.js'; +import { useGLTF, Stats } from '@tresjs/cientos' +import { degToRad } from 'three/src/math/MathUtils.js'; -const fence_section = use_fence_section() const section_count = use_section_count() const extra_section = use_extra_section() const max_size = use_max_size() @@ -13,14 +12,15 @@ const max_size = use_max_size() const controlsState = reactive({ distance: section_count.value, minDistance: 10, - maxDistance: 20, + maxDistance: 10, position: { x: 0, y: 0, z: 0 }, - // enablePan: false, - minPolarAngle: degToRad(30), - maxPolarAngle: degToRad(80), + enablePan: false, + enableZoom: false, + minPolarAngle: degToRad(45), + maxPolarAngle: degToRad(45), }) const cameraStat = reactive({ - position: [-4, 2, 8], + position: [-5, 7, 5], aspect: 1920 / 600, // fov: 40, }) @@ -50,10 +50,11 @@ onMounted(() => { loadAll() }) watch([section_count, extra_section], () => { - let v = (section_count.value + ~~(!!extra_section.value)) * 2 - if (v < controlsState.minDistance) v = controlsState.minDistance; - if (v > controlsState.maxDistance) v = controlsState.maxDistance; - // (camera.value as any).position.normalize().multiplyScalar(v) + let v = (section_count.value + ~~(!!extra_section.value)); + if (v <= 10) v = 10 + controlsState.minDistance = v; + controlsState.maxDistance = v; + (camera.value as any).position.normalize().multiplyScalar(v) }) + diff --git a/components/calcValues.vue b/components/calcValues.vue index 65c4c5b..f5cf095 100644 --- a/components/calcValues.vue +++ b/components/calcValues.vue @@ -151,69 +151,62 @@ const goal = (target: string, params: object) => { \ No newline at end of file diff --git a/components/model/fence.vue b/components/model/fence.vue index 1a8a206..af92bd8 100644 --- a/components/model/fence.vue +++ b/components/model/fence.vue @@ -9,7 +9,6 @@ const fence_section = use_fence_section() const section_count = use_section_count() const extra_section = use_extra_section() const remove_pillar = use_remove_pillar() -const max_size = use_max_size() const lSize = lamelle_height.value const bSize = 0.0235 diff --git a/components/model/line.vue b/components/model/line.vue index c6b54b3..9acfbe5 100644 --- a/components/model/line.vue +++ b/components/model/line.vue @@ -20,6 +20,8 @@ const { scene } = useTresContext() const section_count = use_section_count() const extra_section = use_extra_section() +const fence_section = use_fence_section() +const max_size = use_max_size() const total = ref((section_count.value + ~~(!!extra_section.value))) const position = ref(new Vector3()) @@ -29,12 +31,11 @@ const count_pos = () => { const line = seekByName(scene.value, `line_${props.number}`) const line_size = new Vector3() const line_pos = new Vector3() - const line_lpos = new Vector3() + if (line && line.children.length) { line.updateMatrixWorld() new Box3().expandByObject(line).getSize(line_size) line.getWorldPosition(line_pos) - console.log(`line_${props.number}`, line, line_size, line_pos) } const line1 = seekByName(scene.value, `line_1`); const line1_size = new Vector3() @@ -42,7 +43,6 @@ const count_pos = () => { if (line1) { new Box3().expandByObject(line1).getSize(line1_size) line1.getWorldPosition(line1_pos) - console.log('first', line1, line1_size, line1_pos) } const k = ((line1_size.x / props.count) - line1_size.z) * 0.5 switch (props.number) { @@ -64,7 +64,7 @@ const count_pos = () => { onMounted(() => { count_pos() }) -watch(() => [props.count, section_count.value, extra_section.value], count_pos) +watch(() => [props.count, fence_section.value, section_count.value, extra_section.value], count_pos)