group item animate
This commit is contained in:
parent
a1e4f19c25
commit
dbf6b7987a
|
@ -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 />
|
||||
|
|
|
@ -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)" />
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue