This commit is contained in:
Kseninia Mikhaylova 2024-06-11 16:45:51 +03:00
parent 72d7fd4dbc
commit 43e796e612
4 changed files with 22 additions and 16 deletions

View File

@ -11,20 +11,10 @@ const controlsState = reactive({
// maxZoom: 2, // maxZoom: 2,
// minZoom: 1, // minZoom: 1,
}) })
const { hasFinishLoading, progress, items } = await useProgress()
</script> </script>
<template> <template>
<div class="container min-w-full relative"> <div class="container min-w-full relative">
<Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200" <Loader />
leave-active-class="opacity-0 transition-opacity duration-200">
<div v-show="!hasFinishLoading"
class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
<div class="w-200px">
Идет загрузка... {{ progress }} %
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
</div>
</div>
</Transition>
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[8, 2, -4]" /> <TresPerspectiveCamera :position="[8, 2, -4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />

View File

@ -183,9 +183,9 @@ const toggleModal = () => {
<textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea> <textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea>
</div> </div>
</div> </div>
<p> <div class="form-row justify-center">
<button @click="toggleModal">Купить прямо сейчас</button> <button @click.prevent="toggleModal">Купить прямо сейчас</button>
</p> </div>
</form> </form>
</div> </div>
</template> </template>

View File

@ -42,11 +42,11 @@ const targetExplosion = useState('targetExplosion', () => {
<input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25"> <input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25">
</div> </div>
</template> </template>
<TresCanvas shadows> <TresCanvas preset="realistic">
<TresPerspectiveCamera :position="[-7, 2, 4]" /> <TresPerspectiveCamera :position="[-7, 2, 4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense> <Suspense>
<Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" /> <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
</Suspense> </Suspense>
<ModelDiagram /> <ModelDiagram />

16
components/loader.vue Normal file
View File

@ -0,0 +1,16 @@
<script setup lang="ts">
const { hasFinishLoading, progress, items } = await useProgress()
console.log(progress)
</script>
<template>
<Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
leave-active-class="opacity-0 transition-opacity duration-200">
<div v-show="!hasFinishLoading"
class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
<div class="w-200px">
Идет загрузка... {{ progress }} %
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
</div>
</div>
</Transition>
</template>