115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, watch } from 'vue';
|
|
import type { Ref } from 'vue'
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { Vector3 } from 'three';
|
|
import { TresCanvas, useLoader } from '@tresjs/core';
|
|
import { OrbitControls, Stats } from '@tresjs/cientos'
|
|
import '@tresjs/leches/styles'
|
|
|
|
import LoadModels from './load_models.vue'
|
|
import Sidebar from './sidebar.vue'
|
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
|
import { PROMOBG } from '../../constants';
|
|
import { useLoading } from '../../stores/loading';
|
|
|
|
const minPan = ref(new Vector3(-2, -2, -2))
|
|
const maxPan = ref(new Vector3(2, 2, 2))
|
|
const _v = new Vector3();
|
|
const onChange = (e: any) => {
|
|
if (e.target) {
|
|
_v.copy(e.target);
|
|
e.target.clamp(minPan.value, maxPan.value);
|
|
_v.sub(e.target);
|
|
camera.value.position.sub(_v);
|
|
}
|
|
}
|
|
const loadedPan = (max: any, min: any) => {
|
|
maxPan.value = max
|
|
minPan.value = min
|
|
}
|
|
const sidebar = usePromoSidebar()
|
|
const loading_store = useLoading()
|
|
|
|
const camera = ref()
|
|
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
|
|
|
|
const controlsState = reactive({
|
|
enableDamping: true,
|
|
maxPolarAngle: (Math.PI / 2) - 0.07,
|
|
minAzimuthAngle: (Math.PI / 2) - 0.20,
|
|
})
|
|
const models_loading = ref(true)
|
|
const set_model_load_status = (status: boolean) => {
|
|
models_loading.value = status
|
|
}
|
|
|
|
const route = useRoute()
|
|
const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
|
|
watch(() => route.params.target, () => {
|
|
let t = '1/'
|
|
if (route.params.target) t = route.params.target.toString() + '/'
|
|
if (source.value !== t) {
|
|
source.value = t
|
|
models_loading.value = true
|
|
sidebar.close()
|
|
}
|
|
}, { deep: true })
|
|
|
|
|
|
const sidebarFunc = () => {
|
|
if (sidebar.is_open) {
|
|
sidebar.close()
|
|
} else {
|
|
sidebar.open()
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div v-if="models_loading"
|
|
style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
|
|
{{loading_store.getStatus()}}
|
|
</div>
|
|
<div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
|
|
<TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
|
|
:shadows="false">
|
|
<Stats />
|
|
<TresPerspectiveCamera :position="cameraPosition" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" @change="onChange" make-default />
|
|
<Suspense>
|
|
<LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
|
|
</Suspense>
|
|
</TresCanvas>
|
|
<div class="homelink" :class="[{ open: sidebar.is_open }]">
|
|
<a href="#" @click.prevent="sidebarFunc">
|
|
<i-mdi-chevron-left />
|
|
</a>
|
|
</div>
|
|
<div class="homelink main" v-if="route.params.item">
|
|
<RouterLink :to="`/${route.params.item.toString()}`" @click.prevent="sidebarFunc">
|
|
<i-mdi-home />
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
<Sidebar />
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.canvas-wrapper {
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.loading {
|
|
filter: blur(10px);
|
|
transition: all 300ms linear;
|
|
}
|
|
</style> |