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 />

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>

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), {

components/model/smoothCamera.vue

@@ -52,5 +52,6 @@ onBeforeLoop(() => {
         }
     }
 })
+
 </script>
 <template></template>