41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 1,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
const { hasFinishLoading, progress, items } = await useProgress()
|
|
</script>
|
|
<template>
|
|
<div class="container min-w-full relative">
|
|
<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">
|
|
Loading... {{ progress }} %
|
|
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
|
|
</div>
|
|
</div>
|
|
<TresCanvas shadows>
|
|
<TresPerspectiveCamera :position="[8, 2, -4]" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
|
|
</Suspense>
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |