+ - btns

components/expDiagram.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Environment, Html } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
+import { Vector3 } from 'three';
 
 const camera = ref()
+const controls = ref()
 const controlsState = reactive({
     minDistance: 2,
     maxDistance: 10,
@@ -43,9 +45,10 @@ const loadAll = async () => {
 }
 
 const changeDistance = (v = 1) => {
-    if(camera.value) {
-        console.log(camera.value.position.normalize())
-        camera.value.position.z += v
+    if (camera.value && controls.value) {
+        const distance = camera.value.position.distanceTo(new Vector3(0, 0, 0));
+        const r = distance + v
+        camera.value.position.normalize().multiplyScalar(r)
     }
 }
 onMounted(() => {
@@ -62,7 +65,7 @@ onMounted(() => {
             </template>
             <TresCanvas height="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
-                <OrbitControls v-bind="controlsState" make-default />
+                <OrbitControls v-bind="controlsState" ref="controls" make-default />
                 <Suspense>
                     <ModelDiagram />
                 </Suspense>
@@ -81,10 +84,12 @@ onMounted(() => {
                 <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
                 <Icon name="mdi:square-outline" v-else />
             </a>
-            <a @click="changeDistance(0.5)" :class="[{ 'disabled': camera ? camera.position.z >= 9.5 : null }]">
+            <a @click="changeDistance(-0.5)"
+                :class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) <= controlsState.minDistance) : null }]">
                 <Icon name="mdi:plus-circle-outline" />
             </a>
-            <a @click="changeDistance(-0.5)" :class="[{ 'disabled': camera ? camera.position.z <= -9.5 : null }]">
+            <a @click="changeDistance(0.5)"
+                :class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) >= (controlsState.maxDistance)) : null }]">
                 <Icon name="mdi:minus-circle-outline" />
             </a>
         </div>