sidebar clickable fix

This commit is contained in:
aarizona 2024-08-31 11:12:58 +03:00
parent f529eedadb
commit 0b105c7624
2 changed files with 21 additions and 5 deletions

View File

@ -44,6 +44,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
flex-direction: column;
gap: 1.5rem;
color: #484848;
pointer-events: none;
&.open {
right: 0;
@ -55,6 +56,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
}
&-content {
pointer-events: all;
background-color: $bg;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;

View File

@ -22,10 +22,11 @@ import { useLoading } from '../../stores/loading';
import { mobileAndTabletCheck } from '../../helpers';
import { useTimer } from '../../stores/timer';
import { useRawData } from '../../stores/raw_data';
import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
const props = defineProps(['source', 'loaded_pan'])
const CON_MOVETO_COUNT = 150;
const CAM_MOVETO_COUNT = 100;
const CAM_MOVETO_COUNT = 10;
const models = ref<model3DType[]>([])
const clickable_items = ref<any[]>([])
@ -128,12 +129,14 @@ const makeGround = () => {
ground.name = "ground"
models.value.push({ name: 'ground', modelFile: ground })
}
const clearValues = () => {
clickable_items.value = []
clickable_refs.value = []
sidebar_clickable = []
sidebar_visible = []
}
const loadModels = async () => {
if (!props.source) return
if (!raw_dataStore.data) return
@ -290,10 +293,12 @@ watch(() => props.source, () => {
}
}, { deep: true })
watch(() => sidebar, () => {
watch(() => sidebar.is_open, () => {
if (sidebar.is_open == false) {
gotoCenterAndDistance();
}
})
watch(() => sidebar.is_open && sidebar.id_clickable, () => {
if (sidebar.is_open && sidebar.id_clickable) {
const clickable = useClickable()
const target = clickable.list.find(el => el.id == sidebar.id_clickable)
@ -306,7 +311,14 @@ watch(() => sidebar, () => {
el.getWorldPosition(target_vector);
controls_targetto.value = target_vector;
camera_rotatetoto.value = new Quaternion(Math.PI * 0.5, Math.PI * 0.5, Math.PI * 0.5, Math.PI * 0.5)
const distance = (controls.value as any).target.distanceTo(target_vector)
controls_targetto_count.value = parseInt(distance) * 10
const quaternion = new Quaternion();
quaternion.setFromAxisAngle(new Vector3(1, 0, 0), -45 * 4 * (Math.PI / 180));
// camera.value?.applyQuaternion(quaternion)
camera_rotatetoto.value = quaternion
}
}
}, { deep: true })
@ -350,10 +362,10 @@ onAfterRender(() => {
camera_moveto.value = undefined
}
}
if (camera_rotatetoto.value) {
if (camera_rotatetoto.value && !controls_targetto.value) {
timer.stopTimer();
camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
camera.value?.quaternion.normalize();
// camera.value?.quaternion.normalize();
camera_rotatetoto_count.value -= 1;
if (camera_rotatetoto_count.value == 0) {
camera_rotatetoto_count.value = CAM_MOVETO_COUNT
@ -381,6 +393,8 @@ const stopTimer = () => {
const pointer = reactive({ x: 0, y: 0 })
const clickEvent = (event: MouseEvent) => {
if (event.target && !(event.target as HTMLElement).closest('canvas')) return
const x = (event.clientX / window.innerWidth) * 2 - 1
const y = - (event.clientY / window.innerHeight) * 2 + 1
if (x == pointer.x && y == pointer.y) return