distance to camera

components/calcModels.vue

@@ -5,10 +5,13 @@ import { OrbitControls, Environment, useGLTF } from '@tresjs/cientos'
 
 const section_count = useState<number>('section_count')
 const fence_section = useState<number>('fence_section')
+const extra_section = useState<number>('extra_section')
 
 const controlsState = reactive({
-    minDistance: section_count.value * 5,
+    distance: section_count.value,
-    maxDistance: 12,
+    minDistance: 7,
+    maxDistance: 20,
+    position: { x: 0, y: 0, z: 0 },
     enablePan: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
@@ -22,7 +25,7 @@ const pointLight = ref()
 
 const groundMaterial = ref({
     color: "#555",
-    roughness: 0.25,
+    roughness: 0.2,
     metalness: 0,
     side: FrontSide
 })
@@ -60,17 +63,24 @@ const loadAll = async () => {
         normalMap: pbrTexture.normalMap,
     })
 }
+const camera = ref("camera")
 onMounted(() => {
     cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
     loadAll()
 })
+watch(section_count, () => {
+    let v = (section_count.value + ~~(!!extra_section.value))*1.5
+    if (v < controlsState.minDistance) v = controlsState.minDistance
+    if (v > controlsState.maxDistance) v = controlsState.maxDistance
+    camera.value.position.normalize().multiplyScalar(v)
+})
 </script>
 <template>
     <div class="container min-w-full relative h-[50vh]">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <Loader />
             <TresCanvas shadows>
-                <TresPerspectiveCamera v-bind="cameraStat" />
+                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <Suspense v-if="false">
                     <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />