add calc and explosion

app.vue

@@ -84,6 +84,9 @@ const toggleModal = () => {
         </template>
       </div>
     </div>
+    <div class="block bg-white">
+      <ExpDiagram />
+    </div>
     <div class="block block_imgbg bg-slate-500"
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />

components/calcModels.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, vLightHelper } from '@tresjs/cientos'
-
-import Canvas from './model/canvas.vue';
+import { OrbitControls } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
@@ -17,17 +15,13 @@ const controlsState = reactive({
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
 // console.log({ backLight, primaryLight, secondaryLight })
 
-const { onLoop } = useRenderLoop()
-onLoop(({ elapsed }) => {
-    // console.log(elapsed)
-})
 </script>
 <template>
     <div class="container min-w-full">
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[-7, 2, 1]" />
+            <TresPerspectiveCamera :position="[7, 2, 6]" />
             <OrbitControls v-bind="controlsState" make-default />
-            <Canvas />
+            <ModelParametric />
             <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
             <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
             <TresAmbientLight />

components/expDiagram.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, vLightHelper } from '@tresjs/cientos'
+
+const controlsState = reactive({
+    minDistance: 1,
+    maxDistance: 10,
+    enablePan: false,
+    enableZoom: false,
+    maxPolarAngle: (Math.PI / 2) - 0.2,
+})
+
+</script>
+<template>
+    <div class="container min-w-full">
+        <TresCanvas shadows>
+            <TresPerspectiveCamera :position="[-7, 2, 1]" />
+            <OrbitControls v-bind="controlsState" make-default />
+            <ModelDiagram />
+            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
+            <TresAmbientLight />
+        </TresCanvas>
+    </div>
+</template>
+
+<style scoped>
+.container {
+    height: 600px;
+    display: block;
+}
+</style>

components/model/diagram.vue

@@ -11,7 +11,7 @@ const lamelles_count = useState('lamelles_count')
     </TresMesh>
     <Suspense>
         <TresGroup>
-            <TresGroup :position-x="-0.5">
+            <TresGroup>
                 <Item model-url="/models/kosynka.glb" :target="[0.5, 0.25, 0.5,]" />
                 <Item model-url="/models/kreplaniye_planok.glb" :target="[1, 0.5, 1]" />
                 <Item model-url="/models/planki.glb" :target="[1.5, 1, 1.5,]" />
@@ -21,14 +21,4 @@ const lamelles_count = useState('lamelles_count')
             </TresGroup>
         </TresGroup>
     </Suspense>
-    <Suspense>
-        <TresGroup :position="[1, 0, 1]" v-if="false">
-            <template v-for="i in lamelles_count">
-                <Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true"
-                    :target="new Vector3(5, (lSize * i) * 5, 5)" />
-            </template>
-            <Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]" :remove-pos="true"
-                :target="new Vector3(-5, 0, -5)" />
-        </TresGroup>
-    </Suspense>
 </template>

components/model/item.vue

@@ -7,7 +7,6 @@ scene.receiveShadow = true
 scene.castShadow = true
 
 const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
-console.log(target)
 const box = new Box3();
 box.expandByObject(scene.children[0]);
 let size = new Vector3();
@@ -47,8 +46,8 @@ const axis = [
     { axis: 'y', func: 'translateY', },
     { axis: 'z', func: 'translateZ', },
 ]
-onLoop(({ elapsed }) => {
-    if (model.value) {
+onLoop(() => {
+    if (model.value && props.target) {
         axis.forEach(element => {
             const point = model.value.position[element.axis]
             let step = stepbase * target[element.axis]

components/model/parametric.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Vector3 } from 'three';
+import Item from './item.vue';
+const lSize = 0.1
+const lamelles_count = useState('lamelles_count')
+</script>
+<template>
+    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
+        <TresCircleGeometry :args="[8, 8, 1]" />
+        <TresMeshStandardMaterial color="pink" />
+    </TresMesh>
+    <Suspense>
+        <TresGroup :position="[1, 0, 1]">
+            <template v-for="i in lamelles_count">
+                <Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true" />
+            </template>
+            <Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]"
+                :remove-pos="true" />
+        </TresGroup>
+    </Suspense>
+</template>

types/index.d.ts

@@ -41,5 +41,5 @@ type ApiSocial_networkType = {
     id: number
     name: string
     link: string
-    image: string
+    icon: string
 }