ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add loader

This commit is contained in:
Kseninia Mikhaylova 2024-05-27 13:14:48 +03:00
parent 1b4c5b0b94
commit c3f75faedd
2 changed files with 57 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/App.vue
View File

@ -12,5 +12,7 @@ import { RouterLink } from 'vue-router';
<span style="flex-grow:1"></span> <span style="flex-grow:1"></span>
<RouterLink to="/"><i-mdi-home /></RouterLink> <RouterLink to="/"><i-mdi-home /></RouterLink>
</div> </div>
<RouterView /> <Suspense>
<RouterView />
</Suspense>
</template> </template>

80
front/src/components/Promo/main.vue
View File

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { CameraControls, FBXModel } from '@tresjs/cientos' import { CameraControls, FBXModel, useProgress } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'; import { TresCanvas, useRenderLoop } from '@tresjs/core';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
import { reactive } from 'vue'; import { onMounted, reactive, ref, watch } from 'vue';
import model from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx' import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
const router = useRouter() const router = useRouter()
const minPan = new Vector3(-210,0,-80); const minPan = new Vector3(-210, 0, -80);
const maxPan = new Vector3(210,0,100); const maxPan = new Vector3(210, 0, 100);
const _v = new Vector3(); const _v = new Vector3();
const onChange = (e) => { const onChange = (e) => {
_v.copy(e._target); _v.copy(e._target);
e._target.clamp(minPan,maxPan); e._target.clamp(minPan, maxPan);
_v.sub(e._target); _v.sub(e._target);
e._camera.position.sub(_v); e._camera.position.sub(_v);
} }
@ -30,23 +30,51 @@ const controlsState = reactive({
maxZoom: 1, maxZoom: 1,
minZoom: 0.2, minZoom: 0.2,
}) })
const boxRef = ref()
const { onLoop } = useRenderLoop()
onLoop(({ delta, elapsed }) => {
if (boxRef.value) {
boxRef.value.rotation.y += delta
boxRef.value.rotation.z = elapsed * 0.7
}
})
const { hasFinishLoading, progress } = await useProgress()
</script> </script>
<template> <template>
<TresCanvas window-size> <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
<TresPerspectiveCamera :position="cameraPosition" /> Загрузка {{ progress }}%
<CameraControls v-bind="controlsState" @change="onChange" make-default /> </div>
<Suspense> <div :class="[{ 'invisible': !hasFinishLoading }]">
<FBXModel :path="model" /> <TresCanvas window-size alpha shadows>
<template #fallback> <TresPerspectiveCamera :position="cameraPosition" />
Идет загрузка модели <CameraControls v-bind="controlsState" @change="onChange" make-default />
</template> <Suspense>
</Suspense> <FBXModel :path="modelUrl"></FBXModel>
<TresMesh ref="boxRef" :scale="new Vector3(0.01, 0.5, 0.5)" :position-x="200" :position-y="200" <template #fallback>
@click="router.push('/promo/main/item/1')"> <TresMesh :position-x="0" :position-y="0">
<TresBoxGeometry :args="[100, 100, 100]" /> <TresBoxGeometry :args="[10, 50, 50]" />
<TresMeshNormalMaterial /> </TresMesh>
</TresMesh> </template>
<TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> </Suspense>
<TresAmbientLight :intensity="5" /> <TresMesh :position-x="200" :position-y="200" @click="router.push('/promo/main/item/1')">
</TresCanvas> <TresBoxGeometry :args="[10, 50, 50]" />
</template> <TresMeshNormalMaterial />
</TresMesh>
<TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
<TresAmbientLight :intensity="5" />
</TresCanvas>
</div>
</template>
<style scoped>
.invisible {
visibility: hidden;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
min-height: 100vh;
}
</style>