From d21b5f90428baa041b7be6be907ef691e85de1b2 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 25 Sep 2024 14:15:41 +0300
Subject: [PATCH] camera pos on lame

---
 components/calc/models.vue                    |  2 +-
 components/model/parametric.vue               | 26 +++++++++++--------
 components/model/recolor.vue                  |  7 ++---
 .../model/{camera.vue => smoothCamera.vue}    |  1 +
 4 files changed, 19 insertions(+), 17 deletions(-)
 rename components/model/{camera.vue => smoothCamera.vue} (99%)

diff --git a/components/calc/models.vue b/components/calc/models.vue
index 50d14d0..d13d2d7 100644
--- a/components/calc/models.vue
+++ b/components/calc/models.vue
@@ -46,7 +46,7 @@ watch(fence_section, () => {
             <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
             <OrbitControls v-bind="controlsState" make-default />
             <Suspense>
-                <ModelCamera />
+                <ModelSmoothCamera />
             </Suspense>
             <Suspense>
                 <ModelEnv />
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index a6ac167..17a7da9 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { Mesh, Object3D } from 'three';
+import { Mesh, Object3D, Vector3 } from 'three';
 //@ts-ignore
-import { useGLTF, } from '@tresjs/cientos'
+import { OrbitControls, useGLTF, } from '@tresjs/cientos'
+import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
 
 const section_count = use_section_count()
 const extra_section = use_extra_section()
+const lamelles_count = use_lamelles_count()
+const lamelle_height = use_lamelle_height()
+const fence_section = use_fence_section()
 
-const { scene } = useTresContext()
+const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
 
 const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
@@ -17,14 +21,6 @@ const { scene: model_fence_inner } = await useGLTF('/fence_one/inner.glb')
 const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok.glb', { draco: true });
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
-[model_fence_top, model_fence_bottom].map((sc: Object3D) =>
-    sc.traverse((child: Object3D) => {
-        if (child instanceof Mesh) {
-            child.position.z = 0
-        }
-    })
-)
-
 const top = ref(top_model)
 const fence = ref(model_fence_center)
 const fence_top = ref(model_fence_top)
@@ -66,6 +62,14 @@ watch(() => [section_count.value, extra_section.value], () => {
         }
     });
 })
+const setTarget = () => {
+    const f = fence_section.value * 0.5
+    const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
+    (controls.value as OrbitControlsProps).target = target
+    camera.value?.position.set(f, f, f)
+}
+setTarget()
+watch(lamelles_count, setTarget)
 
 </script>
 <template>
diff --git a/components/model/recolor.vue b/components/model/recolor.vue
index 8b99f7e..2f3549f 100644
--- a/components/model/recolor.vue
+++ b/components/model/recolor.vue
@@ -19,12 +19,9 @@ if (!pillar_color.value) {
     lamelle_color.value = predefLamelleColors[r] as ralTypes
 }
 
-set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
 [lamelle].map(
     (el: Object3D) => set_material(el, getColorHexFromRal(lamelle_color.value)));
-[top, fastening, fence, fence_bottom, fence_top].map(
-    (el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
-[fence_inner].map(
+[top, fastening, fence, fence_bottom, fence_top, fence_inner].map(
     (el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
 
 watch(lamelle_color, () => {
@@ -44,7 +41,7 @@ watch(pillar_color, () => {
     ].map((el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
 
 })
-watch([pillar_color, pillar_pattern, lamelle_count], () => {
+watch([pillar_pattern, lamelle_count], () => {
     [fence_inner].map(
         (el: Object3D) => {
             set_material(el, getColorHexFromRal(pillar_color.value), {
diff --git a/components/model/camera.vue b/components/model/smoothCamera.vue
similarity index 99%
rename from components/model/camera.vue
rename to components/model/smoothCamera.vue
index 66c97c5..067c581 100644
--- a/components/model/camera.vue
+++ b/components/model/smoothCamera.vue
@@ -52,5 +52,6 @@ onBeforeLoop(() => {
         }
     }
 })
+
 </script>
 <template></template>