bx-1379-redesign #15
|
@ -35,7 +35,7 @@ const targetDistance = reactive({ max: 10, min: 0 })
|
||||||
let sidebar_clickable = [] as PromoScene[]
|
let sidebar_clickable = [] as PromoScene[]
|
||||||
let sidebar_visible = [] as PromoScene[]
|
let sidebar_visible = [] as PromoScene[]
|
||||||
|
|
||||||
const COUNT = 30
|
const COUNT = 50
|
||||||
type smooth = {
|
type smooth = {
|
||||||
value: Vector3 | Quaternion | undefined,
|
value: Vector3 | Quaternion | undefined,
|
||||||
count: number
|
count: number
|
||||||
|
@ -271,43 +271,19 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
|
||||||
const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
|
const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
|
||||||
if (el) {
|
if (el) {
|
||||||
targetDistance.max = 10
|
targetDistance.max = 10
|
||||||
targetDistance.min = 1
|
targetDistance.min = raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 7 : 3
|
||||||
|
|
||||||
const target_vector = new Vector3();
|
const target_vector = new Vector3();
|
||||||
el.getWorldPosition(target_vector);
|
el.getWorldPosition(target_vector);
|
||||||
target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 7 : 1)
|
target_vector.setComponent(1, targetDistance.min)
|
||||||
|
|
||||||
const d = raw_dataStore.data.max_distance * 0.25;
|
|
||||||
const lerp_vector = new Vector3()
|
|
||||||
lerp_vector.lerpVectors(camera.value?.position, target_vector, 0.5)
|
|
||||||
lerp_vector.setComponent(1, d)
|
|
||||||
// const multiply = new Vector3(1.25, 1, 1.25)
|
|
||||||
const multiply = new Vector3(1, 1, 1)
|
|
||||||
|
|
||||||
|
const multiply = new Vector3(1.25, 2, 1.25)
|
||||||
const target_move = target_vector.multiply(multiply)
|
const target_move = target_vector.multiply(multiply)
|
||||||
const lerp_move = lerp_vector.multiply(multiply)
|
|
||||||
|
|
||||||
point_1.value = target_move
|
|
||||||
point_2.value = lerp_move;
|
|
||||||
|
|
||||||
if (
|
|
||||||
camera.value?.position
|
|
||||||
&& (
|
|
||||||
camera.value?.position.distanceTo(lerp_move) > d
|
|
||||||
|| camera.value?.position.distanceTo(target_move) > raw_dataStore.data.min_distance
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
set_moveto(smooth_target, lerp_vector)
|
|
||||||
set_moveto(smooth_move, lerp_move)
|
|
||||||
|
|
||||||
set_moveto(temp_smooth_target, target_vector)
|
|
||||||
set_moveto(temp_smooth_move, target_move)
|
|
||||||
} else {
|
|
||||||
set_moveto(smooth_target, target_vector)
|
set_moveto(smooth_target, target_vector)
|
||||||
set_moveto(smooth_move, target_move)
|
set_moveto(smooth_move, target_move)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
|
|
||||||
const { onBeforeRender } = useLoop()
|
const { onBeforeRender } = useLoop()
|
||||||
|
@ -327,14 +303,14 @@ onBeforeRender(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const koef = (1 / COUNT) * 3
|
// const koef = (1 / COUNT) * 3
|
||||||
|
const koef = 0.05
|
||||||
const smoothy = [
|
const smoothy = [
|
||||||
{
|
{
|
||||||
el: smooth_target,
|
el: smooth_target,
|
||||||
temp_el: temp_smooth_target,
|
temp_el: temp_smooth_target,
|
||||||
f: () => {
|
f: () => {
|
||||||
(controls.value as any).target.lerp(smooth_target.value as Vector3, koef);
|
(controls.value as any).target.lerp(smooth_target.value as Vector3, koef);
|
||||||
// (controls.value as any).update()
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -342,25 +318,35 @@ onBeforeRender(() => {
|
||||||
temp_el: temp_smooth_move,
|
temp_el: temp_smooth_move,
|
||||||
f: () => {
|
f: () => {
|
||||||
camera.value?.position.lerp(smooth_move.value as Vector3, koef);
|
camera.value?.position.lerp(smooth_move.value as Vector3, koef);
|
||||||
// camera.value?.updateMatrixWorld()
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
smoothy.forEach(element => {
|
if (smooth_target.value || smooth_move.value) {
|
||||||
if (element.el.value) {
|
|
||||||
timer.resetTimer()
|
timer.resetTimer()
|
||||||
home_timer.resetTimer()
|
home_timer.resetTimer()
|
||||||
element.f()
|
if (smooth_move.value) {
|
||||||
element.el.count -= 1
|
camera.value?.position.lerp(smooth_move.value as Vector3, koef);
|
||||||
if (element.el.count == 1) {
|
smooth_move.count -=1
|
||||||
set_moveto(element.el, undefined)
|
if (smooth_move.count == 1) {
|
||||||
if (element.temp_el && element.temp_el.value) {
|
set_moveto(smooth_move, undefined)
|
||||||
set_moveto(element.el, element.temp_el.value)
|
if (temp_smooth_move.value) {
|
||||||
set_moveto(element.temp_el, undefined)
|
set_moveto(smooth_move, temp_smooth_move.value)
|
||||||
|
set_moveto(temp_smooth_move, undefined)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}else
|
||||||
|
if (smooth_target.value) {
|
||||||
|
(controls.value as any).target.lerp(smooth_target.value as Vector3, koef);
|
||||||
|
smooth_target.count -=1
|
||||||
|
if (smooth_target.count == 1) {
|
||||||
|
set_moveto(smooth_target, undefined)
|
||||||
|
if (temp_smooth_target.value) {
|
||||||
|
set_moveto(smooth_target, temp_smooth_target.value)
|
||||||
|
set_moveto(temp_smooth_target, undefined)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
(controls.value as any).update()
|
(controls.value as any).update()
|
||||||
camera.value?.updateMatrixWorld()
|
camera.value?.updateMatrixWorld()
|
||||||
})
|
})
|
||||||
|
@ -462,11 +448,11 @@ onUnmounted(() => {
|
||||||
<TresObject3D v-bind="item.clone()" :ref="clickable_refs[i]" />
|
<TresObject3D v-bind="item.clone()" :ref="clickable_refs[i]" />
|
||||||
</template>
|
</template>
|
||||||
<TresMesh :position="point_1">
|
<TresMesh :position="point_1">
|
||||||
<TresSphereGeometry :args="[0.1, 32,32]" />
|
<TresSphereGeometry :args="[0.1, 32, 32]" />
|
||||||
<TresMeshStandardMaterial color="violet" />
|
<TresMeshStandardMaterial color="violet" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
<TresMesh :position="point_2">
|
<TresMesh :position="point_2">
|
||||||
<TresSphereGeometry :args="[0.1, 32,32]" />
|
<TresSphereGeometry :args="[0.1, 32, 32]" />
|
||||||
<TresMeshStandardMaterial color="darkgreen" />
|
<TresMeshStandardMaterial color="darkgreen" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
</TresGroup>
|
</TresGroup>
|
||||||
|
|
Loading…
Reference in New Issue