explosion ui

components/calcModels.vue

@@ -34,7 +34,7 @@ const { hasFinishLoading, progress, items } = await useProgress()
             <Suspense>
                 <ModelParametric />
             </Suspense>
-            <TresDirectionalLight :position="[7, 6, 7]" :intensity="10" color="#fdf5ca" cast-shadow />
+            <TresDirectionalLight :position="[70, 60, 70]" :intensity="10" color="#fdf5ca" cast-shadow />
         </TresCanvas>
     </div>
 </template>

components/expDiagram.vue

@@ -22,14 +22,30 @@ const scrollBlock = (e: Event) => {
         koef.value = visibleHeight / h
     }
 }
+const targetExplosion = useState('targetExplosion', () => {
+    return {
+        kosynka: [1, 1, 1],
+        krepleniye_planok: [0, 0, 0],
+        osnova_stolba: [0, 0, 0],
+        planki: [0, 0, 0],
+        stolb: [0, 0, 0],
+        verh: [0, 0, 0],
+    }
+})
 </script>
 <template>
     <div class="container min-w-full" ref="container">
+        <template v-for="(value, key) in targetExplosion">
+            <div>
+                <label for="key">{{ key }}</label>
+                <input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25">
+            </div>
+        </template>
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[-7, 2, 4]" />
             <OrbitControls v-bind="controlsState" make-default />
             <Suspense>
-                <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" />
+                <!-- <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" /> -->
             </Suspense>
             <ModelDiagram />
 

components/model/diagram.vue

@@ -15,12 +15,12 @@ watch(props, () => {
     </TresMesh>
     <Suspense>
         <TresGroup :translate-y="-2" :scale="1.25">
-            <Item model-url="/models/kosynka.glb" :position="[0.5 * k, 0.25 * k, 0.5 * k]" />
+            <Item model-url="/models/kosynka.glb" ref-position="kosynka" />
-            <Item model-url="/models/kreplaniye_planok.glb" :position="[1 * k, 0.5 * k, 1 * k]" />
+            <Item model-url="/models/krepleniye_planok.glb" ref-position="krepleniye_planok" />
-            <Item model-url="/models/planki.glb" :position="[1.5 * k, 1 * k, 1.5 * k]" />
+            <Item model-url="/models/osnova_stolba.glb" />
-            <Item model-url="/models/stolb.glb" :position="[-0.5 * k, 0.25 * k, -0.5 * k]" />
+            <Item model-url="/models/planki.glb" ref-position="planki" />
-            <Item model-url="/models/verh.glb" :position="[-1 * k, 0.5 * k, -1 * k]" />
+            <Item model-url="/models/stolb.glb" ref-position="stolb" />
-            <Item model-url="/models/zakliopki.glb" :position="[-1.5 * k, 1 * k, -1.5 * k]" />
+            <Item model-url="/models/verh.glb" ref-position="verh" />
         </TresGroup>
     </Suspense>
 </template>

components/model/item.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color'])
+const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color'])
 
 let scene
 if (props.modelUrl) {
@@ -79,10 +79,26 @@ watch(props, () => {
         set_material(model.value)
     }
 }, { deep: true })
+
+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.position || [0, 0, 0]" ref="model">
+        <TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
+            ref="model">
             <primitive :object="scene.children[0]" cast-shadow receive-shadow />
         </TresGroup>
     </Suspense>

components/model/parametric.vue

@@ -17,13 +17,21 @@ renderer.value.toneMapping = ReinhardToneMapping
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFShadowMap
-
+// public/texture/Ground039_4K-JPG_AmbientOcclusion.jpg
+//  public/texture/Ground039_4K-JPG_Color.jpg 
+//  public/texture/Ground039_4K-JPG_Displacement.jpg 
+//  public/texture/Ground039_4K-JPG_NormalDX.jpg
+//   public/texture/Ground039_4K-JPG_NormalGL.jpg 
+//   public/texture/Ground039_4K-JPG_Roughness.jpg
 const pbrTexture = await useTexture({
-    map: '/texture/Rock035_2K_Displacement.jpg',
+    map: '/texture/Ground039_4K-JPG_Color.jpg',
-    displacementMap: '/texture/Rock035_2K_Displacement.jpg',
+    displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
-    roughnessMap: '/texture/Rock035_2K_Roughness.jpg',
+    roughnessMap: '/texture/Ground039_4K-JPG_Roughness.jpg',
-    normalMap: '/texture/Rock035_2K_NormalGL.jpg',
+    normalMap: '/texture/Ground039_4K-JPG_NormalDX.jpg',
-    ambientOcclusion: '/texture/Rock035_2K_AmbientOcclusion.jpg',
+    aoMap: '/texture/Ground039_4K-JPG_AmbientOcclusion.jpg',
+    // metalnessMap: '/textures/myMetalnessTexture.jpg',
+    // matcap: '/textures/myMatcapTexture.jpg',
+    // alphaMap: '/textures/myAlphaMapTexture.jpg'
 })
 const { scene: top } = await useGLTF('/models_one/verh_100.glb')
 const { scene: fence } = await useGLTF('/models_one/fence.glb')
@@ -40,9 +48,9 @@ watch(fence_section, () => {
 </script>
 <template>
     <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
-        <TresMesh receive-shadow :translate-y="-0.05">
+        <TresMesh receive-shadow :translate-y="-0.5">
             <TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial color="violet" />
+            <TresMeshStandardMaterial v-bind="pbrTexture" />
         </TresMesh>
 
         <TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">