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