test btn

assets/main.scss

@@ -206,3 +206,13 @@ button {
 .fallback {
     @apply absolute bg-neutral-600 top-0 left-0 w-full h-full z-20 flex justify-center items-center text-black font-mono
 }
+
+.canvas-icons {
+    @apply absolute text-3xl top-0 left-0 flex flex-col;
+    a {
+        @apply cursor-pointer;
+        &.disabled {
+            @apply cursor-not-allowed opacity-50 pointer-events-none;
+        }
+    }
+}

components/expDiagram.vue

@@ -2,8 +2,9 @@
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, Environment, Html } from '@tresjs/cientos'
 
+const camera = ref()
 const controlsState = reactive({
-    minDistance: 1,
+    minDistance: 2,
     maxDistance: 10,
     enablePan: false,
     // enableZoom: false,
@@ -40,6 +41,13 @@ const loadAll = async () => {
     secondary_light.value.shadow.bias = -0.01
     // secondary_light.value.intensity = 50
 }
+
+const changeDistance = (v = 1) => {
+    if(camera.value) {
+        console.log(camera.value.position.normalize())
+        camera.value.position.z += v
+    }
+}
 onMounted(() => {
     loadAll()
 })
@@ -53,7 +61,7 @@ onMounted(() => {
                 </div>
             </template>
             <TresCanvas height="600">
-                <TresPerspectiveCamera :position="[-7, 2, 4]" />
+                <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <Suspense>
                     <ModelDiagram />
@@ -65,13 +73,21 @@ onMounted(() => {
                     :position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
                 <TresPointLight v-bind="secondary_light" v-if="secondary_light"
                     :position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
-                <TresAmbientLight :intensity="2"/>
+                <TresAmbientLight :intensity="2" />
             </TresCanvas>
         </ClientOnly>
-        <span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
+        <div class="canvas-icons">
+            <a @click="toggleExpState">
                 <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
                 <Icon name="mdi:square-outline" v-else />
-        </span>
+            </a>
+            <a @click="changeDistance(0.5)" :class="[{ 'disabled': camera ? camera.position.z >= 9.5 : null }]">
+                <Icon name="mdi:plus-circle-outline" />
+            </a>
+            <a @click="changeDistance(-0.5)" :class="[{ 'disabled': camera ? camera.position.z <= -9.5 : null }]">
+                <Icon name="mdi:minus-circle-outline" />
+            </a>
+        </div>
     </div>
 </template>