group item animate

This commit is contained in:
Kseninia Mikhaylova 2024-06-06 14:25:35 +03:00
parent a1e4f19c25
commit dbf6b7987a
3 changed files with 18 additions and 18 deletions

View File

@ -25,7 +25,7 @@ onLoop(({ elapsed }) => {
<template>
<div class="container min-w-full">
<TresCanvas shadows>
<TresPerspectiveCamera :position="[2, 3, 6]" />
<TresPerspectiveCamera :position="[-7, 2, 1]" />
<OrbitControls v-bind="controlsState" make-default />
<Canvas />
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />

View File

@ -11,18 +11,18 @@ const lamelles_count = useState('lamelles_count')
</TresMesh>
<Suspense>
<TresGroup>
<TresGroup :rotate-y="Math.PI * -0.5" :position-x="-0.5">
<Item model-url="/models/kosynka.glb" :target="[0.5, 2, 2]" />
<Item model-url="/models/kreplaniye_planok.glb" :target="[1, 2, 2]" />
<Item model-url="/models/planki.glb" :target="[1.5, 2, 2]" />
<Item model-url="/models/stolb.glb" :target="[-1.5, -2, -2]" />
<Item model-url="/models/verh.glb" />
<Item model-url="/models/zakliopki.glb" />
<TresGroup :position-x="-0.5">
<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,]" />
<Item model-url="/models/stolb.glb" :target="[-0.5, 0.25, -0.5,]" />
<Item model-url="/models/verh.glb" :target="[-1, 0.5, -1,]" />
<Item model-url="/models/zakliopki.glb" :target="[-1.5, 1, -1.5,]" />
</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"
:target="new Vector3(5, (lSize * i) * 5, 5)" />

View File

@ -7,7 +7,7 @@ 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();
@ -41,20 +41,20 @@ shadows_and_pos(scene)
const model = ref()
const { onLoop } = useRenderLoop()
let step = 0.005
let stepbase = 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 },
{ axis: 'x', func: 'translateX', },
{ axis: 'y', func: 'translateY', },
{ axis: 'z', func: 'translateZ', },
]
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
let step = stepbase * target[element.axis]
if (Math.abs(point) >= Math.abs(target[element.axis])) {
step = 0
}
model.value[element.func](step)
});
}