From fea664c2090053d8243e27c5b1760ee196589c45 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Thu, 20 Mar 2025 10:56:03 +0300 Subject: [PATCH] scene observer --- components/calc/models.vue | 7 +- components/expDiagram.vue | 28 +--- components/model/parametric.vue | 250 +++++++++++++++++--------------- components/scene.vue | 55 +++++++ nuxt.config.ts | 2 +- 5 files changed, 195 insertions(+), 147 deletions(-) create mode 100644 components/scene.vue diff --git a/components/calc/models.vue b/components/calc/models.vue index 1e62429..6d34d93 100644 --- a/components/calc/models.vue +++ b/components/calc/models.vue @@ -27,21 +27,18 @@ const cameraStat = reactive({ - + - - - - + \ No newline at end of file diff --git a/components/expDiagram.vue b/components/expDiagram.vue index 358cf2a..e303764 100644 --- a/components/expDiagram.vue +++ b/components/expDiagram.vue @@ -17,22 +17,6 @@ const explosion_state = use_explosion_state() const toggleExpState = () => { explosion_state.value = !explosion_state.value } -const back_light = ref() -const secondary_light = ref() -const loadAll = async () => { - const { scene: back } = await useGLTF('/models_light/back_exp.glb') - const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb') - - const k = 0.03 - - back_light.value = back.children[0] - back_light.value.intensity = back_light.value.intensity * k - back_light.value.shadow.bias = -0.02 - - secondary_light.value = secondary.children[0] - secondary_light.value.intensity = secondary_light.value.intensity * k - secondary_light.value.shadow.bias = -0.01 -} const changeDistance = (v = 1) => { if (camera.value && controls.value) { @@ -41,9 +25,6 @@ const changeDistance = (v = 1) => { camera.value.position.normalize().multiplyScalar(r) } } -onMounted(() => { - loadAll() -}) - + - - - - - + +
diff --git a/components/model/parametric.vue b/components/model/parametric.vue index ce23ab6..2a0256a 100644 --- a/components/model/parametric.vue +++ b/components/model/parametric.vue @@ -22,131 +22,149 @@ const { seek, seekAll } = useSeek() const globalFenceType = useGlobalFenceType() -const topper_models = { - baseToppers: {} as { [key: toppersIds]: Object3D }, - aristoToppers: {} as { [key: toppersIds]: Object3D }, -} -for (const key of Object.keys(allToppers)) { - let toppers = allToppers[key] - for await (const element of toppers) { - const { scene } = await useGLTF(getModel(element.id, key)) - topper_models[key][element.id] = scene - } -} - -const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb') -const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb') -const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb') -const { scene: model_pillar_brace } = await useGLTF('/models_one/pillar/brace.glb') - -const { scene: model_fastening_top } = await useGLTF('/models_one/fastening/top.glb'); -const { scene: model_fastening_side } = await useGLTF('/models_one/fastening/side.glb'); -const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb'); - -const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true }) -// const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true }); - -const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true }); -const { scene: lamelle_model_aristo } = await useGLTF('/models_one/lamel_100_aristo.glb', { draco: true }); - -const top = ref(top_model) +const top = ref(null) const pillar_top = ref() -const pillar_center = ref(model_pillar_center) -const pillar_bottom = ref(model_pillar_bottom) -const pillar_inner = ref(model_pillar_inner) -const pillar_brace = ref(model_pillar_brace) -const fastening_top = ref(model_fastening_top) -const fastening_side = ref(model_fastening_side) -const fixing = ref(model_fixing) -const lamelle = ref(lamelle_model_standart) +const pillar_center = ref(null) +const pillar_bottom = ref(null) +const pillar_inner = ref(null) +const pillar_brace = ref(null) +const fastening_top = ref(null) +const fastening_side = ref(null) +const fixing = ref(null) +const lamelle = ref(null) -const setPillarTopper = () => { - let key = 'baseToppers' - if (globalFenceType.value?.type == 'aristo') { - key = 'aristoToppers' - } - pillar_top.value = topper_models[key][pillar_topper.value] -} -setPillarTopper() -watch(pillar_topper, setPillarTopper) +const total = ref(0) +const size = ref(0) +const count = ref(0) -const total = ref((section_count.value + ~~(!!extra_section.value))) -const size = ref(Math.ceil(total.value / 4)) -const count = ref((total.value >= 4) ? size.value : total.value) - -watch(() => [section_count.value, extra_section.value], () => { - total.value = (section_count.value + ~~(!!extra_section.value)) - size.value = Math.ceil(total.value / 4); - count.value = (total.value >= 4) ? size.value : total.value; - - const lines_count = (total.value >= 4) ? 4 : 1 - const base = seek(scene.value, 'name', 'base') - if (base?.children && base.children.length !== lines_count) { - base.children = [...base?.children.slice(0, lines_count)] - } - - const lines = seekAll(scene.value, 'name', 'line') - lines.forEach(line => { - let n = size.value - if (lines_count == 1) { - n = total.value - } - if (line.name.endsWith('_4')) { - n = total.value - size.value * 3 - if (n < 0) { - n = 0 - } - } - const inner = seek(line, 'name', line.name + '_inner'); - if (inner?.children && n < inner?.children.length) { - inner.children = [...inner?.children.slice(0, n)] - } - }); -}) -const setTarget = (smooth = false) => { - let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75; - const max = 2.25 - if (f < max) f = max - const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0); - if (smooth) { - goto_target.value = target - goto_cam.value = new Vector3(f, f, f) - } else { - (controls.value as OrbitControlsProps).target = target; - (controls.value as any).update() - goto_cam.value = new Vector3(f, f, f) - } -} -watch([lamelles_count, fence_section, lamelle_height], () => { - setTarget() - open_calc.value = [] -}) - -watch(open_calc, () => { - if (Object.keys(open_calc.value).length == 0) { - setTarget(true) - } -}) const min_for_square = 12; -setTarget() +const loadAll = async () => { + const topper_models = { + baseToppers: {} as { [key: toppersIds]: Object3D }, + aristoToppers: {} as { [key: toppersIds]: Object3D }, + } + for (const key of Object.keys(allToppers)) { + let toppers = allToppers[key] + for await (const element of toppers) { + const { scene } = await useGLTF(getModel(element.id, key)) + topper_models[key][element.id] = scene + } + } -const setLamelleType = () => { - if (globalFenceType.value?.type == 'standart') { - lamelle.value = lamelle_model_standart - lamelle_height.value = 0.115 - pillar_topper.value = 0 - setPillarTopper() + const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb') + const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb') + const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb') + const { scene: model_pillar_brace } = await useGLTF('/models_one/pillar/brace.glb') + + const { scene: model_fastening_top } = await useGLTF('/models_one/fastening/top.glb'); + const { scene: model_fastening_side } = await useGLTF('/models_one/fastening/side.glb'); + const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb'); + + const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true }) + // const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true }); + + const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true }); + const { scene: lamelle_model_aristo } = await useGLTF('/models_one/lamel_100_aristo.glb', { draco: true }); + + top.value = top_model + pillar_center.value = model_pillar_center + pillar_bottom.value = model_pillar_bottom + pillar_inner.value = model_pillar_inner + pillar_brace.value = model_pillar_brace + fastening_top.value = model_fastening_top + fastening_side.value = model_fastening_side + fixing.value = model_fixing + lamelle.value = lamelle_model_standart + + const setPillarTopper = () => { + let key = 'baseToppers' + if (globalFenceType.value?.type == 'aristo') { + key = 'aristoToppers' + } + pillar_top.value = topper_models[key][pillar_topper.value] } - if (globalFenceType.value?.type == 'aristo') { - lamelle.value = lamelle_model_aristo - lamelle_height.value = 0.196 - pillar_topper.value = 0 - setPillarTopper() + setPillarTopper() + watch(pillar_topper, setPillarTopper) + + total.value = (section_count.value + ~~(!!extra_section.value)) + size.value = Math.ceil(total.value / 4) + count.value = (total.value >= 4) ? size.value : total.value + + watch(() => [section_count.value, extra_section.value], () => { + total.value = (section_count.value + ~~(!!extra_section.value)) + size.value = Math.ceil(total.value / 4); + count.value = (total.value >= 4) ? size.value : total.value; + + const lines_count = (total.value >= 4) ? 4 : 1 + const base = seek(scene.value, 'name', 'base') + if (base?.children && base.children.length !== lines_count) { + base.children = [...base?.children.slice(0, lines_count)] + } + + const lines = seekAll(scene.value, 'name', 'line') + lines.forEach(line => { + let n = size.value + if (lines_count == 1) { + n = total.value + } + if (line.name.endsWith('_4')) { + n = total.value - size.value * 3 + if (n < 0) { + n = 0 + } + } + const inner = seek(line, 'name', line.name + '_inner'); + if (inner?.children && n < inner?.children.length) { + inner.children = [...inner?.children.slice(0, n)] + } + }); + }) + const setTarget = (smooth = false) => { + let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75; + const max = 2.25 + if (f < max) f = max + const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0); + if (smooth) { + goto_target.value = target + goto_cam.value = new Vector3(f, f, f) + } else { + (controls.value as OrbitControlsProps).target = target; + (controls.value as any).update() + goto_cam.value = new Vector3(f, f, f) + } } + watch([lamelles_count, fence_section, lamelle_height], () => { + setTarget() + open_calc.value = [] + }) + + watch(open_calc, () => { + if (Object.keys(open_calc.value).length == 0) { + setTarget(true) + } + }) + + setTarget() + + const setLamelleType = () => { + if (globalFenceType.value?.type == 'standart') { + lamelle.value = lamelle_model_standart + lamelle_height.value = 0.115 + pillar_topper.value = 0 + setPillarTopper() + } + if (globalFenceType.value?.type == 'aristo') { + lamelle.value = lamelle_model_aristo + lamelle_height.value = 0.196 + pillar_topper.value = 0 + setPillarTopper() + } + } + setLamelleType() + watch(() => globalFenceType.value?.id, setLamelleType) } -setLamelleType() -watch(() => globalFenceType.value?.id, setLamelleType) +onMounted(async () => { await loadAll() })