max pan distance

front/src/components/Promo/main.vue

@@ -1,26 +1,52 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { FBXModel, MapControls } from '@tresjs/cientos'
+import { CameraControls, FBXModel } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core';
+import { Vector3 } from 'three';
+import { reactive } from 'vue';
+
 import model from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
 
 const router = useRouter()
+
+const minPan = new Vector3(-210,0,-80);
+const maxPan = new Vector3(210,0,100);
+const _v = new Vector3(); 
+
+const onChange = (e) => {
+    _v.copy(e._target);
+    e._target.clamp(minPan,maxPan);
+    _v.sub(e._target);
+    e._camera.position.sub(_v);
+}
+
+const cameraPosition = new Vector3(200, 400, 800)
+const lightPosition = new Vector3(-4, 4, 4)
+
+const controlsState = reactive({
+    minDistance: 300,
+    maxDistance: 900,
+    maxPolarAngle: (Math.PI / 2) - 0.2,
+    maxZoom: 1,
+    minZoom: 0.2,
+})
 </script>
 <template>
     <TresCanvas window-size>
-        <TresPerspectiveCamera :position="[200, 400, 800]" />
-        <MapControls :max-distance="900" :min-distance="300" :max-polar-angle="(Math.PI / 2) - 0.2" />
+        <TresPerspectiveCamera :position="cameraPosition" />
+        <CameraControls v-bind="controlsState" @change="onChange" make-default />
         <Suspense>
             <FBXModel :path="model" />
             <template #fallback>
                 Идет загрузка модели
             </template>
         </Suspense>
-        <TresMesh ref="boxRef" :scale="1" :position-x="200" :position-y="200" @click="router.push('/promo/main/item/1')">
+        <TresMesh ref="boxRef" :scale="new Vector3(0.01, 0.5, 0.5)" :position-x="200" :position-y="200"
+            @click="router.push('/promo/main/item/1')">
             <TresBoxGeometry :args="[100, 100, 100]" />
             <TresMeshNormalMaterial />
         </TresMesh>
-        <TresDirectionalLight :position="[-4, 4, 4]" :intensity="10" cast-shadow />
+        <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
         <TresAmbientLight :intensity="5" />
     </TresCanvas>
 </template>