diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index f4c395b..9ab16da 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -7,11 +7,7 @@ import { useGLTF } from '@tresjs/cientos'
 import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 
-const props = defineProps(['source', 'loaded'])
-
-const max_size = reactive({
-    x: 0, y: 0, z: 0
-})
+const props = defineProps(['source', 'loaded', 'loaded_pan'])
 
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
@@ -29,21 +25,18 @@ const { controls, raycaster, camera, scene } = useTresContext()
 const { seekByName } = useSeek()
 
 const loadModels = async () => {
-    // pause()
-
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
     const data = raw_data.elements
     if (!controls.value) return;
 
-    // controls.value._camera.position.set(0, 0, 250)
     controls.value.enabled = false;
     (controls.value as any).minDistance = raw_data.min_distance;
     (controls.value as any).maxDistance = raw_data.max_distance;
     (controls.value as any)._needsUpdate = true;
     (controls.value as any).update(1)
-    camera.value?.position.set(1,1,1);
-    camera.value?.lookAt(new Vector3(1,1,1));
+    camera.value?.position.set(1, 1, 1);
+    camera.value?.lookAt(new Vector3(1, 1, 1));
 
     for (let index = 0; index < data.length; index++) {
         const element = data[index];
@@ -58,18 +51,11 @@ const loadModels = async () => {
 
         models.value.push(item)
 
-        // const box = new Box3();
-        // box.expandByObject(loaded_scene.children[0]);
-        // const box_size = new Vector3();
-        // box.getSize(box_size)
-        // if (max_size.x > box_size.x) max_size.x = box_size.x
-        // if (max_size.y > box_size.y) max_size.y = box_size.y
-        // if (max_size.z > box_size.z) max_size.z = box_size.z
-
         const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
         const clickable_areas = await res.json()
         clickable.value.push(...clickable_areas)
     }
+
     for (let index = 0; index < clickable.value.length; index++) {
         const element = clickable.value[index];
         const find_element = seekByName(scene.value, element.object_name)
@@ -86,7 +72,19 @@ const loadModels = async () => {
         }
     }
 
-    // resume()
+    const loaded = seekByName(scene.value, 'loaded')
+    if (loaded) {
+        const box = new Box3();
+        box.expandByObject(loaded);
+        const box_size = new Vector3();
+        box.getSize(box_size)
+        props.loaded_pan(
+            new Vector3(box_size.x * 0.5, box_size.y * 0.5, box_size.z * 0.5),
+            new Vector3(box_size.x * -0.5, box_size.y * -0.5, box_size.z * -0.5),
+        )
+        console.log(box_size)
+    }
+
     controls.value.enabled = true;
     props.loaded()
 }
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 53a1852..c45b5ad 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -12,26 +12,32 @@ import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 
+const minPan = ref(new Vector3(-2, -2, -2))
+const maxPan = ref(new Vector3(2, 2, 2))
 const _v = new Vector3();
 const onChange = (e: any) => {
-    _v.copy(e._target);
-    // e._target.clamp(minPan, maxPan);
-    _v.sub(e._target);
-    e._camera.position.sub(_v);
-    // console.log(e._camera.position.normalize())
+    if (e.target) {
+        _v.copy(e.target);
+        e.target.clamp(minPan.value, maxPan.value);
+        _v.sub(e.target);
+        camera.value.position.sub(_v);
+    }
+}
+const loadedPan = (max: any, min: any) => {
+    maxPan.value = max
+    minPan.value = min
 }
-
 const sidebar = usePromoSidebar()
 
 const camera = ref()
 const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
 
 const controlsState = reactive({
-    // maxPolarAngle: (Math.PI / 2) - 0.02,
-    // enableZoom: false,
+    maxPolarAngle: (Math.PI / 2) - 0.02,
+    minAzimuthAngle: (Math.PI / 2) - 0.02,
 })
 const models_loading = ref(false)
-const set_model_load_status = () =>{
+const set_model_load_status = () => {
     models_loading.value = !models_loading.value
 }
 
@@ -43,7 +49,6 @@ point_light.shadow.bias = -0.01
 point_light.shadow.mapSize.width = 512 * 10
 point_light.shadow.mapSize.height = 512 * 10
 
-
 const route = useRoute()
 const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
 watch(() => route.params.target, () => {
@@ -64,12 +69,12 @@ watch(() => route.params.target, () => {
                     <StatsGl />
                 </Suspense>
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
-                <OrbitControls v-bind="controlsState" make-default />
+                <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
                     <Env />
                 </Suspense>
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
                 </Suspense>
                 <TresMesh cast-shadow>
                     <TresBoxGeometry :args="[1, 1, 1]" />
@@ -96,6 +101,7 @@ watch(() => route.params.target, () => {
     top: 0;
     bottom: 0;
 }
+
 .loading {
     filter: blur(10px);
     transition: all 300ms linear;