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> <template>
<div class="container min-w-full"> <div class="container min-w-full">
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[2, 3, 6]" /> <TresPerspectiveCamera :position="[-7, 2, 1]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Canvas /> <Canvas />
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow /> <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />

View File

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

View File

@ -7,7 +7,7 @@ scene.receiveShadow = true
scene.castShadow = true scene.castShadow = true
const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0) const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
console.log(target)
const box = new Box3(); const box = new Box3();
box.expandByObject(scene.children[0]); box.expandByObject(scene.children[0]);
let size = new Vector3(); let size = new Vector3();
@ -41,20 +41,20 @@ shadows_and_pos(scene)
const model = ref() const model = ref()
const { onLoop } = useRenderLoop() const { onLoop } = useRenderLoop()
let step = 0.005 let stepbase = 0.005
const axis = [ const axis = [
{ axis: 'x', func: 'translateX', step: step, max: target.x, min: 0 }, { axis: 'x', func: 'translateX', },
{ axis: 'y', func: 'translateY', step: step, max: target.y, min: 0 }, { axis: 'y', func: 'translateY', },
{ axis: 'z', func: 'translateZ', step: step, max: target.z, min: 0 }, { axis: 'z', func: 'translateZ', },
] ]
onLoop(({ elapsed }) => { onLoop(({ elapsed }) => {
if (model.value) { if (model.value) {
axis.forEach(element => { axis.forEach(element => {
// if (step == 0) return
const point = model.value.position[element.axis] const point = model.value.position[element.axis]
// if (point >= element.max) step = Math.abs(element.step) * -1 let step = stepbase * target[element.axis]
// else if (point <= element.min) step = Math.abs(element.step) if (Math.abs(point) >= Math.abs(target[element.axis])) {
if (point >= element.max) step = 0 step = 0
}
model.value[element.func](step) model.value[element.func](step)
}); });
} }