explosion button

assets/main.scss

@@ -31,7 +31,7 @@ body {
 }
 
 .logo {
-    @apply text-ioprim font-bold w-20 text-xl leading-4 py-4 col-span-4 xl:col-span-2;
+    @apply text-ioprim font-bold w-20 text-2xl leading-4 py-4 col-span-4 xl:col-span-2;
 }
 
 .menu {

components/expDiagram.vue

@@ -9,25 +9,19 @@ const controlsState = reactive({
     // enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
-const targetExplosion = useState('targetExplosion', () => {
+
-    const k = 1.5
+const explosion_state = useState<boolean>('explosion_state', () => false)
-    return {
+const toggleExpState = () => {
-        kosynka: [0 * k, 0 * k, 0.75 * k],
+    explosion_state.value = !explosion_state.value
-        krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
+}
-        osnova_stolba: [0 * k, 0 * k, 0 * k],
-        planki: [0 * k, 0 * k, -0.5 * k],
-        stolb: [0 * k, 0 * k, 1 * k],
-        verh: [0 * k, 0.25 * k, 0 * k],
-    }
-})
 </script>
 <template>
-    <div class="h-96">
+    <div class="h-96 relative">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <TresCanvas preset="realistic" heoght="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <Suspense>
+                <Suspense v-if=false>
                     <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
                 </Suspense>
                 <ModelDiagram />
@@ -37,6 +31,10 @@ const targetExplosion = useState('targetExplosion', () => {
                 <TresAmbientLight />
             </TresCanvas>
         </ClientOnly>
+        <span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
+            <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
+            <Icon name="mdi:square-outline" v-else />
+        </span>
     </div>
 </template>
 

components/model/diagram.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 const props = defineProps(['koef'])
 import Item from './item.vue';
-const k = ref(props.koef || 1)
+
-watch(props, () => {
+const explosion_state = useState<boolean>('explosion_state')
-    if (k.value !== props.koef) {
+
-        k.value = props.koef || 1
+const k = 1.5
-    }
+const targetExplosion = {
-}, { deep: true })
+    kosynka: [0 * k, 0 * k, 0.75 * k],
+    krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
+    osnova_stolba: [0 * k, 0 * k, 0 * k],
+    planki: [0 * k, 0 * k, -0.5 * k],
+    stolb: [0 * k, 0 * k, 1 * k],
+    verh: [0 * k, 0.25 * k, 0 * k],
+}
 </script>
 <template>
     <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
@@ -15,12 +21,13 @@ watch(props, () => {
     </TresMesh>
     <Suspense>
         <TresGroup :translate-y="-2" :scale="1.25">
-            <Item model-url="/models/kosynka.glb" ref-position="kosynka" />
+            <Item model-url="/models/kosynka.glb" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
-            <Item model-url="/models/krepleniye_planok.glb" ref-position="krepleniye_planok" />
+            <Item model-url="/models/krepleniye_planok.glb"
+                :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
             <Item model-url="/models/osnova_stolba.glb" />
-            <Item model-url="/models/planki.glb" ref-position="planki" />
+            <Item model-url="/models/planki.glb" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
-            <Item model-url="/models/stolb.glb" ref-position="stolb" />
+            <Item model-url="/models/stolb.glb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
-            <Item model-url="/models/verh.glb" ref-position="verh" />
+            <Item model-url="/models/verh.glb" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
         </TresGroup>
     </Suspense>
 </template>

components/model/item.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Color, DoubleSide, MeshStandardMaterial, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color', 'map'])
+const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map'])
 
 let scene
 if (props.modelUrl) {
@@ -13,7 +13,7 @@ if (props.modelUrl) {
 scene.receiveShadow = true
 scene.castShadow = true
 
-const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
+const target = ref(props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0))
 const box = new Box3();
 box.expandByObject(scene.children[0]);
 let size = new Vector3();
@@ -56,12 +56,12 @@ const axis = [
 type vectorType = 'x' | 'y' | 'z';
 
 onLoop(() => {
-    if (model.value && props.target) {
+    if (model.value && target.value) {
         axis.forEach(element => {
             const point = model.value.position[element.axis]
-            let step = stepbase * target[element.axis as vectorType]
+            let step = stepbase * target.value[element.axis as vectorType]
             if (step !== 0) {
-                if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
+                if (Math.abs(point) >= Math.abs(target.value[element.axis as vectorType])) {
                     step = 0
                 }
                 model.value[element.func](step)
@@ -80,27 +80,15 @@ watch(props, () => {
         }
         set_material(model.value)
     }
-}, { deep: true })
+    if (props.target) {
-
+        target.value = new Vector3(...props.target) 
-const targetExplosion = useState('targetExplosion')
-watch(targetExplosion, () => {
-    if (props.refPosition) {
-        if (model.value.position.x !== targetExplosion.value[props.refPosition][0]) {
-            model.value.position.x = targetExplosion.value[props.refPosition][0]
-        }
-        if (model.value.position.y !== targetExplosion.value[props.refPosition][1]) {
-            model.value.position.y = targetExplosion.value[props.refPosition][1]
-        }
-        if (model.value.position.z !== targetExplosion.value[props.refPosition][2]) {
-            model.value.position.z = targetExplosion.value[props.refPosition][2]
-        }
     }
 }, { deep: true })
+
 </script>
 <template>
     <Suspense>
-        <TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
+        <TresGroup :position="(props.position || [0, 0, 0])" ref="model">
-            ref="model">
             <primitive :object="scene.children[0]" />
             <TresMesh v-if="props.map" :cast-shadow="false" :receive-shadow="false">
                 <TresPlaneGeometry :args="[size.x, size.y]" />