move test
This commit is contained in:
parent
0b105c7624
commit
398b7ca54e
|
@ -22,27 +22,26 @@ 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 = 10;
|
||||
|
||||
const models = ref<model3DType[]>([])
|
||||
const clickable_items = ref<any[]>([])
|
||||
const clickable_refs = ref<any[]>([])
|
||||
const envVars = reactive({}) as EnvVars
|
||||
const process_loading = ref(null)
|
||||
const targetDistance = reactive({ max: 10, min: 0 })
|
||||
let sidebar_clickable = [] as PromoScene[]
|
||||
let sidebar_visible = [] as PromoScene[]
|
||||
let addTexture: any
|
||||
|
||||
const COUNT = 100
|
||||
const controls_targetto = ref() as Ref<Vector3 | undefined>;
|
||||
const controls_targetto_count = ref(CON_MOVETO_COUNT)
|
||||
const controls_targetto_count = ref(COUNT)
|
||||
const camera_moveto = ref() as Ref<Vector3 | undefined>;
|
||||
const camera_moveto_count = ref(CON_MOVETO_COUNT)
|
||||
const camera_moveto_count = ref(COUNT)
|
||||
const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
|
||||
const camera_rotatetoto_count = ref(CAM_MOVETO_COUNT)
|
||||
const camera_rotatetoto_count = ref(COUNT)
|
||||
|
||||
const sidebar = usePromoSidebar();
|
||||
const sidebar_scene = usePromoScene();
|
||||
|
@ -90,14 +89,13 @@ const setEnv = async () => {
|
|||
const setControls = () => {
|
||||
if (!controls.value) return;
|
||||
controls.value.enabled = false;
|
||||
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
|
||||
targetDistance.max = raw_dataStore.data.max_distance;
|
||||
targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
|
||||
// (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
|
||||
(controls.value as any).maxDistance = raw_dataStore.data.max_distance;
|
||||
|
||||
camera.value?.position.set(
|
||||
(controls.value as any).maxDistance * 0.5,
|
||||
(controls.value as any).maxDistance * 0.5,
|
||||
(controls.value as any).maxDistance * 0.5
|
||||
);
|
||||
const d = targetDistance.max * 0.5
|
||||
camera.value?.position.set(d, d, d);
|
||||
(controls.value as any).target = new Vector3(0, 0, 0);
|
||||
(controls.value as any).autoRotate = false;
|
||||
|
||||
|
@ -268,8 +266,8 @@ const loadModels = async () => {
|
|||
}
|
||||
|
||||
const gotoCenterAndDistance = () => {
|
||||
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
|
||||
(controls.value as any).maxDistance = raw_dataStore.data.max_distance;
|
||||
targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
|
||||
targetDistance.max = raw_dataStore.data.max_distance;
|
||||
controls_targetto.value = new Vector3(0, 0, 0);
|
||||
camera_moveto.value = new Vector3(
|
||||
raw_dataStore.data.max_distance * 0.5,
|
||||
|
@ -305,20 +303,19 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
|
|||
if (!target) return
|
||||
const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
|
||||
if (el) {
|
||||
(controls.value as any).maxDistance = 10;
|
||||
(controls.value as any).minDistance = 1;
|
||||
targetDistance.max = 10
|
||||
targetDistance.min = 1
|
||||
const target_vector = new Vector3();
|
||||
|
||||
el.getWorldPosition(target_vector);
|
||||
target_vector.y = 10;
|
||||
controls_targetto.value = target_vector;
|
||||
|
||||
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
|
||||
camera.value.rotation.z += Math.PI/2
|
||||
camera_moveto.value = target_vector;
|
||||
}
|
||||
}
|
||||
}, { deep: true })
|
||||
|
@ -331,47 +328,45 @@ onAfterRender(() => {
|
|||
|
||||
const dis_to_cam = camera.value?.position.distanceTo(el.value[0].position);
|
||||
if (dis_to_cam) {
|
||||
// console.log(dis_to_cam)
|
||||
const scaling = (1 * dis_to_cam) / 100
|
||||
el.value[0].children[0].scale.set(scaling, scaling, scaling);
|
||||
el.value[0].updateMatrixWorld()
|
||||
}
|
||||
}
|
||||
})
|
||||
if (controls.value) {
|
||||
if (timer.seconds_left == 0) {
|
||||
(controls.value as any).update();
|
||||
}
|
||||
}
|
||||
const koef = 0.02
|
||||
if (controls_targetto.value) {
|
||||
timer.stopTimer();
|
||||
(controls.value as any).target.lerp(controls_targetto.value, 0.01);
|
||||
(controls.value as any).target.lerp(controls_targetto.value, koef);
|
||||
controls_targetto_count.value -= 1
|
||||
if (controls_targetto_count.value == 0) {
|
||||
controls_targetto_count.value = CON_MOVETO_COUNT
|
||||
controls_targetto.value = undefined
|
||||
controls_targetto_count.value = COUNT;
|
||||
controls_targetto.value = undefined;
|
||||
}
|
||||
(controls.value as any).update()
|
||||
}
|
||||
if (camera_moveto.value) {
|
||||
timer.stopTimer();
|
||||
camera.value?.position.lerp(camera_moveto.value, 0.01);
|
||||
camera.value?.position.lerp(camera_moveto.value, koef);
|
||||
camera_moveto_count.value -= 1
|
||||
if (camera_moveto_count.value == 0) {
|
||||
camera_moveto_count.value = CON_MOVETO_COUNT
|
||||
camera_moveto.value = undefined
|
||||
camera_moveto.value = undefined;
|
||||
camera_moveto_count.value = COUNT;
|
||||
|
||||
// (controls.value as any).maxDistance = targetDistance.max;
|
||||
// (controls.value as any).minDistance = targetDistance.min;
|
||||
}
|
||||
}
|
||||
if (camera_rotatetoto.value && !controls_targetto.value) {
|
||||
if (!camera_moveto.value && !controls_targetto.value && camera_rotatetoto.value) {
|
||||
timer.stopTimer();
|
||||
camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
|
||||
camera.value?.quaternion.slerp(camera_rotatetoto.value, koef);
|
||||
// camera.value?.quaternion.normalize();
|
||||
camera_rotatetoto_count.value -= 1;
|
||||
if (camera_rotatetoto_count.value == 0) {
|
||||
camera_rotatetoto_count.value = CAM_MOVETO_COUNT
|
||||
camera_rotatetoto_count.value = COUNT;
|
||||
camera_rotatetoto.value = undefined
|
||||
}
|
||||
}
|
||||
(controls.value as any).update()
|
||||
})
|
||||
|
||||
const timer = useTimer()
|
||||
|
@ -411,6 +406,7 @@ const clickEvent = (event: MouseEvent) => {
|
|||
.filter(Boolean)
|
||||
if (names.length) {
|
||||
sidebar.open(parseInt(names[0].replace('_clickable', '')))
|
||||
sidebar.toggleAccordion('clickable')
|
||||
}
|
||||
}
|
||||
const timerEvent = ['click', 'contextmenu', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'touchmove']
|
||||
|
|
|
@ -13,6 +13,11 @@ const clickable_obj = ref()
|
|||
watch(clickable_obj, () => {
|
||||
sidebar.open(clickable_obj.value);
|
||||
})
|
||||
watch(() => sidebar.id_clickable, () => {
|
||||
if (sidebar.is_open) {
|
||||
clickable_obj.value = sidebar.id_clickable
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
|
||||
|
|
|
@ -43,15 +43,19 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
|
|||
this.is_open = false
|
||||
}
|
||||
},
|
||||
toggleAccordion(name: string) {
|
||||
toggleAccordion(name: string, newState = null) {
|
||||
if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable')
|
||||
if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')
|
||||
|
||||
if (this.accordions.includes(name)) {
|
||||
if (newState == false || newState == null) {
|
||||
this.accordions.splice(this.accordions.indexOf(name), 1)
|
||||
}
|
||||
} else {
|
||||
if (newState == true || newState == null) {
|
||||
this.accordions.push(name)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
isAccOpen(name: string) {
|
||||
|
|
Loading…
Reference in New Issue