part of explosion

components/calcModels.vue

@@ -28,7 +28,7 @@ onLoop(({ elapsed }) => {
             <TresPerspectiveCamera :position="[2, 3, 6]" />
             <OrbitControls v-bind="controlsState" make-default />
             <Canvas />
-            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
             <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>

components/model/canvas.vue

@@ -1,33 +1,34 @@
 <script setup lang="ts">
-import { useScroll } from '@vueuse/core'
+import { Vector3 } from 'three';
 import Item from './item.vue';
 const lSize = 0.1
 const lamelles_count = useState('lamelles_count')
-const { x, y, isScrolling, arrivedState, directions } = useScroll(document)
-console.log(y)
 </script>
 <template>
-    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
+    <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 :rotate-y="Math.PI * -0.5" :position-x="-0.5">
+        <TresGroup>
-            <Item model-url="/models/kosynka.glb" />
+            <TresGroup :rotate-y="Math.PI * -0.5" :position-x="-0.5">
-            <Item model-url="/models/kreplaniye_planok.glb" />
+                <Item model-url="/models/kosynka.glb" :target="[0.5, 2, 2]" />
-            <Item model-url="/models/planki.glb" />
+                <Item model-url="/models/kreplaniye_planok.glb" :target="[1, 2, 2]" />
-            <Item model-url="/models/stolb.glb" />
+                <Item model-url="/models/planki.glb" :target="[1.5, 2, 2]" />
-            <Item model-url="/models/verh.glb" />
+                <Item model-url="/models/stolb.glb" :target="[-1.5, -2, -2]" />
-            <Item model-url="/models/zakliopki.glb" />
+                <Item model-url="/models/verh.glb" />
+                <Item model-url="/models/zakliopki.glb" />
+            </TresGroup>
         </TresGroup>
     </Suspense>
     <Suspense>
-        <TresGroup :position="[1, 0, 1]">
+        <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" />
+                <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]"
+            <Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]" :remove-pos="true"
-                :remove-pos="true" />
+                :target="new Vector3(-5, 0, -5)" />
         </TresGroup>
     </Suspense>
 </template>

components/model/item.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'position', 'removePos'])
+const props = defineProps(['modelUrl', 'position', 'removePos', 'target'])
 const { scene } = await useGLTF(props.modelUrl)
 scene.receiveShadow = true
 scene.castShadow = true
 
+const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
+
 const box = new Box3();
 box.expandByObject(scene.children[0]);
-let center = new Vector3();
-box.getCenter(center)
 let size = new Vector3();
 box.getSize(size)
-
+// const box_size = [size.x, size.y, size.z]
-const box_size = [size.x, size.y, size.z]
 
 scene.children.forEach((el: any) => {
     el.castShadow = true
@@ -39,13 +38,30 @@ function shadows_and_pos(scene: any) {
 }
 
 shadows_and_pos(scene)
+
+const model = ref()
+const { onLoop } = useRenderLoop()
+let step = 0.005
+const axis = [
+    { axis: 'x', func: 'translateX', step: step, max: target.x, min: 0 },
+    { axis: 'y', func: 'translateY', step: step, max: target.y, min: 0 },
+    { axis: 'z', func: 'translateZ', step: step, max: target.z, min: 0 },
+]
+onLoop(({ elapsed }) => {
+    if (model.value) {
+        axis.forEach(element => {
+            // if (step == 0) return
+            const point = model.value.position[element.axis]
+            // if (point >= element.max) step = Math.abs(element.step) * -1
+            // else if (point <= element.min) step = Math.abs(element.step)
+            if (point >= element.max) step = 0
+            model.value[element.func](step)
+        });
+    }
+})
 </script>
 <template>
-    <TresGroup :position="props.position || [0, 0, 0]">
+    <TresGroup :position="props.position || [0, 0, 0]" ref="model">
-        <TresMesh :position="center" cast-shadow receive-shadow v-if="false">
-            <TresBoxGeometry :args="box_size" />
-            <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
-        </TresMesh>
         <primitive :object="scene" cast-shadow receive-shadow />
     </TresGroup>
 </template>