127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import type { Ref } from 'vue'
|
|
import { Vector3 } from 'three';
|
|
|
|
import { TresCanvas } from '@tresjs/core';
|
|
import { CameraControls, useProgress, StatsGl } from '@tresjs/cientos'
|
|
|
|
|
|
import Env from './env.vue'
|
|
import LoadModels from './load_models.vue'
|
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
|
|
|
const sidebar = usePromoSidebar()
|
|
|
|
const _v = new Vector3();
|
|
const onChange = (e: any) => {
|
|
// console.log(e._camera.position.normalize())
|
|
_v.copy(e._target);
|
|
// e._target.clamp(minPan, maxPan);
|
|
_v.sub(e._target);
|
|
e._camera.position.sub(_v);
|
|
}
|
|
|
|
const camera = ref()
|
|
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
|
|
|
|
const controlsState = reactive({
|
|
maxPolarAngle: (Math.PI / 2) - 0.02,
|
|
enableZoom: false,
|
|
})
|
|
|
|
const { hasFinishLoading, progress } = await useProgress()
|
|
|
|
const point_light = reactive({
|
|
intensity: 1000,
|
|
position: new Vector3(-100, 50, 5),
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
|
Загрузка {{ progress }}%
|
|
</div>
|
|
<div :class="[{ 'invisible': !hasFinishLoading }]">
|
|
<TresCanvas shadows window-size>
|
|
<Suspense>
|
|
<StatsGl />
|
|
</Suspense>
|
|
<TresPerspectiveCamera :position="cameraPosition" ref="camera" />
|
|
<CameraControls v-bind="controlsState" @change="onChange" make-default />
|
|
<Suspense>
|
|
<Env />
|
|
</Suspense>
|
|
<Suspense>
|
|
<LoadModels />
|
|
</Suspense>
|
|
<TresMesh cast-shadow>
|
|
<TresBoxGeometry :args="[1, 1, 1]" />
|
|
<TresMeshStandardMaterial />
|
|
</TresMesh>
|
|
<TresMesh :position-y="0" :rotate-x="-Math.PI / 2" receive-shadow>
|
|
<TresPlaneGeometry :args="[200, 200]" />
|
|
<TresShadowMaterial :opacity="0.2" />
|
|
</TresMesh>
|
|
<TresPointLight v-bind="point_light" cast-shadow />
|
|
</TresCanvas>
|
|
</div>
|
|
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
|
|
<a href="#" @click.prevent="sidebar.close" class="sidebar-close">
|
|
<i-mdi-close />
|
|
</a>
|
|
<template v-if="sidebar.is_open">
|
|
<h2>{{ sidebar.title }}</h2>
|
|
<template v-for="p in sidebar.description.split('\n')">
|
|
<p>{{ p }}</p>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loader {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 23vw;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
right: -27vw;
|
|
bottom: 0;
|
|
transition: all 300ms linear;
|
|
|
|
padding: 2rem;
|
|
|
|
&.open {
|
|
right: 0
|
|
}
|
|
|
|
&-close {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
font-size: 2rem;
|
|
color: black
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 1.65rem;
|
|
margin: 1rem
|
|
}
|
|
|
|
p {}
|
|
}
|
|
</style> |